You can find a link to this page on the Image Details page within the Admin Panel, and this can be copied and shared with others.

You can also copy this link or send it by email by clicking on the Share button within a SmartFrame image.

Please note that the Share button may not be visible if the SmartFrame image is very small or if it has been disabled by the user.

The post Sharing SmartFrame images without a website appeared first on SmartFrame.

You can, however, share a thumbnail of a SmartFrame image with a link, which encourages users to visit an external webpage (such as your website) to view the image.

SmartFrame automatically creates appropriate thumbnails and metadata for the major social networks, which you can configure in the Control section of the Admin Panel.

This method is currently compatible with Facebook, Linkedin, Pinterest, and X.

The post Sharing SmartFrame images on social media appeared first on SmartFrame.

<script async src="https://static.smartframe.io/embed.js"></script>
<smartframe-embed 
customer-id="7d0b78d6f830c45ae5fcb6734143ff0d" 
image-id="imgp7068_3_copy_1676383547359" 
theme="standard" 
style="width: 100%; display: inline-flex; aspect-ratio: 6768/4517; max-width: 6768px;">
</smartframe-embed>
<!-- https://staging2.smartframe.io/embedding-support -->

<script> tag attributes:

• async
• src

<smartframe-embed> tag attributes:

• customer-id
• image-id
• theme
• style

Note:

It’s essential that the CMS allows the <script> and <smartframe-embed> tags and their attributes to be added to the page source code so they can be evaluated and rendered by the browser.

The post SmartFrame image embed code structure appeared first on SmartFrame.

There are two main ways in which you can obtain an embed code for a SmartFrame image: from the SmartFrame Admin Panel or from a SmartFrame image you see online.

Obtaining an embed code via the SmartFrame Admin Panel

If you have a SmartFrame account and access to the Admin Panel, you will be able to generate and obtain embed codes here.

How to embed SmartFrame images from the Admin Panel

1. Locate the image you would like to embed in the Images section of the Admin 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.

The method above will embed the SmartFrame image on your website with the Default Theme. If you would like to embed a SmartFrame image with a different Theme, simply click on View embed code at step 3 instead of Copy embed code, select the Theme would you like to use, and click on Copy embed code. You can then paste this code into your website’s HTML/text editor.

Obtaining an embed code via a SmartFrame image

Providing the owner of the image allows this, you may also be able to embed a SmartFrame image you see online on your own site.

Simply click on the </> button within the Share options and select Copy code. This code will now be saved to your clipboard, ready for you to paste into your website’s HTML/text editor.

If you do not see this option, it is likely that the owner of the SmartFrame image has prohibited further embedding. 

The post Obtaining an embed code appeared first on SmartFrame.

The post Preview mode appeared first on SmartFrame.

This code will usually appear within the SmartFrame image itself or on the page where the image has been published. 

If you are a content owner who has manually uploaded images to the SmartFrame Admin Panel, you should also be to find the embed code for your images by clicking on the image itself and then selecting Embed, before following the on-screen instructions.

If you need further support, please read our guide to obtaining embed code.

How to embed a SmartFrame image on your website

1. Head to your website’s editor and switch to the text/HTML editor
2. Paste the embed code where you would like your SmartFrame to appear

If you need to embed many SmartFrame images at once, we recommend you consider a SmartFrame Web Component integration. Please contact us for further details.

Content-managed site

It’s possible to embedding SmartFrame images using 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.

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

Please visit the SmartFrame embed code structure page to learn more about the embed code structure.

Troubleshooting

The post How to embed SmartFrame images on your site appeared first on SmartFrame.

1. In your website editor, click on Show all elements in the left-hand-side toolbar

2. Drag and drop the Embed code element on your page

3. Click to set custom HTML and then select Edit Custom HTML

4. Paste your SmartFrame image embed code and press Publish

Your SmartFrame image is now embedded on Weebly.

The post How to embed SmartFrame images on Weebly appeared first on SmartFrame.

1. Create or edit a post

2 Switch to HTML view

3. Paste your SmartFrame image embed code and click on the Publish button

4. Your SmartFrame image is now embedded on Blogger

The post How to embed SmartFrame images on Blogger appeared first on SmartFrame.

1. Create or edit a page

2. Add a Content Block

3. Search for HTML

4. Paste your SmartFrame image embed code and click on Update

5. Your SmartFrame image is now embedded on WordPress 5.X.X

The post How to embed SmartFrame images using WordPress appeared first on SmartFrame.

Full compatibility – Website builders

• 1&1 MyWebsite
• Doodlekit
• Duda
• Format
• GoCentral
• Jimdo
• Koken
• Pixieset
• Tilda
• Viewbook
• Webflow
• Webnode
• WebsiteBuilder
• Weebly
• Yola
• Zenfolio

Full compatibility – CMS

• Drupal
• Joomla
• Magento
• TYPO3
• WordPress

If you run a web service and you would like to be listed in our supported CMS platforms, please contact us. We will be happy to help you and your clients integrate our technology into your site.

Limited compatibility – Website builders and CMS

• Blogger
• uCoz
• Simbla

Some website builders and CMS platforms don’t allow any active script to be run in the preview mode. This means that when you are using SmartFrame in conjunction with one of the platforms listed above, the preview will block SmartFrames from being loaded and displayed (SmartFrame Error 0B). These platforms do, however, allow active script to be run in live environments, which means that these will still be rendered correctly – and be visible to users – once you publish the page.

Limited compatibility – Social networks

• Facebook
• LinkedIn
• Medium
• Pinterest
• Tumblr
• X

Some social networks don’t allow running any active script on their platforms, so we incorporated a solution into SmartFrame. When a user shares a SmartFrame on a social media network, we generate an appropriate thumbnail and add a description so that the post is correctly formatted. The thumbnail is kept fairly small, and those who wish to apply a watermark to it can opt to do so through the Control section of the Admin Panel. In this way, the social media platform where the image is posted receives limited content, while the person viewing it is encouraged to click through to the larger version of the secure SmartFrame.

Incompatible website builders

• Adobe Portfolio
• GoDaddy
• Google Sites
• Wix

Incompatible services or social networks

• 500px
• Adobe Portfolio
• Flickr
• GoDaddy
• IM Creator
• Instagram
• Unsplash
• Wix

Custom websites

Custom websites are normally edited by uploading the source code to the server using some form of file transfer such as FTP. This provides the user with the greatest flexibility and few or no restrictions, and, in most cases, SmartFrame should be fully compatible.

DAM (digital asset management) platforms and bespoke software packages

SmartFrame has been successfully integrated into several specialist digital asset management platforms. If you would like to offer SmartFrame to your existing customers, please contact us. We offer an Enterprise API, several integration options and completely bespoke solutions.

Troubleshooting and known limitations

Some active script (Javascript) or CSS may clash with the SmartFrame image viewer. Here, the best solution is to disable as many plugins and external libraries as possible, and to try SmartFrame with a lean version of your website. Once you’ve done this, enable those libraries and plugins, one by one, until the problem occurs again. Once you identify the script, library or plugin that causes the conflict, either update it if possible or consider whether you need to use this. If issues persist, please contact us.

One other common issue occurs when attempting to replace background images in CSS with SmartFrame, which is not directly possible. The solution is to create a <div> layer, which behaves similarly, using z-index and other CSS attributes, and to insert a SmartFrame tag inside this layer.

The post Supported platforms appeared first on SmartFrame.