How to Embed a Widget on Volusion

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>

• Volusion admin access. You need store owner or admin access to edit pages, articles, and site settings.
• Volusion V1 or V2 store. Both versions support HTML editing. V2 uses a site builder with drag-and-drop blocks that support custom HTML.

Method 1: Page or Article Editor

Easiest — works on V1 and V2

Volusion lets you add custom HTML to pages and articles through the built-in content editor. This is the fastest way to embed a widget on a specific page.

Volusion V1:

1. 1

   Open the article editor

   In the admin, go to Content > Articles. Create a new article or edit an existing one.

2. 2

   Switch to HTML mode

   In the WYSIWYG editor, click the "HTML" or "Source" button to switch to raw HTML editing.

3. 3

   Paste your embed code and save

   Paste the Embeddy iframe embed code, click Save, and visit the page to verify.

Volusion V2 (Site Builder):

1. 1

   Open the Site Builder

   In the admin, click "Edit Site" to open the visual site builder. Navigate to the page where you want the widget.

2. 2

   Add a Custom HTML block

   Click "Add Block" and select "Custom HTML" (or "Code"). Paste your Embeddy iframe embed code.

3. 3

   Save and publish

   Click Save and then Publish to push changes live.

Method 2: Page-Specific CSS/HTML Code (V1)

Intermediate — V1 only

Volusion V1 allows you to add page-specific HTML and CSS through the admin panel. This method lets you inject custom code on individual pages without editing global templates.

1. 1

   Navigate to the page settings

   In the admin, find the page (product, category, or content page) you want to edit. Open its settings or SEO section.

2. 2

   Find the custom HTML/CSS field

   Look for a field labeled "Page-Specific CSS/HTML", "Custom HTML Bottom", or similar. This field allows raw HTML.

3. 3

   Paste your embed code

   Add the Embeddy iframe embed code wrapped in a div container:

<!-- 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 verify

   Click Save. Visit the specific page to confirm the widget appears.

Method 3: Global Header/Footer Scripts

Advanced — appears site-wide

Both V1 and V2 allow you to add custom HTML/JavaScript to the global header or footer, which loads on every page. Combined with JavaScript to check the current URL, this method enables conditional widget display.

1. 1

   Open the global script settings

   V1: Go to Design > File Editor and edit your template, or use Settings > SEO > Custom Scripts. V2: Go to Settings > Advanced > Custom Header/Footer Code.

2. 2

   Add the conditional embed code

   Paste the following into the footer section to show the widget on the homepage and product pages:

<!-- Embeddy Widget (conditional) -->
<div id="embeddy-widget" style="max-width: 800px; margin: 2rem auto; display: none;">
  <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>
<script>
  var path = window.location.pathname;
  if (path === '/' || path.indexOf('/product') > -1) {
    document.getElementById('embeddy-widget').style.display = 'block';
  }
</script>

3. 3

   Save and verify

   Save the changes and visit different pages on your store to confirm the widget appears only where intended.

Embedding on Product Pages

Product pages are ideal for Embeddy widgets. Common use cases include:

• Size calculators — help shoppers find the right fit
• Product configurators — let customers pick options visually
• Compatibility checkers — ensure accessories work together
• ROI calculators — demonstrate value for premium products

On V1, use the product's description field (switch to HTML mode) or the page-specific HTML field (Method 2). On V2, edit the product page in the Site Builder and add a Custom HTML block.

For per-product widgets, embed different widget codes in each product's description. For store-wide product widgets, use Method 3 with a URL check for product pages.

Troubleshooting

Frequently Asked Questions