When you enable this option, a small button will appear within your SmartFrame image and this will reveal an embed code when clicked. This code simply needs to be copied and pasted into a website’s HTML or text editor for the image to be successfully embedded.

This button may appear on its own or within the Share button options, depending on how you have your Theme configured. By enabling it, this change will be applicable to all SmartFrame images that use this particular Theme.

How to add an Embed button to your SmartFrame images

The Embed option should be enabled for SmartFrame images by default. If it is not, please follow the instructions below.

1. Click on Themes in the Admin Panel.
2. Find the Theme for which you would like to enable this control.
3. Select Edit before selecting the Call to action option within the left-hand-side menu.
4. Enable this control by clicking on the slider next to Add a call-to-action button so that it turns blue (assuming this is not already blue). The Embed button should now be selected.

To preview how this will appear inside a SmartFrame image, click on the Preview button at the bottom of the page. This will open a full preview of the Theme, even before you save any changes made. Once you’re happy with the results, you can save the changes by clicking on the Save button.

Regardless of where such a SmartFrame is embedded, you will still be able to see and track this in the Insights panel. You’ll also be able to change its Theme or block it from domains of your choosing.

The post Embed button appeared first on SmartFrame.

The Attribution feature helps to retain your brand’s visibility and the content creator’s identity when your images are embedded away from your own sites.

This feature appears at the bottom of SmartFrame images embedded on these external sites, and it takes the place of the Caption whenever the viewer’s cursor is not inside the image itself. As soon as the viewer’s cursor enters the image, the Caption is displayed and the Attribution disappears.

How do I change these details?

The specific details shown here can be defined in the Attribution section, which is found on the left-hand-side panel in every Theme. You can populate this field with metadata you have specified, and you are able to add links to this if you require. Basic styling options are also available.

Do I need to use the Attribution feature?

The Attribution feature is optional. You can enable and disable it by selecting the slider next to ‘Add an Attribution’ on the Attribution page.

The post Attribution appeared first on SmartFrame.

The post Themes appeared first on SmartFrame.

Here are some differences you can expect when looking at your Themes on mobile devices:

Theme elements

Depending on the display size, Theme elements will appear slightly denser. This ensures an optimal experience on smaller displays and prevents buttons and/or the Caption from covering the embedded image.

Tap to display

Elements that are only displayed on desktop devices on mouseover become visible when a viewer taps on the SmartFrame on a touchscreen-equipped smartphone or tablet.

Full-screen functionality

Full-screen functionality is not available on smartphones and tablets. Instead, SmartFrame images can be displayed in a full-window mode, which fills the current browsing window’s dimensions with the image.

Hyper Zoom

Hyper Zoom works differently on all touch devices, but the principle is the same wherever it’s used: to zoom into the image with a pinch gesture, right up to its maximum resolution. What makes Hyper Zoom really stand out is the fact that, with each pinch, the image is rendered in a higher resolution, which means that the quality remains intact.

The post Themes on mobile devices appeared first on SmartFrame.

Editing vs cloning

Keep in mind that any changes made to a Theme will be visible on all SmartFrames using that Theme. For that reason, cloning a Theme and changing certain settings may sometimes be preferable to editing an existing Theme.

Overview

You can see a fully functional preview of the Theme, including all possible interactions, on the Overview page. You can switch the preview mode to different sizes and load different images from your collection by clicking on the icon. This is also where you can edit the name and description of the Theme, and see details of the Theme’s usage and performance.

Theme settings

You can edit the following settings for each Theme:

• Caption – enable and disable the Caption on your SmartFrames
• Attribution – enable an Attribution that will appear on all off-site SmartFrames
• Call-to-action – set up a redirect link, label and icon used for the Call-to-action button
• Sharing – enable and disable different sharing options for your SmartFrames
• Deterrent – display a copyright warning when someone right-clicks on the image or tries to take a screenshot

The post Editing Themes appeared first on SmartFrame.

To do this, head to your website’s CMS and locate the embed code that corresponds with the SmartFrame image whose Theme you would like to adjust. Make sure you are viewing this in the CMS’s HTML or Text editor, rather than the visual editor, before finding the section of code that reads theme=“.

If you already know the name of the Theme you would like to use, simply paste this over the text found after theme=“, making sure to retain the quotation marks that wrap the Theme name.

For example, if your SmartFrame image currently employs a Theme called “Standard” and you would like to use a Theme you have configured called “Presentation”, you should make the following amendment (shown in bold).

Original code:

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

Amended code:

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

Make sure to save your page once you have finished editing it.

If you do not know the name of the Theme you would like to use, head to your SmartFrame Admin Panel account, click on any image and select Embed from the left-hand-side menu. Now select the Theme you would like to use from the drop-down menu and make a note of the name that appears after theme=“ in the embed code.

Changing Themes with offsite embeds

The above process requires you to have access to the CMS of the website on which the SmartFrame image resides. This will typically be an onsite embed – in other words, a SmartFrame embed on a site you administer.

If you need to change the Theme on a SmartFrame that has originated from your account but that has been embedded on a site you do not administer – otherwise known as an offsite embed – you will need to contact the website operator of that site.

Changing Themes when using the SmartFrame Web Component

The same workflow can be used to change the theme for SmartFrame images that have been installed using the SmartFrame Web Component.

The post Changing Themes of existing SmartFrames appeared first on SmartFrame.

You will now have two options for creating your new Theme: clone an existing Theme or start with a blank Theme.

Cloning an existing Theme

This option is ideal if you would like to adopt a new Theme that only differs slightly from one that you are currently using. You will be able to select any of your existing Themes to copy and, once you do this, a new Theme will be created with exactly the same settings as the original one.

At this point, you will be able to enable certain features that were disabled on your original Theme, and vice-versa. For example, if you have the Embed button enabled on your original Theme, you can opt for the Custom button for the one you have just created.

Any SmartFrames that have been embedded with the original Theme will be unaffected by any of the changes you make.

Start with a blank Theme

This option is ideal if you would like to build your own Theme with a number of customizations. Your new Theme will be created with all optional features deactivated.

Here’s an example of a SmartFrame that uses a blank Theme:

The post How to create a new Theme appeared first on SmartFrame.

This is the Theme that is used when you copy the embed code for a SmartFrame image without first selecting a specific Theme.

If you would like to use a specific Theme for a SmartFrame image, you can select this Theme before copying the embed code from the Images section of the Admin Panel.

Alternatively, you can change the Theme of an existing SmartFrame image in the Embed Report within the Insights panel.

Changing the default Theme

You can change the default Theme at any time. Once you do this, all SmartFrame images that were previously embedded using the default Theme will use the newly selected default Theme.

To change the default Theme, simply click on the arrow symbol at the bottom of the Theme card in the Theme panel.

Deleting the default Theme

If you want to delete the current default Theme, you will first need to select a new default Theme. If you only have one Theme, deleting the default Theme will not be possible.

The post Default Theme appeared first on SmartFrame.

To do this, simply enable the Add a Share button option in the Sharing menu, which can be found within every Theme available to you.

Once enabled, this button will appear in the top-right-hand corner of your images.

Using SmartFrame’s sharing options does not compromise the security of your images in any way. When sharing a SmartFrame image, it is never your original image that is being shared, only a very small JPEG thumbnail of the image, along with a link to the SmartFrame Image page (or another page defined in the social media, email and direct link settings in Control section of the Admin Panel).

Currently, SmartFrame supports the following sharing options:

Social media sharing

The exact appearance and behavior of social media posts depend on the social media settings in the Control section. Currently, SmartFrame image previews can be shared on Facebook, X, Pinterest, and LinkedIn.

Direct link

This generates a unique sharing link. Depending on the Direct link settings in Control, the link will open either the page on which the SmartFrame image is embedded or a standalone Image page.

WhatsApp

This option allows the viewer to share a link to the URL on which the image is embedded via WhatsApp. This option is only available on mobile devices.

Text message

This option allows the viewer to share a link to the URL on which the image is embedded via text (SMS) message. This option is only available on mobile devices.

Embedding

This option, which is also only visible on desktop devices, allows the viewer to embed a SmartFrame image onto another website. A piece of code appears once the viewer selects this option, and this can be copied and pasted where the viewer wants the image to appear. Regardless of where this is embedded, you can still see this SmartFrame image in Insights and change its Theme or block it from appearing on certain domains.

Email

This option, which is only visible on desktop devices, allows you to send a preview to a SmartFrame image via email.

The post Share button appeared first on SmartFrame.

With this feature, a semi-transparent watermark will be displayed over the SmartFrame image whenever the viewer’s mouse cursor is outside the browser window (when a viewer may be opening screen-grabbing software). When the viewer’s mouse cursor is inside the browser window, images are fully viewable and interactive.

This feature cannot be disabled.

The post Out-of-focus protection appeared first on SmartFrame.