How to Embed Gift Lists on Your Website

Overview

GiftBlazer is the place to find amazing gift ideas from local stores. If you cater to a local audience through a newspaper, blog, influencer channels, email newsletter, or anything else, GiftBlazer embeds give you a powerful tool to make your content more engaging.

Whether you're comfortable making changes to your website or not, read on for the step-by-step walkthrough to get everything you need to bring these embeds to life for your audience.

Step-by-Step Instructions

1. 1
   Create a Custom List

   If you haven't already, create a custom gift list with your interesting finds. This could be a mix of items around a topic (like "Holiday Gift Guides" or "Newest Boutiques in Town"). Or, if you're a store owner, it could be a list of your own products that you want to highlight (like "Best-Selling Items" or "Staff Picks").

2. 2
   Click 'Share Lists' on the Favorites page

   The Share Lists button is in the upper right corner. Clicking it triggers a popup where you can choose between creating a "Share" or an "Embed." A "Share" is a simple link that displays your list on a clean, easy-to-read GiftBlazer page. An "Embed" gives you HTML code that you can use to embed your list directly into your own website.

3. 3
   Choose "Embed"

   This guide is about creating an Embed so click that one 😊

4. 4
   Select Your Desired List and Configure

   First, select the list you want to embed from the dropdown. Then, configure the following options:

   • Title: The title that will appear above your embedded list.
   • Padding: The space between the products and the edges of the embedded area. You can choose None, Small, and Large.
   • Title Color & Display: Adjust the color for the title text or hide it completely if need be.
   • Border Color & Display: When displayed, a thin border will help the embedded area stand out from the background.
   • Background Color: The color for the background of the embedded area. Typically you match this to your website's background color.
   • Show Shadow: Displays a slight shadow around the embedded area to set it off from the background.

   Click Preview when you're good to go. This will allow you to get a sense for how things will look. You'll be able to click Back from there and fine-tune these configurations.

5. 5
   Preview the Embed

   After a moment, your embed preview is generated on a hypothetical Holiday Gift Guide page. Check it out and make sure it looks like it will fit in well with your site's design and layout.

   Click Back to make any adjustments. Click Create to generate the HTML code you'll need. Both buttons are found at the top of the preview page.

6. 6
   Copy or Download the HTML Code

   There are two options to get the code depending on your level of technical comfort.

   If you're the person making the changes to the website, and aren't afraid of the phrase <iframe>, then click Show me the HTML to copy the code to your clipboard or download it to your computer as a .txt file.

   If someone else is making changes to the website, or you don't know what an <iframe> is, then click Walk me through this to get step-by-step instructions for how to download the HTML code as a .txt file and attach it to an email to the person making the website changes.

7. 7
   Publish the Page with the Embed

   Now that the code is in place, publish the page to make the embed live. You can then promote the page with your audiences.

Pro Tip

If you want to make the embed seem like it's completely native to your site, do the following:

• Set padding to None.
• Hide the title, border, and shadow.
• Match the background color to your site's background color.

Other Guides For...