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.

<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 lo