Overview

You will need to install a SmartFrame Web Component in your webpage code in order to display images from the SmartFrame Cloud on your webpages.

The SmartFrame Web Component <smart-frame> can be used and styled like any other HTML tag.

Installation

In order to install SmartFrame Web Component into your website, add the viewer code snippet into the <head> section of your website.

The script is unique for each account. You can find this in the Admin Panel under Account settings > Integration.

The script will appear like this:

<script type="text/javascript" src="https://static.smartframe.io/sf/9c9ffb7a0ed0cd60846bffcf2bbb7458/smartframe.js"></script>

This script registers the new custom <smart-frame> Web Component. At this point, <smart-frame> is ready to be used on the web page.

The SmartFrame Web Component is compatible with all evergreen browsers. If any of the browser features are missing, an appropriate polyfill will be automatically loaded. For further details, please refer to the browser compatibility page.

Usage

Insert the <smart-frame> tag wherever you would like your images to appear. The value [image_id] needs to be replaced with your image ID (case-sensitive).

<smart-frame image-id="[image_id]"></smart-frame>

The appearance of SmartFrames can be controlled through the use of a number of attributes, for example:

<smart-frame image-id="[image_id]" theme="myzoom" disable-hidpi></smart-frame>

SmartFrame emits standard Javascript DOM events:

<smart-frame image-id="[image_id]"></smart-frame>
<script>
  let sf = document.queryElement('smart-frame');
  sf.addEventListener('load', (e) => { console.log('SmartFrame loaded') });
</script>

SmartFrames can be styled using standard CSS:

<style>
  smart-frame.my-image { 
    max-width: 300px;
  }
</style>
 
<smart-frame class="my-image" image-id="[image_id]"></smart-frame>

SmartFrames can also be dynamically added into the DOM:

<script>
  let sf = document.createElement('smart-frame');
  sf.setAttribute('image-id', '[image_id]');
  document.body.appendChild(sf);
</script>
Unlike the img tag, smart-frame requires a closing tag

Attribute reference

You can control the appearance and behavior of your SmartFrames by inserting attributes into the shortcode, using the following syntax:

<smart-frame image-id="[image_id]" [attribute1] [attribute2]="[optionalvalue]"></smart-frame>

 

Key Value Description
image-id
(required)
string Unique case-sensitive ID of the image.

If you added the image using SmartFrame API, it’s the same ID as provided in the API request.

If you use the Image Source Connector, it’s the ID we agreed to use.

If you uploaded the image using the SmartFrame Admin Panel, you can find the ID in the Admin Panel. Click on the image in the Images panel before selecting Image Details.

thumbnail-mode (optional) If this option is present, SmartFrame operates in a thumbnail mode. In this mode:

  • Deterrent message in enabled (Embed button is not displayed)
  • Out-of-focus protection is enabled
  • The rest of the overlay features are disabled
  • Tracking is disabled
  • The maximum size of the image is limited to 1280px
theme (optional) string Identifier of the Theme to use. You can find it on the Overview page within each Theme in the Admin Panel.
disable-hidpi (optional) When used, SmartFrame will ignore the physical resolution of the display used to view the SmartFrame when choosing the image size file to download, and will instead rely only on logical resolution.