How to Embed a Widget on PrestaShop

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>

• PrestaShop back office access. You need administrator access to your PrestaShop back office (admin panel) to install modules and edit theme files.
• PrestaShop 1.7+ or 8.x recommended. Older versions (1.6 and below) have a different module and hook system; the core concepts still apply but file paths differ.

Method 1: Custom HTML Module

Easiest — no code required

PrestaShop includes a built-in Custom HTML (or "Custom text block") module that lets you place arbitrary HTML in any hook position on your store. This is the fastest way to embed a widget without writing any code.

1. 1

   Install or enable the Custom HTML module

   In your back office, go to Modules > Module Manager and search for "Custom text block" or "ps_customtext". If it is not installed, click Install. If already installed, click Configure.

2. 2

   Add your embed code

   In the module configuration, you will see a rich text editor. Switch to the Source Code or HTML view (click the "</>" icon) and paste your Embeddy iframe embed code.

3. 3

   Choose a hook position

   Go to Design > Positions to transplant the module to your desired hook. Common hooks include displayHome (homepage), displayFooterBefore, or displayProductAdditionalInfo (product pages).

4. 4

   Save and verify

   Click Save, then visit your storefront to confirm the widget appears in the correct position.

Method 2: Edit Theme Templates Directly

Intermediate — requires basic Smarty knowledge

PrestaShop themes use Smarty template files (.tpl). You can embed the widget directly in a template file for full control over placement. This works on all PrestaShop versions.

1. 1

   Locate your theme directory

   Connect via FTP or your hosting file manager. Navigate to themes/your-theme-name/templates/. The default PrestaShop 1.7+ theme is called classic.

2. 2

   Open the target template

   Common template files include index.tpl (homepage), catalog/product.tpl (product pages), and cms/page.tpl (CMS pages).

3. 3

   Paste the embed code

   Add the iframe at the desired position in the template. Wrap it in a container div for styling:

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

   Clear the cache and verify

   In the back office, go to Advanced Parameters > Performance and click "Clear cache". Then visit your storefront to confirm the widget renders correctly.

Method 3: Create a Custom Module

Advanced — survives theme updates

For the most maintainable approach, create a lightweight PrestaShop module that hooks into any display position. This method survives theme updates and can be configured from the back office.

1. 1

   Create the module directory

   On your server, create a folder at modules/embeddywidget/.

2. 2

   Create the main module file

   Create modules/embeddywidget/embeddywidget.php with the following code:

<?php
if (!defined('_PS_VERSION_')) { exit; }

class EmbeddyWidget extends Module
{
    public function __construct()
    {
        $this->name = 'embeddywidget';
        $this->tab = 'front_office_features';
        $this->version = '1.0.0';
        $this->author = 'Embeddy';
        $this->need_instance = 0;
        parent::__construct();
        $this->displayName = $this->l('Embeddy Widget');
        $this->description = $this->l('Embed interactive widgets from embeddy.ai');
    }

    public function install()
    {
        return parent::install()
            && $this->registerHook('displayHome')
            && $this->registerHook('displayProductAdditionalInfo');
    }

    public function hookDisplayHome($params)
    {
        return '<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>';
    }

    public function hookDisplayProductAdditionalInfo($params)
    {
        return $this->hookDisplayHome($params);
    }
}

3. 3

   Install the module

   In the back office, go to Modules > Module Manager, find "Embeddy Widget" in the list, and click Install.

4. 4

   Reposition via hooks

   Go to Design > Positions to transplant the module to any hook position you need (e.g., displayFooterBefore, displayLeftColumn).

Embedding on Product Pages

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

• Size guides — help shoppers find the right fit before purchasing
• Compatibility checkers — verify that accessories or parts work together
• Product configurators — let customers customize options before adding to cart
• ROI calculators — demonstrate value for high-ticket items

To embed on product pages, use the displayProductAdditionalInfo hook (Method 1 or 3) or edit the catalog/product.tpl template directly (Method 2).

For product-specific widgets, you can extend the custom module to read the product ID and display different widget configurations per product using PrestaShop's product custom fields.

Troubleshooting

Frequently Asked Questions