fbpixel
spott_white_logo

How to publish as overlay only

The Basics: Getting Started

Written by

Wouter Storme

Wouter Storme

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.

Using Spott ID's

Step 1: Open the embed modal in

Pick the image you want to make interactive on your website, click Publish, and click Publish on website.

spott publish as overlay

A modal will pop open, click Image extension.

spott image extension

Step 2: Copy the embed code on your website

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.

Step 3: Add the images to your website

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.

Using images from Multiple Tenants

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” />

Using your own ID's

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.

spott content embedding

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 Studio.

spott_content_uploading

Step 4

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.

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.

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:

spott parameter explanation

Methods

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()