Create & Customize Your Embed Template

Each Live account comes with a default embed template. Administrators and Developers are able to create new embed templates - and customize those templates, on the Embed Settings page.

Navigation

Dashboard > Manage > Templates
Dashboard > Any Live Stream > Setup > Templates

Permission Level 

Administrator  |  Developer 

Navigate to the Embed Settings Page

There are 2 ways to navigate to the Embed Settings Page:
 

  • From within a stream
  • Using the left navigation menu

 

Option 1 - Navigate to the Embed Settings page from within a stream:


1. Click on Setup > Templates at the top of the page, to go to the Choose A Template page. 

2. Click on the Embed tab to open a list of your saved embed templates.

3. Click on the Create New button to create a new embed template. 
 

 

 

Option 2  - Navigate to the Embed Settings page from the left navigation bar:


1. Click Manage > Templates from the left sidebar to go to the Choose A Template page. 

2. Click on the Embed tab to open a list of your saved embed templates. 

3. Click on the Create New button to create a new embed template. 
 

  

Create a New Embed Template


When a new embed template is created, it appears on the list of embed templates to be selected when publishing a stream. Creating a template can be as simple as changing a few stream parameters, such as stream size or background color, or as detailed as customizing the complete look of your stream with Top HTML.
 

1. Go to the Embed Settings page


2. On the Embed Settings page, update the following fields to create a new embed template:
 

  • Title: Insert a title for your embed template.
  • Skin: Default (white background); Midnight (Black background)
  • Size
    • Auto: Enable the height or width of your embed to be responsive to any device by setting the height or width preference to Auto. To do this, move the slider to On.
    • Width: Set a fixed width for your embed template by moving the slider to Off and setting a custom width. The recommended size is no smaller than 280px and no greater than 500px.
    • Height: Set a fixed height for your embed template by moving the slider to Off and setting a custom height
  • Options
    • Live Dates: Switch the slider to On to display a live date when content is posted to your stream (e.g., a live date may appear as “3 minutes ago” as opposed to just a timestamp of “9:20 pm”)
    • Frame Border: Switch the slider to On to display a border around your embed.
    • Default Number of Posts: Customize how your stream paginates by choosing the default number of posts per page. The minimum number of posts per page is 4 posts, while the maximum number of posts your embed can display before paginating is 50 posts. 
  • Polls
    • Display bars: Switch the slider to On to display poll results as bars, as opposed to a number of votes.
    • Display counts: Switch the slider to On to display the number of votes each poll option has received.
  • Template Top HTML: Add custom HTML, CSS and JavaScript to customize the look, feel and behavior of your live embed. 

 
 3. Click Save to save all customized changes to your embed template. 

 

Tables can't be imported directly. Please insert an image of your table which can be found here.

Note:  Legacy embeds are not compatible with Content Studio Social embeds.

Add a Header or Title to an Embed

In most cases, the embed will be displayed in a page on your website. If you would like to add a title or content above the embed, simply add it to your website above the embed code. Add Custom Code to the top part of your Embed Template

 

Add Custom Code to the Top Part of your Embed Template

You can add HTML, CSS, and Javascript to the top of your embed templates using the Top HTML section of the Embed Settings page. Any code added to the Top HTML section will be added to the very top of your embed, above the comment/share toolbar.
 

Common uses include:

  • adding a banner advertisement
  • adding your own styles or style sheet hosted on your server
  • adding additional analytics code.


1. Go to the Choose a Template page. There are two ways to navigate to this page:
 

  • Option 1 - Go to Manage > Templates from the left sidebar
  • Option 2 - From within a stream, go to Menu > Setup > Templates at the top of the page.


2. Click on the Embed tab at the top of your page. Select an embed template you would like to edit, and click the Edit button that appears.
 

 

 

3. Locate the Top HTML section on your Embed Template settings page.

4. Add any HTML, CSS, and Javascript you'd like to the Top HTML text area.

5. If adding code to a Legacy embed, you can click the Preview button to preview your changes.

6. Click the Save button to save your changes.

 

Tables can't be imported directly. Please insert an image of your table which can be found here.

Note:

On January 21, 2014, Live released a redesigned version of our embeds (V7). You can read about it in more detail, in this blog post. Customizations to our legacy embeds (V5) are still possible. Click here for more information. 

 

 

Change the Width and Height of your Embed Template

To change the width and height of your v7 embed template:

1. Navigate to the Manage Template page and click on Embed to pull up the list of embed templates. Click on an embed template and select the Edit button.

2. On the Embed Settings page, make your changes in the Size section:
 

  • Auto: Enable the height or width of your embed to be responsive to any device by setting the height or width preference to Auto. To do this, move the slider to On.
  • Width: Set a fixed width for your embed template by moving the slider to Off and setting a custom width. Note: The recommended size is no smaller than 280px and no greater than 500px.
  • Height: Set a fixed height for your embed template by moving the slider to Off and setting a custom height


3. Select the Preview button to preview or the Save button the save the changes.