Written by
The image extension is a Javascript library that dynamically overlays existing images with Spott interactivity on your website. This is perfect for dynamic content, like posts coming from WordPress or a feed of Instagram photos.
After your web developers have inserted a script on your webpage(s) once, you can control which images to make interactive right from the Spott CMS. Images are linked between your website and Spott through an id, which can be either the standard spott id or an identifier that’s already on your website. This allows you to make most of the images on your website interactive without any additional development work.
Pick the image you want to make interactive on your website, click Publish, and click Publish on website.
A modal will pop open, click Image extension.
Copy and paste the code on the right to the head of your website. If you are planning to use Spott ID’s, change the value of useExternalRef to false .
Note that this only needs to happen once on a webpage.
In the embed modal, you will find an example of what the code should look like under “Your HTML example“.
The required fields so Spott can find your image, are the class="spott" and data-spott-id="id" identifiers. Both settings can also be configured in the code of step 2.
By adding data-external-ref-source="tenantID" to your images, the image overlay will automatically pick the correct tenant above the one set in your embed code. This allows you to create the following examples:
<img src=“xx” data-spott-source=“tenant_x_source” data-spott-id=“image_id_1” />
<img src=“xx” data-spott-source=“tenant_y_source” data-spott-id=“image_id_1” />
Locate the image you want to make interactive from your website. Download it to your computer.
Identify the external id you want to use for this image. Right-click your image and click “Inspect”. Now, look for the attribute your developer configured as being the “idAttribute”. This is the value you will need.
Upload an image to Spott by dragging it onto the media page. After the upload is finished, click on it to go to the Studio.
When you’re in the Studio, click on the dropdown menu at the top and click Edit.
A new modal will pop up. Here you can paste the id that you copied in step 2.
Click Save when you are done, the image should be made interactive on your website.
The library targets any HTML element that has a certain class and unique identifier. The identifier can be the regular spott id or a custom id chosen by you.
Prepare every image on your website that you might want to tag with a class="spott" and a data-spott-id="uniqueID". Both identifiers can be adjusted in the code shown below.
Please copy-paste the following code right before closing the </head> tag on the webpage(s) where you want to dynamically add asset markers.
(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-cdn.spott.ai/embed/imageExtension.js', {
externalRefSource: 'system',
className: 'spott',
idAttribute: 'data-spott-id',
smartStyles: true,
useExternalRef: false,
})); As you can see, there are several parameters that can be changed to fit your needs. Some of these fields need to be configured mandatorily. This is what they signify:
The script also exposes two global functions:
