Follow

Create & Customize Your Embed Template

Each ScribbleLive Engage 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 > Menu > Setup > Templates
Permission Level 
Administrator  |  Developer 


Navigate to the Embed Settings Page

To navigate to the Embed Settings page from within a stream:

1. Click on Menu > 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. 

 

To 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 a publishing a stream. Creating a template can be as simple as changing a few stream parameters, such as stream size or background colour, 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 time stamp of “9:20pm”)
    • 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 behaviour of your Scribblive embed.

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

 

 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.

 

Note:

On January 21, 2014, ScribbleLive 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. 

Embed (v7)

 

Legacy Embed (v5)

 

 


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.

 

To change the width and height in a Legacy embed:

1. Navigate to the Manage Templates page and click on Legacy Embed to pull up the list of Legacy 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 for the Width and Height.
3. Select the Preview button to preview or the Save button the save the changes.

 

 

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments