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: Open the tagger

Start by opening the image you want to embed on your website by clicking on it.

Step 2: Open the share modal

Click to the Share button in the top right corner and click the Embed.

Step 3: Embed window settings

A new window will pop up where you can customize the way your interactive image will be displayed.

  1. On the left side you can find all the settings you can change on your embed.
  2. On the right side you can see a live preview when you tweak the settings.
  3. At the bottom of the right side, you will find the embeddable code that you can copy.

Step 4: Copy and paste the embed code

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 itself. 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 with Spott 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://static-cdn.spott.ai/embed/embed.js'); </script>

<div class="spott-embed" data-spott-id="46652587-aab1-464d-bf0c-d724cb4ba987" data-hide-circles="false" data-circle-color="#ffffff" data-custom-circle-class="" data-reveal-type="static" data-language="en"></div>

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

<iframe width='560' height='335' src='https://static-cdn.spott.ai/embed/?spottId=46652587-aab1-464d-bf0c-d724cb4ba987&hideCircles=false&circleColor=%23ffffff&language=en' frameborder='0' allowfullscreen scrolling='no'></iframe>
Did this answer your question?