.png?height=120&name=rockcontent-branco%20(1).png)
You can use Ion to create content that can be embedded into external websites, outside your console.
You will find the option to copy "embed code" next to the URL within the URL Management screen:
When embedding content, there are several things you will want to keep in mind as best practices:
Quick Starts
To get started, you may find it helpful to check out the Quick Starts with the word "Embed" in the title. You will find these experiences across many Quick Start Cloud categories. These experiences were developed specifically to be embedded into external sites and are a great place to begin building out content that you plan to embed on a third party site.
Placement
The Embed Code you copy from Ion should be placed between an opening and closing <div> tag within your website. The width and height of the embedded content will be dictated by the size of the <div> tags the embed code is placed between.
Styling and Tracking Scripts
When copying the embed code from the URL Management Screen, you will see a checkbox that, when checked, will generate another version of the embed code that will automatically pull any Query String Parameters passed into the parent site into the embedded Ion site as well. This can be helpful for tracking purposes for any scripts or integrations set up within your Ion experience that rely on data being passed in on the query string.
Embedded content can be affected by code used in the website it is embedded into. Any styling and/or tracking scripts that are set up on the external site can impact the style of content shown within the embedded frame.
For example, the embed code will be read by the external site as an iFrame (even though the content is responsive). If the style sheet used by the external site specifies a height for iFrames, the embedded content will honor that height setting and render accordingly. This could in turn make the embedded area shorter than desired if the height set is shorter than what is necessary to render all of the embedded content and would require the external style sheet to be reviewed and adjusted to remove the fixed/max height applied to iFrames.
Additionally, any tracking scripts that are set up to trigger in the embedded Creative will trigger when the page loads on the external site. Because the external site also loads its own set of tracking scripts, there is potential for these scripts to interfere with each other. If the same tracking script is set up on the Ion experience and the external site, they will both trigger which potentially could result in the same visit counting twice in an external system (CRM).
Visibility
When links are used within the embedded content to go to another page within the Creative, the next page will be rendered within the frame of the embedded area on the same parent site page without any visible change to the URL within the visitor’s address bar or other content in the parent frame.
If you would prefer that a link breaks out of this frame to take over the browser window, you will want to make sure they are set to open in the parent frame (_parent).
Browsers will read the embedded content as if everything in it is visible even if some content renders below the fold. This is because the opening and closing <div> tags are visible from a coding perspective and the external site is technically reading the embed code as opposed to the content within the Ion page.
SEO
Ion embed code is javascript code that dynamically renders an iFrame. This means that any search engine that attempts to crawl the parent site would need to be able to execute javascript in order to render the iFrame and in turn crawl the embedded content.
Embed-Friendly Features
The features listed below are great options when embedding content into an external site:
- Responsive Grids - Allow content to adjust to the space available
- Freestyle Forms - Form fields will adjust the amount of space available
- Flow - Can be used to show multiple screens in embedded area without changing screens or the size of the frame
- Hidden when embed - Can be applied to content on standalone pages to specify which content should be shown and which content should be hidden when embedding that page into an external site
Use With Caution
The below features should be avoided or used with caution when building an experience meant to be embedded in an external site:
- *Full-Page Slider - Meant to take up an entire page and cannot slide up and down when embedded
- **Fixed widths and heights - Will make content inflexible instead of being able to adjust the the space available
- ***Lightbox - Will display over the top of the embedded content and will not be able to overlap content outside of the frame
*Full-Page Slider & Anchor Links
Because the browsers read the embed code as if everything is visible, anchor links and in-page links that scroll up or down on the page will not work within the embedded area. Typically, these types of anchor links would scroll up or down to show the corresponding content as close to the top of a given browser as possible. If everything is treated as being visible though, the browser will not think scrolling is necessary to display the anchored content. This also means that the Full-Page Slider component should not be used for content that will be embedded on an external site since it will lose the ability to scroll up or down to go from section to section.
**Widths & Heights
If a width is set on the <div> tags, you will want to apply the “Nested Responsive Grid” Micro-theme (found within the Grid Layout category) to your Ion content to ensure it fits properly within the width set for the <div> tags.
We would also recommend avoiding using fixed widths on any container or grid if the <div> into which content is embedded is not set to use 100% width of the parent site.
***Lightbox
Lightboxes will display over the top of the embedded content and will not be able to overlap content outside of the embedded frame. If a Lightbox must be used within the embedded content, you will want to set the overlay color to be transparent to help ensure it fits in stylistically with the rest of the page.