How to Embed a Widget on OpenCart

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>

• OpenCart admin access. You need administrator privileges to manage modules, layouts, and theme files.
• OpenCart 3.x or 4.x recommended. Older versions (2.x) have a slightly different admin interface but the module concept is similar.

Method 1: HTML Content Module

Easiest — no code required

OpenCart includes a built-in HTML Content module (sometimes called "Custom HTML") that lets you place arbitrary HTML in any layout position. This is the quickest way to embed a widget.

1. 1

   Install or enable the HTML Content module

   In the admin, go to Extensions > Extensions, filter by Modules, find "HTML Content", and click Install (green + button) if not already installed.

2. 2

   Add a new module instance

   Click Edit on the HTML Content module, then click "Add Module". Give it a name like "Embeddy Widget".

3. 3

   Paste embed code in HTML source view

   In the editor, click the "Source" button (or </> icon) to switch to HTML mode. Paste your Embeddy iframe embed code and click Save.

4. 4

   Assign the module to a layout

   Go to Design > Layouts. Edit the layout for your target page (e.g., Home, Product, or Information). Click "Add Module", select your Embeddy module, and choose a position (Content Top, Content Bottom, Column Left, etc.).

5. 5

   Save and verify

   Click Save on the layout. Visit your storefront to confirm the widget appears in the correct position.

Method 2: Edit Theme Templates Directly

Intermediate — requires basic Twig knowledge

OpenCart uses Twig templates (OpenCart 3.x+). You can embed the widget directly in a template file for precise control over placement.

1. 1

   Locate your theme template

   Via FTP or your file manager, navigate to catalog/view/theme/your-theme/template/. Common templates include common/home.twig (homepage), product/product.twig (product page), and information/information.twig (info pages).

2. 2

   Add the embed code

   Open the template file and paste the iframe at your desired location:

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

3. 3

   Clear the template cache

   In the admin, go to Dashboard and click the blue gear icon, then "Refresh" under Theme. Or delete the contents of system/storage/cache/ manually. Visit the storefront to confirm.

Method 3: OCMOD Extension

Advanced — survives theme updates

OCMOD is OpenCart's modification system that patches template files without editing them directly. This is the cleanest approach for production stores because it survives theme and core updates.

1. 1

   Create an OCMOD XML file

   Create a file named embeddy-widget.ocmod.xml:

<?xml version="1.0" encoding="utf-8"?>
<modification>
  <name>Embeddy Widget</name>
  <version>1.0.0</version>
  <author>Embeddy</author>
  <link>https://embeddy.ai</link>

  <file path="catalog/view/theme/*/template/common/home.twig">
    <operation>
      <search><![CDATA[{{ content_bottom }}]]></search>
      <add position="before"><![CDATA[
        <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>
      ]]></add>
    </operation>
  </file>
</modification>

2. 2

   Upload the OCMOD file

   In the admin, go to Extensions > Installer and upload your .ocmod.xml file.

3. 3

   Refresh modifications and cache

   Go to Extensions > Modifications and click the blue Refresh button. Then clear the theme cache from the Dashboard. Visit the storefront to verify.

Embedding on Product Pages

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

• Size calculators — help shoppers find the right fit
• Product configurators — let customers customize options interactively
• Compatibility checkers — verify that accessories work together
• ROI calculators — show value for premium products

To embed on product pages, use Method 1 and assign the module to the Product layout, or edit product/product.twig directly (Method 2). For the OCMOD approach, target the product template file path.

For product-specific widgets, you can use OpenCart's product description field to embed different widget codes per product.

Troubleshooting

Frequently Asked Questions