The image extension is a Javascript library that dynamically overlays existing images with asset markers on your website. This is perfect for dynamic content on your website, 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.

For content managers

Step 1

Locate the image you want to make interactive from your website. Download it to your computer.

Step 2

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.

Step 3

Upload an image to Spott by dragging it onto the media page. After the upload is finished, click on it to go to the tagger.

Step 4

When you're in the tagger, 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.

Step 5

Click Save when you are done, the image should be made interactive on your website.

For developers

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.

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 || {};
  var el=p.createElement('script');el.async=1;el.src=o;
}(window,document,'//', {
  externalRefSource: 'system',
  className: 'spott',
  idAttribute: 'data-spott-id',
  smartStyles: true,
  useExternalRef: false,
  circleColor: 'white',
  customCircleClass: 'marker__circle'

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:

  • initSpottsOverlays() checks all targeted DOM elements and overlays those that have not been initialized yet. This method is automatically called the first time the script gets loaded.
  • initSpottOverlay(element)  manually initialises a single element only. The parameter is a DOM element, e.g. acquired by calling document.querySelector() 
Did this answer your question?