Designer Courses / Getting Started

3rd Party Embedded Objects

In this lesson, we are going to explore how to pull third-party content — like lead-gen forms, YouTube videos, social posts, Spotify playlists, games, and more — directly into a Ceros experience. For the sake of context, we are going to embed the below items inside a somewhat built out experience. However, you can also recreate these steps using your own experience or simply copy the embed codes below into a blank experience.

Embed YouTube Video

Let’s get started by embedding a YouTube video into our experience.

  • Upload the Follow Along Ceros landing page to your admin and dive into the studio
  • Open this YouTube video in a new window and select the share option (or copy the code provided below)
  • Navigate to the “Embed” popup within YouTube
  • Toggle “Suggested videos”, “Player controls”, and “Video title options” to “Off”
  • Navigate back to Ceros
<iframe src="https://www.youtube.com/embed/O-XrRQf7BPM?rel=0&amp;controls=0&amp;showinfo=0" width="1120" height="630" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

In Ceros:

  • Select the “2nd Section” layer and draw an “Embedded Object” placeholder right below the “What, Where, When” text
  • Paste the YouTube embed code into code section of the Inspector window
  • Change the “Width” in the code to 1120px and the “Height” to 630px
  • Hit enter to save your changes
  • Align YouTube video object on the canvas

 

Embed Google Map

  • Navigate to this Google Map link and select the share option (or copy the code we provided below)
  • Select the “Embed” option and copy the provided embed code
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12091.339967690581!2d-73.99976813206443!3d40.74365624361572!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a539593991%3A0xa53552ec20fbf244!2sCeros!5e0!3m2!1sen!2sus!4v1504904840476" width="600" height="450" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

In Ceros:

  • Select the “3rd Section” layer and draw an “Embedded Object” placeholder at the bottom of the experience
  • Paste the Google Maps embed code into the code section of the Inspector window
  • Change the “Width” in the code to 100% and “Height” to 100%
  • Hit enter to save your changes
  • Align the google map on the canvas

 

Embed Lead Capture Form

We’ve provided a test lead capture form from Hubspot below, however, you can also navigate to your own Marketing CRM system and select the share option on your form to use one of your own.

<!-- [if lte IE 8]>

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>

<![endif]-->

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>

<script>

  hbspt.forms.create({

    portalId: '403603',

    formId: 'd04c570d-b3a2-4658-9155-ef1156530770'

  });

</script>

In Ceros

  • Select the “Form” layer and toggle the visibility to “On”
  • draw an “Embedded Object” placeholder over the white background object
  • Paste the above embed code into the code section of the inspector window
  • Hit enter to save your changes
  • Turn the visibility of the “Form” layer to off and preview the experience to ensure your form is appearing as expected

3rd Party Embedded Objects