[SPOTT] 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!
   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 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
   
   

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!