How to Embed a Widget on BigCommerce

Prerequisites

Before you start, have the following ready:

• Your Embeddy embed code. Log in at https://embeddy.ai/dashboard, open your widget, and copy the iframe embed code:

<iframe
  src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
  width="100%"
  height="500"
  frameborder="0"
></iframe>

• BigCommerce admin access. You need Store Owner or a staff account with permissions to manage Storefront settings, Script Manager, and Page Builder.
• A Stencil theme (for Method 3). Most modern BigCommerce stores use Stencil themes such as Cornerstone. Legacy Blueprint themes use a different file structure.

Method 1: Script Manager

Easiest — no code editing required

BigCommerce's Script Manager lets you inject custom HTML and JavaScript into your store pages without editing theme files. This is the quickest way to add an Embeddy widget globally or to specific page types.

1. 1

   Open Script Manager

   In your BigCommerce admin, navigate to Storefront > Script Manager.

2. 2

   Create a new script

   Click "Create a Script". Give it a descriptive name like "Embeddy Widget".

3. 3

   Configure the script settings

   Set Location on page to "Footer". Under Select pages where script will be added, choose the relevant option (e.g., "All Pages", "Store Pages", or a specific page). Set Script type to "Script".

4. 4

   Paste your embed code

   In the Script contents text area, paste a script that dynamically inserts your iframe into a target container on the page:

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var target = document.querySelector(".page-content, .body");
    if (target) {
      var wrapper = document.createElement("div");
      wrapper.style.maxWidth = "800px";
      wrapper.style.margin = "2rem auto";
      wrapper.innerHTML = '<iframe src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID" width="100%" height="500" frameborder="0" style="border:none;border-radius:8px;" loading="lazy" title="Interactive Widget"></iframe>';
      target.appendChild(wrapper);
    }
  });
</script>

5. 5

   Save

   Click "Save". Visit your live store to confirm the widget appears on the selected pages.

Method 2: Page Builder HTML Block

Easy — visual drag-and-drop

BigCommerce's Page Builder is a drag-and-drop visual editor that lets you add HTML blocks to any content page. This is ideal for placing an Embeddy widget on a specific landing page or content page.

1. 1

   Open Page Builder

   In your BigCommerce admin, go to Storefront > Web Pages. Click the page you want to edit (or create a new one). The Page Builder editor will open.

2. 2

   Add an HTML widget

   In the left panel, find the "HTML" widget under the Layout section. Drag it to your desired position on the page.

3. 3

   Paste your embed code

   Click the HTML widget to select it. In the settings panel on the left, paste your Embeddy iframe embed code into the HTML editor.

4. 4

   Save and publish

   Click "Save & Close" or "Publish". Visit the page on your live store to verify the widget appears.

<div style="max-width: 800px; margin: 2rem auto;">
  <iframe
    src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
    width="100%"
    height="500"
    frameborder="0"
    style="border: none; border-radius: 8px;"
    loading="lazy"
    title="Interactive Widget"
  ></iframe>
</div>

Method 3: Edit Stencil Theme Files

Advanced — requires Handlebars/HTML knowledge

For precise placement on product pages, category pages, or any template, you can edit the Stencil theme files directly. BigCommerce Stencil themes use Handlebars templates, so you can insert raw HTML including iframes.

1. 1

   Download your theme

   Go to Storefront > Themes, click the three-dot menu on your active theme, and select "Advanced > Edit Theme Files" or download the theme for local development with the Stencil CLI.

2. 2

   Open the target template

   Navigate to the template you want to modify. Common files include templates/pages/product.html for product pages or templates/pages/page.html for content pages.

3. 3

   Paste the embed code

   Insert the iframe code at the desired position in the Handlebars template:

{{!-- Embeddy Widget --}}
<div class="embeddy-widget-wrapper" style="max-width: 800px; margin: 2rem auto;">
  <iframe
    src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
    width="100%"
    height="500"
    frameborder="0"
    style="border: none; border-radius: 8px;"
    loading="lazy"
    title="Interactive Widget"
  ></iframe>
</div>

4. 4

   Save and apply

   Save the file and apply the theme. If using the Stencil CLI, run stencil push to upload your changes.

Embedding on Product Pages

Product pages are one of the most effective places to embed an Embeddy widget on BigCommerce. Common use cases include:

• Size calculators — help shoppers find the right fit
• Product configurators — let customers customize options visually
• Compatibility checkers — ensure parts or accessories work together
• ROI calculators — demonstrate value for high-ticket items

To embed on all product pages, use Method 1 with "Product Pages" selected in Script Manager, or edit templates/pages/product.html in Method 3.

To embed on specific products only, use Script Manager with conditional JavaScript that checks the product ID or URL, or create a custom product template and assign it to specific products in the BigCommerce admin.

Troubleshooting

Frequently Asked Questions