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:
…………………………………………………………………………………………………………………..
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 post html template | |
| question | Poll html template |
| meta.holder | |
| meta.user | |
| meta.avatar | |
| meta.actions |
…………………………………………………………………………………………………………………..
Basic Example
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Basic SDK Example&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;//embed.scribblelive.com/SDK/clientside/v1/ScribbleLiveSDKStyles.css.aspx&quot; /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form id=&quot;form1&quot; runat=&quot;server&quot;&gt;
&lt;div&gt;
&lt;h1&gt;ScribbleLive SDK Basic Example&lt;/h1&gt;
&lt;h1&gt;Stuck Posts&lt;/h1&gt;
&lt;ul id=&quot;scrbbl-holder-stickies&quot;&gt;&lt;/ul&gt;
&lt;h1&gt;Normal Posts&lt;/h1&gt;
&lt;ul id=&quot;scrbbl-holder-normal&quot;&gt;&lt;/ul&gt;
&lt;div id=&quot;paginationHolder&quot;&gt;&lt;/div&gt;
&lt;input id=&quot;btnLoadMore&quot; type=&quot;button&quot; value=&quot;Load More&quot; /&gt;
&lt;/div&gt;
&lt;script src=&quot;//embed.scribblelive.com/SDK/clientside/v1/ScribbleLiveSDKScripts.js.aspx&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
var scribbleLiveSDK;
jQuerySL(document).ready(function ()
{
var TemplateOverride = [];
//TemplateOverride['post'] =
// '&lt;div id=&quot;scrbbl-post{{id}}&quot; class=&quot;scrbbl-post scrbbl-post-type-{{type}}{{classes}}&quot; data-post-type=&quot;{{type}}&quot; data-postid=&quot;{{id}}&quot;&gt;' +
// '&lt;div class=&quot;scrbbl-post-inner&quot;&gt;' +
// '&lt;ul class=&quot;scrbbl-post-flags&quot;&gt;{{flags}}&lt;/ul&gt;' +
// '&lt;div class=&quot;scrbbl-post-time&quot;&gt;{{time}}&lt;/div&gt;' +
// '&lt;div class=&quot;scrbbl-post-content-area&quot;&gt;{{content}}&lt;/div&gt;' +
// '&lt;div class=&quot;scrbbl-post-meta-area&quot;&gt;{{meta}}&lt;/div&gt;' +
// '&lt;/div&gt;' +
// '&lt;/div&gt;';
scribbleLiveSDK = new SCRIBBLE.sdk.ScribbleLiveSDK({
clientid: '&lt;MyClientID&gt;',
apitoken: '&lt;MyAPIToken&gt;',
streamid: '&lt;MyStreamID&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(&quot;#btnLoadMore&quot;).on(&quot;click&quot;, function () {
scribbleLiveSDK.loadMore();
});
});
function OnPostAddedCallback(postData)
{
//add post to dom
if (postData.post.is.stuck) {
jQuerySL(&quot;#scrbbl-holder-stickies&quot;).prepend(postData.renderedPost);
}
else {
jQuerySL(&quot;#scrbbl-holder-normal&quot;).prepend(postData.renderedPost);
}
}
function OnPostDeletedCallback(postData)
{
//post Deleted...
postData.renderedPost.remove();
}
function OnPostEditCallback(postData)
{
//post Edit...
var current = jQuerySL(&quot;#scrbbl-post&quot; + postData.post.id);
current.replaceWith(postData.renderedPost);
}
function OnPollCompleteCallback(eventData)
{
var currentPage = eventData.thread.current;
var totalPages = eventData.thread.pages;
var pagerControl = &quot;&quot;;
for (var i = 0; i &lt; totalPages; i++) {
pagerControl +=&quot;&lt;input type='button' value='Page &quot; + (i+1) +&quot;' onclick='LoadPage(&quot; + i + &quot;); return false;' /&gt;&quot;;
}
jQuerySL(&quot;#paginationHolder&quot;).html(pagerControl);
}
function LoadPage(pageNum)
{
jQuerySL(&quot;#scrbbl-holder-normal&quot;).html(&quot;&quot;);
scribbleLiveSDK.loadPageNumber(pageNum);
}
&lt;/script&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
