Publishing a SmartFrame on your website or blog is easy.

All you need to do is copy and paste some code, which we call embed code, into your website’s HTML/text editor, wherever you want your SmartFrames to appear.

To find out whether your website is compatible with SmartFrame, please check the compatibility chart.

Where do I find this embed code?

  1. Locate your image in the Images panel
  2. Click on the three dots in the bottom right-hand corner (if you’re using the List View option, these dots will appear on the far right of each image)
  3. Click on Copy embed code. This code will now be saved to your clipboard, ready for you to paste into your website’s HTML/text editor

You can also grab this same code from within a SmartFrame. Just click on the Share button (assuming the owner of the SmartFrame has this enabled) and select the </> icon. Now just click on Copy Code. If you like, you can make changes to the size of the embedded SmartFrame before you copy this code.

Where do I embed my SmartFrame on my website?

  1. Head to your website’s editor. You should be able to edit your website with visual and text/HTML editor. Switch to the text/HTML editor
  2. Paste your code where you would like your SmartFrame to appear

Preview and 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 appears incorrectly, please refer to the troubleshooting guide below.

Problem Resolution
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. 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.

Taking things further

How do I change the Theme and appearance of a SmartFrame?

  1. Locate your image in the Images panel
  2. Click on the three dots in the bottom right-hand corner (if you’re using the List View option, these dots will appear on the far right of each image)
  3. Click on View embed code. Here, you’ll be able to define the Theme used by this SmartFrame and set a preferred width (expressed as a percentage)

Is there an easy way to embed multiple SmartFrames at once?

If you need to embed many SmartFrames at once, we recommend you use our WordPress Image Security and Compression plugin or consider a SmartFrame Web Component integration.