Add interactive images on your WordPress website
- 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: - 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. - Check out the result on your website!