WordPress Integration

Add interactive images on your WordPress website

  1. Go to your WordPress account (wp-admin section) and copy paste the overlay code snippet into the HTML head-section of your website. Code snippets and examples can be found here!
    Basic example:
    (function ImageExtension(s,p,o,t,T){
    s.spottOptions = t || {};
    var el=p.createElement('script');el.async=1;el.src=o;
    }(window,document,'https://static.spott.ai/embed/imageExtension.js', {
    className: 'spott',
    idAttribute: 'data-spott-id'

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


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

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

  3. Check out the result on your website!
Was this article helpful?
0 out of 0 found this helpful



Please sign in to leave a comment.