Prerequisite:
In order for SmartFrame, Insights, Ads, and other features to work correctly you need to allow the resources from the SmartFrame related domains to be accessible by your website. Please ask your website administrator for the following domains to be unblocked:
- sf-ads.io
- sf-insights.io
- sf-logs.io
- static.smartframe.io
There are various ways in which you can publish a SmartFrame on your website.
The main way in which SmartFrames are added to websites is through the copying and pasting of an embed code.
This is a piece of code generated by SmartFrame that needs to be uploaded to the HTML or text editor within your website’s CMS system.
Please visit the Obtaining an embed code page to learn how to obtain an embed code.
How to embed a SmartFrame on your website
If you need to embed many SmartFrames at once, we recommend you consider a SmartFrame Web Component integration. Please contact us for further details.
HTML website
Once you have copied your embed code using one of the two methods above, simply paste it into your site, wherever you want the SmartFrame to appear.
Content-managed site
Embedding SmartFrames is possible with a wide range of content management systems (CMS). Please visit the Supported platforms page to view the full list.
You can also view our step-by-step guides for Blogger, Squarespace, Weebly and WordPress.
- Head to your website’s editor and switch to the text/HTML editor
- Paste the embed code where you would like your SmartFrame to appear
Most other popular CMS have an HTML/custom HTML/embed block that should be used to place the SmartFrame image. Please refer to your CMS documentation.
The main prerequisite for a CMS to be compatible with SmartFrame embedded images is that it needs to allow for adding active scripts (JavaScript). It may happen that the particular CMS has the capability for adding active scripts but, due to its configuration, it doesn’t allow it. In this case, please contact your system administrator and ask to make a change in configuration and to whitelist SmartFrame embeds.
Please visit the SmartFrame embed code structure page to learn more about the embed code structure.
Troubleshooting
Once you have pasted your embed code into your website’s editor, make sure to visit your (public-facing) web page to ensure that your SmartFrame is displayed correctly.
If it has not appeared, or if it appears incorrectly, please refer to the troubleshooting guide below.
| Problem | Solution |
|---|---|
| Instead of a SmartFrame, I can see code starting with <script> | Make sure you paste the SmartFrame embed code into the code window of your website editor, rather than the visual editor. This is usually marked ‘HTML’, ‘Source’ or ‘Text’.
If it still doesn’t work, it’s likely that your website’s platform has blocked the embed code. We suggest contacting the company that provides your website service or referring to its help/support section. |
| Pasting the embed code doesn’t do anything | As above |
| I can see a JPEG instead of a SmartFrame | Your website or browser may not allow rich media like SmartFrame. |
| SmartFrame is misaligned or obstructed | You may need to adjust your CSS styles to ensure correct positioning. If you are unsure how to do this, please contact us for support. |