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 or change the value of use ExternalRef 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.
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:
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:
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.
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
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 initializes a single element only. The parameter is a DOM element, e.g. acquired by calling a document.querySelector()