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

Create a new spott in the Spott CMS. Upload the image you want to use and give it a fitting title.

Step 4

After you've clicked "Create", the detail page of this spott is opened. Paste the external id you copied in step 2 here. Also make sure that the spott is published. Click "Save".

Step 5

After you save, the image should be rendered interactively 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?