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

Another advantage of the Embed widget is ability 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.

While the Embed widget itself can be easily installed on any website, the content owner will need to have a SmartFrame account with an active Business plan, 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 that 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) Image ID
    [Width], // (optional) Original image width
    [Height], // (optional) Original image height
    '100%', // (ptional) 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>

You can find a demo here just click on the Click here to embed button.