SmartFrame’s Embed widget is a turnkey solution that’s designed to easily distribute content to third-party sites and obtain advanced analytics and tracking data.

The Embed widget can also be used to generate revenue for content owners. This works on the principle of in-image advertising. The content owner simply needs to allow their images to be embedded on third-party sites in order to start taking advantage of this.

While the Embed widget itself can be easily installed on any website, the content owner will need to have a SmartFrame account and be happy to supply SmartFrame with access details to their image repository. They will then be furnished with the SmartFrame Image Source Connector, which is necessary for the Embed widget to function.

To integrate the Embed widget on your website, you will need to implement one of the following code snippets, which provide JS functions for generating the SmartFrame embed code. The snippets don’t contain any UI elements such as buttons or dialog windows; these need to be implemented by the website maintainer in addition to the provided code snippet.

Synchronous functions

The generateEmbedCode and sfGenerateEmbedCode synchronous functions are returning a SmartFrame embed code for a given Image ID.

ES6 Module

<script src="https://static.smartframe.io/ecg/embed-code-generator.mjs" type="module"></script>
<script type="module">
  import {generateEmbedCode} from 'https://static.smartframe.io/ecg/embed-code-generator.mjs';
  let embedCodeContainer = document.querySelector('#embedCode');
  embedCodeContainer.innerHTML = generateEmbedCode(
    [PublicId], // (required) SmartFrame Public ID
    [ImageId], // (required) Single Image ID or list of Image IDs separated by commas
    [Width], // (optional) Original image width
    [Height], // (optional) Original image height
    '100%', // (optional) Desired embed width, 100% will suit most cases, otherwise a number (not string) can be provided
    true, // (optional) Whether to allow upscaling beyond original image size
    'presentation', // (optional) Theme name
    {usage: "commercial"} // (optional) Custom data, valid, one dimensional key/value JSON
  );
</script>

Global JS scope

<script src="https://static.smartframe.io/ecg/embed-code-generator.js"></script>
<script>
  let embedCodeContainer = document.querySelector('#embedCode');
  embedCodeContainer.innerHTML = window.sfGenerateEmbedCode(
    [PublicId], // (required) SmartFrame Public ID
    [ImageId], // (required) Single Image ID or list of Image IDs separated by commas
    [Width], // (optional) Original image width
    [Height], // (optional) Original image height
    '100%', // (optional) Desired embed width, 100% will suit most cases, otherwise a number (not string) can be provided
    true, // (optional) Whether to allow upscaling beyond original image size
    'presentation', // (optional) Theme name
    {usage: "commercial"} // (optional) Custom data, valid, one dimensional key/value JSON
  );
</script>

Asynchronous functions

The prefetchEmbedCode and sfPrefetchEmbedCode asynchronous functions are returning generateEmbedCode/sfGenerateEmbedCode result in case the image is valid or false otherwise.

ES6 Module

<script type="module">
  import { prefetchEmbedCode } from 'https://static.smartframe.io/ecg/embed-code-generator.mjs';
  let embedCodeContainer = document.querySelector('#embedCode');
  ( async ()=>{
      embedCodeContainer.innerHTML = await prefetchEmbedCode(
          [PublicId], // (required) SmartFrame Public ID
          [ImageId], // (required) Single Image ID or list of Image IDs separated by commas
          [Width], // (optional) Original image width
          [Height], // (optional) Original image height
          '100%', // (optional) Desired embed width, 100% will suit most cases, otherwise a number (not string) can be provided
          true, // (optional) Whether to allow upscaling beyond original image size
          'presentation', // (optional) Theme name
          {usage: "commercial"} // (optional) Custom data, valid, one dimensional key/value JSON
      );
  })();
</script>

Global JS scope

<script src="https://static.smartframe.io/ecg/embed-code-generator.js"></script>
<script>
  let embedCodeContainer = document.querySelector('#embedCode');
  ( async ()=>{
      embedCodeContainer.innerHTML = await window.sfPrefetchEmbedCode(
          [PublicId], // (required) SmartFrame Public ID
          [ImageId], // (required) Single Image ID or list of Image IDs separated by commas
          [Width], // (optional) Original image width
          [Height], // (optional) Original image height
          '100%', // (optional) Desired embed width, 100% will suit most cases, otherwise a number (not string) can be provided
          true, // (optional) Whether to allow upscaling beyond original image size
          'presentation', // (optional) Theme name
          {usage: "commercial"} // (optional) Custom data, valid, one dimensional key/value JSON
      );
  })();
</script>