---
title: Publitas interactive - Magento 2 integration
description: "Go to your Magento 2 admin section and copy and paste the overlay code snippet into the HTML head section of your website. Code snippets and examples can be found here! Basic example: In order to add"
---

[Skip to content](https://support.publitas.com/spott-magento-2-integration#main-content)

English

Show submenu for translations

[Contact Support](https://support.publitas.com/kb-tickets/new?hsLang=en)

![Publitas blue-270](https://support.publitas.com/hs-fs/hubfs/Publitas%20blue-270.png?width=175&height=57&name=Publitas%20blue-270.png)

Open main navigation

Close main navigation

- English
  
  Show submenu for translations
- [Contact Support](https://support.publitas.com/kb-tickets/new)
- [Back to Publitas](https://www.publitas.com/)

[Back to Publitas](https://www.publitas.com/)

 How can we help you?

- There are no suggestions because the search field is empty.

1. [Knowledge Base](https://support.publitas.com/?hsLang=en)
2. [Using Publitas Interactive](https://support.publitas.com/using-publitas-interactive?hsLang=en)
3. [Integrations](https://support.publitas.com/using-publitas-interactive?hsLang=en#integrations)

# Publitas interactive - Magento 2 integration

### Add interactive images on your Magento 2 website

Go to your Magento 2 admin section and copy and paste the overlay code snippet into the HTML head section of your website. Code snippets and examples can be found [here](https://support.spott.ai/hc/en-us/articles/360052464852)!  
Basic example:

  

In order to add custom code to the HTML \<head\> in Magento 2, take the following steps:

1. Navigate to **Admin Panel \> Content \> Configuration**
2. Choose the **store view** you want the head tag to be changed on or select **Global** in order to change it on every store view.
3. Find the **HTML Head** section and add your code snippet **in the Scripts and Style Sheets field**.
4. Once the changes have been performed, don't forget to press the **Save Configuration** button and **flush Magento Cache**.

The above script will scan your entire webpage and will detect all elements with className ‘*spott*’. The script will search for the *data-spott-id* attribute. If this exists, it will make the image interactive with this specific spott id (=project id). The value of *data-spott-id* can be copied and pasted from within the app. Open the corresponding project and copy the last part of the URL from the URL bar of your browser (between the last*/*and the first*?*), for example:

https://app.spott.ai/studio/media/**xxx-xxx-xxx-xxx-xxx**?123456

 

Extend your existing HTML \<img /\> and parent \<div /\> element with the specified attributes:

**style=”spott”data-spott-id=”xxx-xxx-xxx-xxx-xxx”**

You can also use an existing style class and use the image URL as a reference, [read more here](https://support.publitas.com/hc/en-us/articles/360052464852?hsLang=en)!

 

Our script will automatically fill the corresponding container with your interactive elements defined in our studio.

Check out the result on your Magento website!

### Link Product Feed

Read all about product feeds [here](https://support.spott.ai/hc/en-us/articles/360052814911)!

Creating a product feed can be done automatically (export each x interval to have the latest price updates) or manually (single-time export):

1. - Automatic 
           - Magento doesn't have an auto-updating product feed out of the box, so you need to install a 3rd party extension like: 
                   - [https://marketplace.magento.com/firebear-importexport.html](https://marketplace.magento.com/firebear-importexport.html)
                   - [https://marketplace.magento.com/amasty-feed.html](https://marketplace.magento.com/amasty-feed.html)
                   - Other apps that can generate a CSV file of your products  
                     [https://marketplace.magento.com/extensions.html](https://marketplace.magento.com/extensions.html)
     - Manual 
           - [https://docs.magento.com/user-guide/system/data-export.html](https://docs.magento.com/user-guide/system/data-export.html)

Copy the .csv link generated by Magento and paste it inside our app (Integrations \> Product feeds \> Add Feed). [More info, read more here](https://support.spott.ai/hc/en-us/articles/360052814911)!

- [Managing Publications](https://support.publitas.com/managing-publications?hsLang=en#main-content)

    - [Create Content in Publitas](https://support.publitas.com/managing-publications?hsLang=en#create-content-in-publitas)
    - [Managing your publications](https://support.publitas.com/managing-publications?hsLang=en#managing-your-publications)
    - [Editing pages](https://support.publitas.com/managing-publications?hsLang=en#editing-pages)
    - [Updating the Publication URL](https://support.publitas.com/managing-publications?hsLang=en#updating-the-publication-url)
    - [SEO](https://support.publitas.com/managing-publications?hsLang=en#seo)
    - [Troubleshooting](https://support.publitas.com/managing-publications?hsLang=en#troubleshooting)
    - [Create Adaptive content in Publitas](https://support.publitas.com/managing-publications?hsLang=en#create-adaptive-content-in-publitas)
- [Adding Hotspots](https://support.publitas.com/adding-hotspots?hsLang=en#main-content)

    - [Using the hotspot editor](https://support.publitas.com/adding-hotspots?hsLang=en#using-the-hotspot-editor)
    - [Hotspots explained](https://support.publitas.com/adding-hotspots?hsLang=en#hotspots-explained)
    - [Hotspot automation](https://support.publitas.com/adding-hotspots?hsLang=en#hotspot-automation)
- [Customizing the Reader](https://support.publitas.com/customizing-the-reader?hsLang=en#main-content)

    - [Reader settings](https://support.publitas.com/customizing-the-reader?hsLang=en#reader-settings)
    - [Branding](https://support.publitas.com/customizing-the-reader?hsLang=en#branding)
    - [Banners](https://support.publitas.com/customizing-the-reader?hsLang=en#banners)
- [Publishing Publications](https://support.publitas.com/publishing-publications?hsLang=en#main-content)

    - [Sharing](https://support.publitas.com/publishing-publications?hsLang=en#sharing)
    - [Embedding](https://support.publitas.com/publishing-publications?hsLang=en#embedding)
    - [Availability](https://support.publitas.com/publishing-publications?hsLang=en#availability)
    - [Generating reach](https://support.publitas.com/publishing-publications?hsLang=en#generating-reach)
- [E-commerce & Product Feeds](https://support.publitas.com/e-commerce-product-feeds?hsLang=en#main-content)

    - [Importing Product Feeds](https://support.publitas.com/e-commerce-product-feeds?hsLang=en#importing-product-feeds)
    - [Managing product details](https://support.publitas.com/e-commerce-product-feeds?hsLang=en#managing-product-details)
    - [E-commerce Solutions](https://support.publitas.com/e-commerce-product-feeds?hsLang=en#e-commerce-solutions)
- [Dynamic Publications](https://support.publitas.com/dynamic-publications?hsLang=en#main-content)

    - [Creating dynamic content](https://support.publitas.com/dynamic-publications?hsLang=en#creating-dynamic-content)
- [Using Publitas Interactive](https://support.publitas.com/using-publitas-interactive?hsLang=en#main-content)

    - [The basics](https://support.publitas.com/using-publitas-interactive?hsLang=en#the-basics)
    - [Integrations](https://support.publitas.com/using-publitas-interactive?hsLang=en#integrations)
- [Publication Analytics](https://support.publitas.com/publication-analytics?hsLang=en#main-content)

    - [Publication Dashboard](https://support.publitas.com/publication-analytics?hsLang=en#publication-dashboard)
    - [Google Analytics](https://support.publitas.com/publication-analytics?hsLang=en#google-analytics)
    - [Other integrations](https://support.publitas.com/publication-analytics?hsLang=en#other-integrations)
    - [Insights & Recommendations](https://support.publitas.com/publication-analytics?hsLang=en#insights-recommendations)
- [API](https://support.publitas.com/api?hsLang=en#main-content)

    - [Publitas API](https://support.publitas.com/api?hsLang=en#publitas-api)
- [Privacy and Security](https://support.publitas.com/privacy-and-security?hsLang=en#main-content)

    - [Account security](https://support.publitas.com/privacy-and-security?hsLang=en#account-security)
    - [Cookies, privacy, and policies](https://support.publitas.com/privacy-and-security?hsLang=en#cookies-privacy-and-policies)
- [Account](https://support.publitas.com/account?hsLang=en#main-content)

    - [Login and password](https://support.publitas.com/account?hsLang=en#login-and-password)
    - [Managing your account](https://support.publitas.com/account?hsLang=en#managing-your-account)
- [Billing](https://support.publitas.com/billing?hsLang=en#main-content)

    - [Billing Details](https://support.publitas.com/billing?hsLang=en#billing-details)
    - [Subscription](https://support.publitas.com/billing?hsLang=en#subscription)
    - [Data Traffic](https://support.publitas.com/billing?hsLang=en#data-traffic)
- [Partners and Integrations](https://support.publitas.com/partners-and-integrations?hsLang=en)
- [Learning Center](https://support.publitas.com/learning-center?hsLang=en#main-content)

    - [Tutorials](https://support.publitas.com/learning-center?hsLang=en#tutorials)
- [Trust & Safety](https://support.publitas.com/trust-safety?hsLang=en)

[![Publitas blue-270](https://support.publitas.com/hs-fs/hubfs/Publitas%20blue-270.png?width=100&height=32&name=Publitas%20blue-270.png "Publitas blue-270")](http://publitas.com)

Copyright © 2025, Publitas B.V.