How to Embed a Widget on Magento / Adobe Commerce

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>

• Magento admin access. You need administrator privileges to create widgets, static blocks, and manage content.
• Magento 2.x or Adobe Commerce. This guide targets Magento 2. For Magento 1 (legacy), the admin paths differ but the CMS block concept is similar.

Method 1: CMS Static Block

Easiest — use the admin panel

CMS static blocks are reusable HTML content snippets that can be placed on any CMS page or referenced from layout XML. This is the quickest way to embed a widget without touching code files.

1. 1

   Create a new static block

   In the Magento admin, go to Content > Blocks and click "Add New Block". Give it a title like "Embeddy Widget" and an identifier like embeddy_widget.

2. 2

   Switch to HTML source and paste embed code

   In the content editor, click "Show / Hide Editor" or the HTML source button to switch to raw HTML mode. Paste your Embeddy iframe embed code:

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

3. 3

   Save and reference the block

   Click Save Block. To display it on a CMS page, edit that page under Content > Pages and insert the block using the directive: {{block id="embeddy_widget"}}

4. 4

   Flush cache and verify

   Go to System > Cache Management, flush the cache, and visit your storefront to verify the widget appears.

Method 2: CMS Widget Instance

Intermediate — visual placement control

Magento's widget system lets you insert content blocks into specific layout positions across your store — without editing template files. You can target specific pages, categories, or product types.

1. 1

   Create a new widget

   Go to Content > Widgets and click "Add Widget". Select "CMS Static Block" as the widget type and choose your design theme.

2. 2

   Configure layout updates

   Under Layout Updates, click "Add Layout Update". Choose where the widget should appear: "All Pages", "Specified Page", "Anchor Categories", etc. Select a Container like Main Content Area or After Main Content.

3. 3

   Select the static block

   Under Widget Options, select the static block you created in Method 1 (e.g., "Embeddy Widget").

4. 4

   Save, flush cache, and verify

   Click Save, flush the Magento cache, and visit the targeted page to confirm the widget appears.

Method 3: Layout XML and Template Override

Advanced — full developer control

For maximum control, you can add the widget via Magento's layout XML system and a custom PHTML template. This approach is ideal for developers who want the embed integrated into the theme at a specific position.

1. 1

   Create a custom PHTML template

   In your theme directory, create a file at app/design/frontend/YourVendor/yourtheme/Magento_Cms/templates/embeddy-widget.phtml:

<?php /** Embeddy Widget Template */ ?>
<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>

2. 2

   Add layout XML to reference the template

   Add a layout update in your theme's default.xml or a page-specific layout file (e.g., catalog_product_view.xml):

<referenceContainer name="content">
    <block class="Magento\Framework\View\Element\Template"
           name="embeddy.widget"
           template="Magento_Cms::embeddy-widget.phtml"
           after="-" />
</referenceContainer>

3. 3

   Deploy and flush cache

   Run bin/magento setup:upgrade and bin/magento cache:flush from the command line. In production mode, also run bin/magento setup:static-content:deploy.

Embedding on Product Pages

Product pages are one of the best places for interactive Embeddy widgets. Common use cases:

• Size calculators — help shoppers find the right size before purchasing
• Product configurators — let customers customize options interactively
• Compatibility checkers — verify parts or accessories work together
• ROI calculators — demonstrate savings for high-value items

Use Method 2 (CMS Widget) with the layout update set to "Catalog Product View" or Method 3 with the catalog_product_view.xml layout file to target product pages specifically.

For per-product widgets, you can create a custom product attribute to store the widget ID and reference it dynamically in your PHTML template.

Troubleshooting

Frequently Asked Questions