Add event to white label siderail

You can use JavaScript to embed an additional event into a siderail if your white label template contains multiple columns (read: the scribblelive div isn’t the full page width).

We’ve seen some clients do this to create differentiated streams—the main stream on the white label is dedicated to official content, while a siderail embed is created exclusively for reader comments, for instance. Examples: CNN Presidential Election, Official 2014 Grammy’s Liveblog.

Please note that code provided for these customizations is sample code used to modify Scribble from its out-of-the-box offerings. These are not supported features and ScribbleLive is not responsible for any future depreciation or changes we make to our platform that alter the functionality of the code within. For supported features and functionality, please see our Knowledge Base.

You will need two events. For instructional purposes, I will refer to them as Main Event and Commenting Event. The Main Event will be the event on the white label and the Commenting Event will be the event embedded into the white label siderail.

Screen Shot 2014-06-20 at 11.52.44 AM

    1. Get the id or class of the HTML element of your white label page where you’d like to embed the Commenting Event. (If your element is <div id=”right_rail”></div>, the element name would be “#right_rail”)
    2. Generate the embed code of the Commenting Event* that you want to put on your white label siderail. This article explains how to do that.
    3. In your Main Event, navigate to the Setup > Templates page. In the Whitelabel Top HTML section, add the following code, replacing the placeholder text with the element name and embed code:
<script type="text/javascript">
 jQuerySL(document).ready(function(){
 jQuerySL("id or class of the HTML element where the embed will be placed”).append("<div id='SLEmbed'>Embed code of Commenting Event</div>");
 });
 </script>
  1. Click Save Changes. The changes should be applied within a few minutes.


* Your embed code will look something like this:

<div class="scrbbl-embed" data-src="/event/#####/#####"></div>
<script>(function(d, s, id) {var js,ijs=d.getElementsByTagName(s)[0];if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="//embed.scribblelive.com/widgets/embed.js";ijs.parentNode.insertBefore(js, ijs);}(document, 'script', 'scrbbl-js'));</script>

Or this:

iframe src="//embed.scribblelive.com/Embed/v7.aspx?Id=#####&ThemeId=#######" width="500" height="600" frameborder="0">