When you are done tagging your image, you are now ready to share it on your website.

In this article, you will learn:

  • how to embed your image step by step
  • whether to use Javascript or iframes
  • advanced customizations

Do you prefer not to use embed codes? With our image extension script, you can use existing images on Spott directly from your web page.

Generating an embed code video step by step

This step by step guide assumes that you have already uploaded an image and tagged it in Spott.

Step 1

Start by opening the image in Spott that you want to embed on your web page.
You can navigate to it by going to Images (under Content) and clicking on the image you want to embed.

Step 2

Make sure your image is set to Published.
You can change this on the details page in the top right corner as shown here:

Afterward, click Save to confirm your changes.

Step 3

Continue to the Share page and click the Generate embed code button.

Step 4

A new window will pop up where you can customize the way your interactive image will be displayed.
At the bottom of the window, you will find the embeddable code.

Step 5

When you are done customizing, click the 'Copy code' button to copy it to your clipboard. You can now paste it on your HTML page or send it to your developer.

Should I embed using Javascript or Iframes?

There are two ways to embed images: with javascript or with iframes.
Javascript is the preferred method
because it actually puts the image with its asset on your page. This is not the case when using iframes. This means that Javascript:

  • Is better for SEO
  • The image looks better on small screens
  • There are more options available to customize the image to your needs and style

Advanced customizations

If you want to customize your image after your embed code is generated, you can do so by changing it in the code. Some of the most common customizations are explained here:

  • You can hide the "Powered by Spott" logo underneath the image by setting data-show-copyright  to false . Before doing so, please make sure your contract allows this.
  • Set data-hide-circles  to true  to only show assets when a user hovers the image.
  • data-original-dimensions="true"  means that the image will not get larger than its original dimensions, this ensures there's no loss of quality. 
  • You can supply a custom CSS class for the asset circles with the data-custom-circle-class  property. This lets you change all aspects of the circle style.
  • If you only want to change the color, use data-circle-color . All CSS colors are valid, for example:  red,  blue, #f00,  #fefefe,  rgba(0, 0, 0, .5) .
  • data-reveal-type  can be set to static , flash  or bubbles :
    - static  means that the asset circles are always shown.
    - flash  and bubbles feature an animation starting at the moment when the user first sees the circles on his screen. This has a positive effect on conversion rates.

An embed code using Javascript with default values will look something like this:

<script> (function(s,p,o,t,T){ T=p.getElementsByTagName('head')[0]; t=p.createElement('script');t.async=1;t.src=o; T.appendChild(t); })(window,document,'https://discover.spott.ai/react-player/js/embed.js'); </script><div class="spott-embed" data-custom-circle-class="" data-hide-circles="false" data-original-dimensions="true" data-reveal-type="static" data-show-copyright="true" data-show-image-source="false" data-spott-id="438b98ee-93dd-4678-926d-01c9f541d241"></div>

If you use iframes to embed images, it might look like this:

<iframe width="450" height="342" frameborder="0" src="https://discover.spott.ai/embed/spott?spottId=4d15007e-eff3-41e9-823d-3e8e5be4e71&amp;hideCircles=false&amp;width=450&amp;height=342&amp;circleColor=%23FFFFFF&amp;language=en&amp;showImageSource=false" scrolling="no" sandbox="allow-scripts allow-forms allow-same-origin allow-presentation"></iframe>

Did this answer your question?