Legacy SDK

Note: This article refers to our beta SDK. If you have already built against the beta SDK, the info below can be used as a reference.

Our current SDK offers greater flexibility. Visit our new SDK documentation to learn more:

sdk-engage

…………………………………………………………………………………………………………………..

Troubleshooting issues

When using the TemplateOverride features, please do not change the following naming of the post id name below

scrbbl-post{{id}}

Doing so will cause issues with the updating of content and will not correctly complete the onPollCompleteCallback call which updates the feed

 

…………………………………………………………………………………………………………………..

SDK Script Files:

Javascript

//embed.scribblelive.com/SDK/clientside/v1/ScribbleLiveSDKScripts.js.aspx

Base CSS

<link rel=”stylesheet” type=”text/css” href=”//embed.scribblelive.com/SDK/clientside/v1/ScribbleLiveSDKStyles.css.aspx” />

SDK Initialization

var scribbleLiveSDK = new SCRIBBLE.sdk.ScribbleLiveSDK(options);

SDK Options Object

Option

Definition
apitoken The ScribbleLive API token for your current client
clientid The ScribbleLive ClientID for the current stream you are trying to pull post data from
streamid The ScribbleLive StreamID that is being requested
postid (optional) The ScribbleLive PostID of a single post that is being requested (if set the streamid is ignored)
onPostAddedCallback Callback that is fired when a new post is added to the stream. This callback is called with every post that is already in the stream when the SDK is loaded.
Return Object:
{
post, //raw post data
renderedPost //jquery fully rendered post
}
onPostDeletedCallback Callback that is fired when a post is deleted
Return Object:
{
post, //raw post data
renderedPost //jquery fully rendered post
}
onPostEditCallback Callback that is fired when a post is updated
Return Object:
{
post, //raw post data
renderedPost //jquery fully rendered post
}
onPollCompleteCallback Callback fired when a poll update is completed. On First load the Object passed to this callback will contain the stream details
Return Object:
{
thread: {
details, //full thread details object
current, //current page
pages //total pages
}
//contains other Global settings…
}
render Object that holds render specific settings:{
autoRenderPosts: true,
stickyHolder: ‘#scrbbl-holder-stickies’, postHolder: ‘#scrbbl-holder-normal’, paginationHolder: ‘#paginationHolder’
}
templateOverride Array of formatting Template overrides
content Object that holds content specific settings:
{
postsOnLoad: 10
}
poll Object to override the api endpoints to hit
Social Embeds: Default is true for all of these which will include the Twitter widgets sdk, Facebook sdk and ScribbleLive post sdk (required for Instagram support)
Setting any of these to false will prevent the social embeds from loading.
These are to support the new social embeds in Content Studio (Twitter, Facebook and Instagram)
{
facebook: true, twitter: true, scribblelive: true
}

SDK Functions

Function

Definition
loadPageNumber(pageNumber) will load the provided page of posts based on the content.postsOnLoad page size.Page Numbers begin at index 0 for the first page and Total Pages – 1 for the last page
loadMore() Will load the next page of posts

 

…………………………………………………………………………………………………………………..

Template Overrides

Default Templates are found here:
http://embed.scribblelive.com/liveblog/display/sdk/js/templates.js.aspx

By providing a Template Override for any of the available templates will render the posts with that specific template

Template Name

Definition
post Full post html template
tweet Tweet post html template
facebook Facebook post html template
question Poll html template
meta.holder
meta.user
meta.avatar
meta.actions

…………………………………………………………………………………………………………………..

Basic Example

&amp;lt;html&amp;gt;
	&amp;lt;head&amp;gt;
	 	&amp;lt;title&amp;gt;Basic SDK Example&amp;lt;/title&amp;gt;
		&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;//embed.scribblelive.com/SDK/clientside/v1/ScribbleLiveSDKStyles.css.aspx&amp;quot; /&amp;gt;
	&amp;lt;/head&amp;gt;
 	&amp;lt;body&amp;gt;
		&amp;lt;form id=&amp;quot;form1&amp;quot; runat=&amp;quot;server&amp;quot;&amp;gt;
			&amp;lt;div&amp;gt;
			 	&amp;lt;h1&amp;gt;ScribbleLive SDK Basic Example&amp;lt;/h1&amp;gt;

				&amp;lt;h1&amp;gt;Stuck Posts&amp;lt;/h1&amp;gt;
				&amp;lt;ul id=&amp;quot;scrbbl-holder-stickies&amp;quot;&amp;gt;&amp;lt;/ul&amp;gt;

				&amp;lt;h1&amp;gt;Normal Posts&amp;lt;/h1&amp;gt;
				&amp;lt;ul id=&amp;quot;scrbbl-holder-normal&amp;quot;&amp;gt;&amp;lt;/ul&amp;gt;

				&amp;lt;div id=&amp;quot;paginationHolder&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;

				&amp;lt;input id=&amp;quot;btnLoadMore&amp;quot; type=&amp;quot;button&amp;quot; value=&amp;quot;Load More&amp;quot; /&amp;gt;
			&amp;lt;/div&amp;gt;

			&amp;lt;script src=&amp;quot;//embed.scribblelive.com/SDK/clientside/v1/ScribbleLiveSDKScripts.js.aspx&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;

			&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;

				var scribbleLiveSDK;

				jQuerySL(document).ready(function ()
				{
					var TemplateOverride = [];

					//TemplateOverride['post'] =
					// '&amp;lt;div id=&amp;quot;scrbbl-post{{id}}&amp;quot; class=&amp;quot;scrbbl-post scrbbl-post-type-{{type}}{{classes}}&amp;quot; data-post-type=&amp;quot;{{type}}&amp;quot; data-postid=&amp;quot;{{id}}&amp;quot;&amp;gt;' +
					// '&amp;lt;div class=&amp;quot;scrbbl-post-inner&amp;quot;&amp;gt;' +
					// '&amp;lt;ul class=&amp;quot;scrbbl-post-flags&amp;quot;&amp;gt;{{flags}}&amp;lt;/ul&amp;gt;' +
					// '&amp;lt;div class=&amp;quot;scrbbl-post-time&amp;quot;&amp;gt;{{time}}&amp;lt;/div&amp;gt;' +
					// '&amp;lt;div class=&amp;quot;scrbbl-post-content-area&amp;quot;&amp;gt;{{content}}&amp;lt;/div&amp;gt;' +
					// '&amp;lt;div class=&amp;quot;scrbbl-post-meta-area&amp;quot;&amp;gt;{{meta}}&amp;lt;/div&amp;gt;' +
					// '&amp;lt;/div&amp;gt;' +
					// '&amp;lt;/div&amp;gt;';

					scribbleLiveSDK = new SCRIBBLE.sdk.ScribbleLiveSDK({

						clientid: '&amp;lt;MyClientID&amp;gt;',
						apitoken: '&amp;lt;MyAPIToken&amp;gt;',
						streamid: '&amp;lt;MyStreamID&amp;gt;',
						onPostAddedCallback: OnPostAddedCallback,
						onPostDeletedCallback: OnPostDeletedCallback,
						onPostEditCallback: OnPostEditCallback,
						render: {
							autoRenderPosts: true,
							stickyHolder: '#scrbbl-holder-stickies',
							postHolder: '#scrbbl-holder-normal',
							paginationHolder: '#paginationHolder'
						},
						templateOverride: TemplateOverride,
						onPollCompleteCallback: OnPollCompleteCallback,
						content: {
							postsOnLoad: 10
						}
					});

					jQuerySL(&amp;quot;#btnLoadMore&amp;quot;).on(&amp;quot;click&amp;quot;, function () {
						scribbleLiveSDK.loadMore();
					});
				});

				function OnPostAddedCallback(postData)
				{
					//add post to dom
					if (postData.post.is.stuck) {
						jQuerySL(&amp;quot;#scrbbl-holder-stickies&amp;quot;).prepend(postData.renderedPost);
					}
					else {
						jQuerySL(&amp;quot;#scrbbl-holder-normal&amp;quot;).prepend(postData.renderedPost);
					}
				}

				function OnPostDeletedCallback(postData)
				{
					//post Deleted...
					postData.renderedPost.remove();
				}

				function OnPostEditCallback(postData)
				{
					//post Edit...
					var current = jQuerySL(&amp;quot;#scrbbl-post&amp;quot; + postData.post.id);
					current.replaceWith(postData.renderedPost);
				}

				function OnPollCompleteCallback(eventData)
				{
					var currentPage = eventData.thread.current;
					var totalPages = eventData.thread.pages;
					var pagerControl = &amp;quot;&amp;quot;;

					for (var i = 0; i &amp;lt; totalPages; i++) {
						pagerControl +=&amp;quot;&amp;lt;input type='button' value='Page &amp;quot; + (i+1) +&amp;quot;' onclick='LoadPage(&amp;quot; + i + &amp;quot;); return false;' /&amp;gt;&amp;quot;;
					}

					jQuerySL(&amp;quot;#paginationHolder&amp;quot;).html(pagerControl);
				}

				function LoadPage(pageNum)
				{
					jQuerySL(&amp;quot;#scrbbl-holder-normal&amp;quot;).html(&amp;quot;&amp;quot;);
					scribbleLiveSDK.loadPageNumber(pageNum);
				}
			&amp;lt;/script&amp;gt;
		&amp;lt;/form&amp;gt;
	&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;