The Embed Object tool makes it a breeze to add YouTube videos, maps, lead forms, social feeds, playlists, and tons of other third-party content directly to your Studio experiences. Below we’ve outlined the basic steps to get 3rd-party content into Studio.
How to Add Embedded Objects
Navigate to the web object you would like to embed and copy the HTML embed code provided (usually found within the share menu)
In the Studio, select the Embed Object tool from the toolbar and draw a placeholder on your canvas
With that embed placeholder selected, you’ll see an Enter embed code field in the Design tab where you can paste in an embed code
Below we have outlined a handful of different use cases, however, the limits are based on your creativity and access to web-based embed codes.
YouTube
Embedded YouTube videos are a great way to preserve the views and shares reflected on the YouTube platform. To embed a YouTube video within Studio:
Locate the Share button below the YouTube video
Select Embed and copy the provided embed code
Navigate to the Studio and select the Embed Object tool
Draw out a placeholder box on the canvas
With the placeholder box selected, paste the YouTube embed code into the Enter embed code field in the Design tab
You can customize your YouTube embeds by adding the following parameters to the end of the URL in the embed code:
?modestbranding=1&enablejsapi=1&autoplay=1&controls=0modestbranding=1 – this will remove some YouTube branding (this should be first)
autoplay=1 – the video will play automatically
controls=0 – this will remove all controls except for the play/pause button in the center of the video
An embed code example:
<iframe width=“560” height=“315” src=“https://www.youtube.com/embed/exampleAddParametersHere" frameborder=“0” allow=“accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>For more information regarding supported YouTube player parameters, please refer to this article via Google.
Google Map
Locate the map you would like to include in your experience
Click the Share button and then select Embed map
Select the size you would like to use (this can be changed later) and copy the provided code
Navigate to the Studio and select the Embed Object tool
Draw out a placeholder box on the canvas
With the placeholder box selected, paste the Google Maps embed code into the Enter embed code field in the Design tab
Note: The embed code width and height dimensions will override the placeholder box you draw. If you would like the Google map to take the shape of your embedded object box, change the width and height values of the embed code to 100%.
Social Feeds
Navigate to the social post or feed you want to share
Locate and copy the embed object code
Navigate to the Studio and select the Embed Object tool
Draw out a placeholder box on the canvas
With the placeholder box selected, paste the social post/feed's embed code into the Enter embed code field in the Design tab
Lead Forms
Embedding lead forms directly into Ceros is a great way to customize your user’s experience to better fit your company’s needs. How to export will likely vary depending on the lead form provider. Please consult your CMS documentation to determine how to embed lead form objects.
Note: HubSpot (click here for integration guide) & Marketo (click here for integration guide) forms can be easily added to your Ceros experience with our integrations. If your team utilizes Pardot forms, Ceros offers a pre-built SDK extension that will allow you to gate an experience with a Pardot form. For more information, please click here to view the extension guide.
Note: Depending on the embed code provided, you may need to adjust the dimension of either the placeholder box or the HTML code provided.