How to Embed a Widget on a Snipcart Site

Snipcart is a developer-focused shopping cart that drops into any website via a few lines of HTML and JavaScript. Because Snipcart works on any site — static HTML, Jekyll, Hugo, Gatsby, Next.js, or any CMS — embedding Embeddy widgets alongside Snipcart is straightforward. This guide covers three approaches: direct HTML placement, static site generator integration, and dynamic JavaScript-driven embeds.

Beginner-Intermediate~8 min readUpdated 2026

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>

A website with Snipcart v3 installed. You should already have the Snipcart CSS and JS snippets in your site's <head> and Snipcart buy buttons on your pages.
Access to edit your site's HTML. Since Snipcart works on any site, you just need the ability to edit your HTML files (or CMS templates).

Good news: Since Snipcart adds e-commerce to any website, you have full control over the HTML. Embedding an Embeddy widget is as simple as pasting the iframe code anywhere in your markup.

Method 1: Direct HTML Placement

Easiest — plain HTML

The simplest approach: place the Embeddy iframe directly in your HTML alongside your Snipcart product buttons. This works for static HTML sites, hand-coded pages, or any site where you edit raw HTML.

1
Open your product page HTML
Open the HTML file that contains your Snipcart product markup (the button.snipcart-add-item elements).
2
Add the iframe near the product
Place the Embeddy iframe either above or below the Snipcart buy button:

<div class="product-card">
  <h2>Product Name</h2>
  <p>Product description goes here.</p>

  <!-- Embeddy Widget -->
  <div class="embeddy-widget" style="max-width: 100%; margin: 1.5rem 0;">
    <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>

  <!-- Snipcart Buy Button -->
  <button class="snipcart-add-item"
    data-item-id="product-id"
    data-item-price="25.00"
    data-item-url="/products/product-page.html"
    data-item-name="Product Name">
    Add to Cart
  </button>
</div>

3
Save and open in browser
Save the file and open it in your browser. Both the Embeddy widget and the Snipcart buy button should work independently.

Tip: Embeddy widgets and Snipcart both use iframes. They do not conflict with each other. The Embeddy widget loads in its own iframe, while Snipcart uses an overlay cart.

Method 2: Static Site Generators (Jekyll, Hugo, Gatsby, etc.)

Intermediate — template-based integration

Snipcart is commonly used with static site generators (SSGs). You can add the Embeddy iframe to your product templates so every product page automatically includes the widget.

Jekyll Example:

<!-- _layouts/product.html -->
<article class="product">
  <h1>{{ page.title }}</h1>
  {{ content }}

  <!-- Embeddy Widget -->
  <div class="embeddy-widget" 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>

  <!-- Snipcart Buy Button -->
  <button class="snipcart-add-item"
    data-item-id="{{ page.product_id }}"
    data-item-price="{{ page.price }}"
    data-item-url="{{ page.url }}"
    data-item-name="{{ page.title }}">
    Add to Cart - ${{ page.price }}
  </button>
</article>

Hugo Example:

<!-- layouts/products/single.html -->
{{ define "main" }}
<article class="product">
  <h1>{{ .Title }}</h1>
  {{ .Content }}

  <!-- Embeddy Widget -->
  <div class="embeddy-widget" 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>

  <!-- Snipcart Buy Button -->
  <button class="snipcart-add-item"
    data-item-id="{{ .Params.product_id }}"
    data-item-price="{{ .Params.price }}"
    data-item-url="{{ .Permalink }}"
    data-item-name="{{ .Title }}">
    Add to Cart
  </button>
</article>
{{ end }}

Tip: You can make the widget ID dynamic using front matter variables. Add a widget_id field to each product's front matter and reference it in the template to show different widgets per product.

Method 3: Dynamic JavaScript Integration

Advanced — programmatic embedding

For dynamic sites or single-page applications, you can inject the Embeddy widget programmatically using JavaScript. This approach is ideal when your product data is loaded dynamically.

<!-- Container for the widget -->
<div id="embeddy-container"></div>

<script>
  // Dynamically inject an Embeddy widget
  function loadEmbeddyWidget(containerId, widgetId, propsId) {
    var container = document.getElementById(containerId);
    if (!container) return;

    var iframe = document.createElement('iframe');
    iframe.src = 'https://embeddy.ai/webhost/' + widgetId + '?widget_props_id=' + propsId;
    iframe.width = '100%';
    iframe.height = '500';
    iframe.frameBorder = '0';
    iframe.style.border = 'none';
    iframe.style.borderRadius = '8px';
    iframe.loading = 'lazy';
    iframe.title = 'Interactive Widget';

    container.innerHTML = '';
    container.appendChild(iframe);
  }

  // Load widget when the page is ready
  document.addEventListener('DOMContentLoaded', function() {
    loadEmbeddyWidget('embeddy-container', 'WIDGET_ID', 'PROPS_ID');
  });
</script>

Use case: The JavaScript approach is ideal for React, Vue, or Angular apps that use Snipcart. You can call loadEmbeddyWidget() whenever a product page loads, passing different widget IDs per product.

Embedding Alongside Snipcart Products

Snipcart product pages are ideal for interactive widgets. Common use cases:

Size calculators — help shoppers find the right fit before adding to cart
Product configurators — let customers customize options before purchase
Compatibility checkers — ensure accessories work with the customer's setup
Quizzes and recommendations — guide shoppers to the right product

Since Snipcart uses HTML data attributes on buttons, the Embeddy iframe sits alongside the buy button without any conflict. Place the widget above the buy button for maximum engagement, or below the product description.

For per-product widgets, use template front matter (Method 2) or JavaScript (Method 3) to pass different widget IDs per product page.

Troubleshooting

Widget shows blank or loading spinner

Verify your Widget ID and Props ID are correct. Copy the embed code fresh from the Embeddy dashboard and confirm the widget is published.

Snipcart cart overlay covers the widget

Snipcart's cart overlay has a high z-index by default. This is expected behavior — the cart should appear above page content. If the widget needs to remain visible while the cart is open, adjust the Snipcart sidebar layout in your Snipcart dashboard settings.

Content Security Policy (CSP) error

If your site has strict CSP headers, add embeddy.ai to your frame-src directive. Since you control the site hosting, you can update your server configuration or meta tags to allow iframes from embeddy.ai.

Widget is cut off on mobile

Ensure the iframe has width="100%". Add overflow: hidden to the wrapper. Use CSS media queries to adjust the height on smaller viewports.

Widget does not show after static site deploy

If using an SSG, make sure you rebuilt and deployed your site after adding the iframe code. Run your build command (e.g., hugo build, jekyll build, gatsby build) and deploy the output.

Frequently Asked Questions

Does Embeddy conflict with Snipcart's JavaScript?

No. Embeddy widgets load in isolated iframes and have no interaction with Snipcart's JavaScript. Both can run on the same page without any conflicts.

Will embedding a widget affect my site's performance?

Iframes load independently and do not block your page render. Adding loading="lazy" defers loading until the widget scrolls into view. Your Snipcart buttons and cart remain unaffected. Embeddy uses a global CDN for fast delivery.

Which SSGs work best with Snipcart and Embeddy?

All SSGs work equally well: Jekyll, Hugo, Gatsby, Next.js, Nuxt.js, Eleventy, and Astro. Since Embeddy uses a standard iframe, it works anywhere HTML is supported. Snipcart's official docs have specific guides for each SSG.

Ready to supercharge your Snipcart store?

Build a free interactive widget — size calculator, product configurator, quiz, or anything you need — and embed it alongside your Snipcart products in minutes.

Create your free widget at embeddy.ai

On this page