Embedding Third-Party Objects

knlowledgeart

Embedding Third-Party Objects

The Embedded Objects 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 Ceros Experiences. Below we’ve outlined the basic steps to get 3rd-party content into Ceros, however, if you would like a more in-depth tutorial, be sure to check out our designer lesson on Embedding Objects.

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 Ceros studio, select the Embed Objects icon and draw a placeholder on your canvas
  • Click on the Settings icon in the Inspector panel and paste the embed code

It’s that simple! Below we have outlined a handful of different use cases, however, the limits are really based on your creativity and access to web-based embed codes.

Embedded Objects

YouTube

Embedded YouTube videos are a great way to preserve the views and shares reflected on the YouTube platform. To embed a YouTube videos within Ceros:

  • Locate the “Share” button below the YouTube video
  • Select “Embed” and copy the provided embed code
  • Navigate to studio and select the “Embed Object” icon
  • Draw out placeholder box on the canvas
  • Select settings in the inspector panel and paste the YouTube embed code

You can use the following parameters to customize your YouTube embeds:

?modestbranding=1&enablejsapi=1&autoplay=0&rel=0&controls=0&showinfo=0

  • modestbranding=1 – this will remove most YouTube branding (this should be first)
  • autoplay=0 – the video will play automatically
  • rel=0 – this will remove suggested videos at the end of the video
  • controls=0 – this will remove all controls except for the play/pause button in the center of the video
  • showinfo=0 – this will remove the video title from the player

Google Map

  • Locate the map you would like to include in your Ceros 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
  • Draw out placeholder box on canvas
  • Select settings in the inspector panel and paste the Google Maps embed code

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 to be 100%.

Google maps embed

Social Feeds

  • Navigate to the social post or feed you want to share
  • Locate and copy the embed object code
  • Navigate to studio and select the “Embed Object” icon
  • Draw out placeholder box on the canvas
  • Select settings in the inspector panel and paste social feed embed code

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 lead form provider. Please consult your CMS documentation to determine how to embed lead form objects.

Lead form

 

Note: Depending on the embed code provided, you may need to adjust the dimension of either the placeholder box or the HTML code provided.

ChartBlocks Charts

ChartBlocks charts enable you to present data or information in a customized, engaging way — and they look great embedded in Ceros experiences! To embed an interactive chart into your Ceros experience:

  • Contact your Account Manager to activate your free, Ceros client, elite ChartBlocks account
  • Import your dataset into ChartBlocks and create your custom chart
  • Once your chart is finished, click Share in ChartBlocks and copy the embed code
  • In the Ceros studio, select the “Embed Object” icon and draw out the placeholder box on the canvas
  • Navigate to the gear icon in your Inspector panel and paste the chart’s embed code here