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/xxx-xxx-xxx-xxx?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 result on your website!