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


    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:

    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=”957ee099-5bcd-4e00-babf-54a2156d267b />
    </div>

    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

Comments

0 comments

Please sign in to leave a comment.