Embedding 3rd Party Content and Forms

Embedding 3rd Party Content and Forms

In this lesson, we'll review how you can use the Embed Object tool to embed 3rd party content such as videos, Google Maps, Spotify Playlists, Social Content, and forms.

The ability to embed third party content within Ceros gives you a ton of creative flexibility. Embedded objects can include YouTube, Vimeo, or Wistia videos, forms, Google Maps, Spotify playlists, social content and more.

They can also feature dynamic content that is constantly changing, like data or charts, and can parse information back and forth with external vendors and platforms.

Embed YouTube Video

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

  • 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:

  • Draw an Embedded Object placeholder on the canvas
  • 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:

  • 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 you are using Hubspot or Marketo, be sure to check out our Video Lesson on those integrations specifically.

<!-- [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:

  • 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
  • Preview the experience to ensure your form is appearing as expected

Embedding 3rd Party Content and Forms

In this lesson, we'll review how you can use the Embed Object tool to embed 3rd party content such as videos, Google Maps, Spotify Playlists, Social Content, and forms.