This article provides instructions on how to embed Tivian Communicate XI content on company intranets or web pages using iframe embed codes. It covers two embedding methods: full experience and single item. The article also explains how to test the embed code, adjust dimensions, change content, and offers additional information about the embedding process and its implications for analytics and user experience.

You can display Tivian Communicate XI videos, graphics, or even the entire Content Experience on your company’s intranet or other web pages. It is a fairly simple process though it does require some basic knowledge of HTML. Use what’s known as an iframe embed code to display your content on your intranet site. You can track engagement for that content in the Analytics section on CXI.

• An iframe is responsive to the layout of your website and is mobile-compatible.
  • It can adjust its width and height to fit the different layouts including mobile support.
• It is a great way to advertise the CXI content in areas where employees frequently visit, such as your company’s intranet site or Web portals.

We recommend the Embedded Content Experience as a secondary method of reaching your users. Not only do direct reach channels such as email bring employees into the full landing page experience where their attention to your message is stronger, browser behavior that is out of our control may cause analytics to be inaccurate. We recommend linking out to CXI using an embedded trackable thumbnail.

Embedding content

1. Create a Trackable Asset for the piece of content you want to embed, this will create a short web link that points to your content.
2. Click the Copy button next to the web link, in the window for the selected trackable asset. It will say Copied once you’ve clicked it.

Next, we will want to set up the iframe embed code. There are two ways you can embed CXI content:

Full experience

This view allows the viewer to navigate to additional content and click on the Call to Action buttons.

I. Use this code:

<iframe width="618" height="526" src="https://url?embed=true"
frameborder="0" allowfullscreen></iframe>

II. Input your copied web link from the trackable asset you just created into the highlighted area: https://url section of the code keeping the ?embed=true to follow.

Here’s an example of a copied URL: https://gspk.co/s/0q2pucj

<iframe width="618" height="526" 
src="https://gspk.co/s/0q2pucj?embed=true"
frameborder="0" allowfullscreen></iframe>

Note: The highlighted area is the added URL.

This is an example of a full experience embed, and you can view it here.

Single item

Use this if you want your viewer to focus on a single video or image. If you have a poll or rating after the video it will appear, however, the Call to Action button will not appear after the video.

Take this code:

<iframe width="618" height="526" src="https://url?embed=true"
frameborder="0" allowfullscreen></iframe>

1. Input your copied URL from the trackable asset into the highlighted area: https://url section of the code keeping the ?embed=true to follow.
2. You will also enter &singlecontent=true into the iframe embed code, following the ?embed=true section.

Here’s an example of a copied URL: https://gspk.co/s/0q2pucj

The code should read:

<iframe width="618" height="526" 
src="https://gspk.co/s/0q2pucj?embed=true&singlecontent=true" 
frameborder="0" allowfullscreen></iframe>

Note: The highlighted areas are the added URL and the single piece of content code.

This is an example of a single item embed.

Testing code

Test the iframe embed code by going to this link:

https://jsfiddle.net/dsbenson/psxzeuno

1. Enter the iframe embed code you have created into the HTML section.
2. Click the Run button in the top left corner.
3. It should show the link’s destination appear.
4. Once you have confirmed that the code works, send the iframe embed code to your IT team or whoever manages the external site, to embed that iframe code.

Height and width

You can set the height and width of the display by changing the numbers within the quotations in the iframe embed code.

<iframe width="618" height="526" src="https://url?embed=true" 
frameborder="0" allowfullscreen></iframe>

• The larger the embedded content area, the more immersive the viewing experience will be.
• A High Definition (HD) video has a width to height ratio, or aspect ratio, of 16:9. Use this ratio if you will only be posting HD videos.
• A Standard Definition (SD) video has an aspect ratio of 4:3. Use this ratio if you will only be posting SD videos.

Changing content

Once you have placed the embed code on your website, you can change the content that is displayed at any time without needing to edit your website.

1. Start in the Campaign section and select the trackable asset you linked with your embed code.
2. Click the pencil icon to edit the trackable asset.
3. Scroll down to Destination and click Change.
4. Select another piece of CXI content for the trackable asset to link to.
5. Click Save.
6. Your embedded content linked to this trackable asset will now display the updated piece of content.

Be aware

You can only embed content from your Experience library. You cannot embed video from YouTube or any other external link.

Other info

• Tivian content is fully responsive to different browser sizes on desktop and mobile, so you can set the width and height attributes according to the layout needs of your website. Make the embedded content area as large as possible for a more immersive viewing experience.
• Some web portals do not allow iframe embeds. For such situations, we recommend you embed a thumbnail graphic and link it to the content instead. Your Tivian team can assist with this process.
• You can create multiple instances of the Embedded Content Experience on your website, each highlighting different content.
• Autoplay is turned off when initially loading the Embedded Content Experience, to avoid conflicting with other items on the page. Viewers must click on the first piece of content to begin playback.
• The Tivian Communicate XI (CXI) analytics dashboard will count engagement results for Embedded Content, just as with the same content viewed in the main CXI landing pages. Each unique user who visits a portal page where you embed your Tivian experience will count as a unique user in the analytics panel.
• You can use a single iframe embed code on multiple pages on your website. Or, if you want to track how users are accessing the content on different pages of your website, you can set up multiple Trackable Assets and use them to create multiple iframe embed codes.

FAQ

What are the two ways to embed Tivian Communicate XI content?

The two ways to embed content are: 1) Full experience, which allows viewers to navigate additional content and click on Call to Action buttons, and 2) Single item, which focuses on a single video or image without the Call to Action button.

How can I test the iframe embed code before implementing it on my website?

You can test the iframe embed code by using the JSFiddle link provided in the article (https://jsfiddle.net/dsbenson/psxzeuno/). Enter your iframe embed code into the HTML section and click the “Run” button to see if it displays correctly.

Can I change the content displayed in the embedded iframe without editing my website?

Yes, you can change the content without editing your website. Simply edit the trackable asset in the Campaign section, change the destination to a different piece of CXI content, and save. The embedded content linked to that trackable asset will automatically update to display the new content.