Embeds allow you to drive traffic with qualified purchase intent from shoppable visual content published to your blog, e-commerce site, or partner sites. They're extremely simple to setup and deploy anywhere in seconds with zero coding.
Getting Started
- From your collection dashboard, select 'Embed' from the dropdown under the asset
- Copy the installation code at the bottom
- Open your CMS and paste the code in using any text editor
In terms of selecting from the various themes, please keep in mind the following design principles.
The Expanded theme is designed for scenarios where all CTAs should be visible on the initial rendering with no additional action required from the user. Keep in mind that there's no limit to how many CTAs are rendered and the height of the iframe will expand to ft all of them:
The Compact theme on the other hand is designed to render only an image and requires the user to engage explicitly before any of the CTAs are visible over the image:
The Default is a blend of the two in that it renders only a single dedicated row for the CTAs under the primary image:
Frequently Asked Questions
Is this responsive?
Absolutely, everything should adjust naturally down to a width of 200px wide for each embed. Anything smaller than that won't leave much room for the product hotspots ("placement markers"). If you overwrite the CSS, especially for classes like .candid-marker-text, ensure that you test placements that are within 25% of the image borders.
How do I track purchases originating from Embeds?
Much like the other display plugins, Embeds will follow the same set of URL-based tracking rules applied to the collection.
Are Candid Embeds compatible with Facebook Instant Articles?
Yes, all you have to do is modify the embed script slightly to include the iframe directly under a figure tag to conform to their specification and to be explicit bout the width and height:
<figure class="op-interactive"> <iframe src="https://api.getcandid.com/stream/embed/?id=356340f0-a1f6-4786-914f-d173dacff59e&ids=1395941715039530160_2023927425&theme=&cache=true" style="max-width: 100%; border-radius: 4px; width: calc(100% - 2px); margin: 1px; border: 0px; box-shadow: rgba(0, 0, 0, 0.498039) 0px 0px 1px 0px, rgba(0, 0, 0, 0.14902) 0px 1px 10px 0px; overflow: hidden;" scrolling="no" height=598 width=379></iframe> </figure>
How many can I include on a single page, will it slow down my page?
You can include any number of these embeds without impacting your performance one bit. The integration pattern and loading behavior is very similar to the embeds that you can generate off Instagram media natively. Below is a screenshot of Google PageSpeed's analysis of the performance of these iframes (which are loaded via an async defer JavaScript):
