Embed widget | Help Center

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 the following code snippet, which provides a JS function for generating the SmartFrame embed code. It doesn’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.

<!-- Embed code generator is included as ES6 module here -->
<script src="https://static.smartframe.io/ecg/embed-code-generator.mjs" type="module"></script>

<!-- alternatively, https://static.smartframe.io/ecg/embed-code-generator.js can be used,
which simply adds sfGenerateEmbedCode() function to the global JS scope -->

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