Articles in this section

See more

[Spott] image overlay

Avatar
Hendrik Daniels
  • Updated

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 on each page, you can control which images to make interactive right from the Spott App. 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 or the image url. 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 Overlay:

 

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, toggle the "External references" toggle to false orchange the value of useExternalRef to false.

Note that this script should only be included once on each page of your website.

Step 3: Add the images to your website

The required fields in your html (so Spott can find your images) are the class="spott-image" and data-spott-id="id" identifiers. Both settings can also be configured in the code of step 2.


Full example: see attachment!

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.

Step 3

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

 

Step 4

When you're in the Studio, open the Publish tab where you can enter your External ID:

 
Screenshot_2022-09-22_at_11.43.09.png

 

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-image" 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.spott.ai/embed/imageExtension.js', {
  externalRefSource: 'YOUR_TENANT_ID',
  className: 'spott-image',
  idAttribute: 'data-spott-id',
  useExternalRef: true,
}));

Full example: see attachment!

 

Using your image urls:

For content managers

Step 1

Locate the image you want to make interactive from your website and copy the image url (right click on the image -> copy image address).

 

Step 2

Create a new project inside our studio with this specific URL or upload the image.

 

Step 3

When you're in the Studio, open the Publish tab where you can enter your image url in the External ID field

 
 
 

Step 4

In the same tab (Publish) go to Overlay

 

 

Full example: see attachment!

 

 

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

Related articles