---
title: Publitas interactive - WordPress Integration
description: This can be easily done with WordPress templates or with free plugins like https://wpcode.com/ . The above script will scan your entire webpage and will detect all elements with className ‘spott.’ The
---

[Skip to content](https://support.publitas.com/spott-wordpress-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 - WordPress Integration

### Add interactive images on your WordPress website

1. Go to your WordPress account (wp-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.publitas.com/hc/en-us/articles/360052464852?hsLang=en)!  
   Basic example:
   
   ```
   <script>(function ImageExtension(s,p,o,t,T){s.spottOptions = t || {};T=p.getElementsByTagName('head')[0];var el=p.createElement('script');el.async=1;el.src=o;T.appendChild(el);}(window,document,'https://static.spott.ai/embed/imageExtension.js', {className: 'spott',idAttribute: 'data-spott-id'}));</script>
   ```
   
   This can be easily done with WordPress templates or with free plugins like [https://wpcode.com/](https://wpcode.com/).
   
   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:
   
   [**xxx-xxx-xxx-xxx**](https://app.spott.ai/studio/media/957ee099-5bcd-4e00-babf-54a2156d267b?123456)
2. Extend your existing HTML \<img /\> and parent \<div /\> element with the specified attributes:
   
   ```
   <div style=”spott”>   <img src=”xxx.jpg” data-spott-id=”xxx-xxx-xxx-xxx” /></div>
   ```
   
   Our script will automatically fill the corresponding container with your interactive elements defined in our studio.
3. Check out the results on your website!

 \<div **style=”spott”**\> \<img src=”xxx.jpg” **data-spott-id=”xxx-xxx-xxx-xxx”** /\>\</div\>

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