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 into your website, add the viewer code snippet in the section of your page code, just before the closing tag.

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.

<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 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, all of SmartFrame’s UI, together with watermarks and tracking, are hidden and disabled. The maximum size of the image is limited to 800px.
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