Articles in this section

[SPOTT] Magento 2 integration

Avatar
Hendrik Daniels

Add interactive images on your Magento 2 website

Go to your Magento 2 admin section and copy paste the overlay code snippet into the HTML head-section of your website. Code snippets and examples can be found here!
Basic example:

<script>
  (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', {
   className: 'spott',
   idAttribute: 'data-spott-id'
  }));
</script>
 

In order to add custom code to the HTML <head> in the Magento 2 take the following steps:

  1. Navigate to Admin Panel > Content > Configuration


  2. Choose the store view you want the head tag to be changed on or select Global in order to change it on every store view.

  3. Find the HTML Head section and add your code snippet in the Scripts and Style Sheets field.

  4. Once the changes have been performed don't forget to press the Save Configuration button and flush Magento Cache.

The above script will scan your entire webpage and will detect all elements with className ‘spott’. The script will search for the data-spott-id attribute. If this exists, it will make the image interactive with this specific spott id (=project id). The value of data-spott-id can be copy pasted from within the app. Open the corresponding project and copy the last part of the url from the url bar of your browser (between the last/and the first?), for example:

https://app.spott.ai/studio/media/xxx-xxx-xxx-xxx-xxx?123456

 

Extend your existing HTML <img /> and parent <div /> element with the specified attributes:

<div style=”spott”>
   <img src=”xxx.jpg” data-spott-id=”xxx-xxx-xxx-xxx-xxx” />
</div>

You can also use an existing style class and use the image url as reference, read more here!

 

Our script will automatically fill the corresponding container with your interactive elements defined in our studio.

Check out the result on your Magento website!

 

Link Product Feed

Read all about products feed here!

Creating a product feed can be done automatically (export each x interval to have latest price updates) or manually (single time export):

Copy the csv link generated by Magento and paste it inside our app (Integrations > Product feeds > Add Feed). More info, read more here!

Related articles