Adding Live Center

Implementation

Live Center offers many different options for how to implement a live feed and high levels of flexibility of how a feed is rendered and shown on your website. Beyond choosing between an iframe object or using the JavaScript library, you have full control over your feed to include just the functionality you need. This provides the benefit of a fast loading feed, resulting in the best user experience for your readers.

The Live Center JavaScript client library (NcPosts) is made modular, allowing you to use only the features you need, and take full control of the rendering. If you need a more flexible solution to allow you to customize your live feed to your specific needs, you can easily do so by choosing a more “bare metal” and scaled implementation. Correspondingly, if you instead want a plug-and-play solution, Live Center can be implemented with a more standardized format.

Below are a few examples of implementation alternatives to illustrate the flexibility of the solutionTo view a live implementation example for each alternative, click the header

  • 1.       Data access
  • Data access library to get just the content of each post. This allows you to do the post and channel design, rendering, and formatting manually. This is a great alternative if a feed is to be reused in another system, or published through an app where you want more control over rendering.
  • 2.       Streaming data + extended rendering + server-side rendering + convenience functions
  • This alternative is in most situations the preferred implementation option. This implementation comes with a formatted design and behavior to provide an out-of-the-box solution. This alternative is a great alternative if you want the solution itself to take care of the implementation and you want to focus on creating great content.
  • 3.       Iframe
  • Live feeds can also be implemented as framed objects with either automatic of manual size adjustments. An iframe allows the same features and functionality as the JavaScript library, but offers less customizability in how the live feeds design.

Data Access

Data access utilizes the API endpoints described in the NC Live Center Public API document. For situations when one would want pure data from the Live Center. Examples of situations:

  •          Server rendering of posts.
  •          Platforms with no JavaScript or HTML engine, such as a mobile application or embedded systems.
  •          Systems for analytics of content.

Convenience functions

The convenience function is a wrapper for the JavaScript code needed to create and populate a Live Feed. The method made for convenience is called “start” on the “NcPost” namespace. It takes an option object and returns a control object.

Options object

Property name Required? Description
channelId Yes The ID of the channel to connect to.
Container Yes The HTML element to render the channel in.
tenantKey No The key for accessing your resources. Provided by Norkon.
baseUrl No The base URL of the backend service to connect to.
httpService No The HTTP service used to make HTTP requests. Usually axios, angulars $http or equivalent. Needs to support get and post functions that will return promises.
backendService No The backend service that will be used to get live center posts. Defaults to NcCore.StandardBackendService using the httpService with the baseUrl, unwrapping "success" objects from the live center backend.
bulletinProvider No The bulletin provider to get bulletins from. Defaults to NcPosts.BulletinProvider using the backendService.
enableWebSockets No Whether web sockets should be enabled. Defaults to false.
webSocketProvider No The websocket provider to stream websockets from. Defaults to NcPosts.BulletinWebSocketProvider using the baseUrl.
pollingInterval No The polling interval in milliseconds used for HTTP polling. Defaults to 5000ms.
pinning No Whether pinning is enabled. Defaults to true.
updating No Whether it should be checked for updates to the stream or not. Default to true.
updatingUntil No If specified, the stream will not start updating if the current client time is higher than the specified date. Needs to be a standard JavaScript date.
showMoreElement No HTML element that a function for loading more posts will be attached to on click. The element will be hidden or shown with "display: inline-block" and hidden with "display: none"
showLessElement No HTML element that a function for showing less posts will be attached to on click, if there are more than 10 visible posts. Same visibility management as showMoreElement.
tagCallback No Function that if set will be called when a tag is clicked. The tags will be formatted with the class "ncpost-tag-clickable" to indicate that it is clickable.
dateFormatter No Function that takes a JavaScript date and returns a string. Defaults to d.toLocaleDateString() + ", " + d.toLocaleTimeString()
twttr No The twitter widget object. Needs to be passed explicitly.
postRenderers No Array of NcPosts.PostRenderer to be used for rendering post contents. Defaults to:
  •          NcPosts.HeaderRenderer
  •          NcPosts.TitleRenderer
  •          NcPosts.ExtendedContentRenderer (with NcPosts.YouTubeInlineRenderer, NcPosts.ImageInlineRenderer, NcPosts.CustomInlineRenderer, and NcPosts.TweetInlineRenderer)
  •          NcPosts.LinkCardRenderer
  •          NcPosts.ImageRenderer
  •          NcPosts.SvgArrowRenderer
  •          NcPosts.TagsAndQuantsRenderer
  •          NcPosts.CommentsRenderer (if present)

In addition to postRenderers and inlineRenderers from extensions, defined in extensionContainer.
channelRenderers No Array of NcPosts.ChannelRenderer to be used for rendering channel content on top of the feed. Defaults to:
  •          NcPosts.QuestionRenderer (if present)

In addition to channelRenderers from extensions, defined in extensionContainer.
extraPostRenderers No Additional post renderers to append to the postRenderers.
extraInlineRenderers No Additional inline renderers to append to the inlineRenderers.
extensionContainer No The JavaScript object describing the extensions, usually provided by the live center backend.
preRenderData No Function called every time there is a change in rendering.
renderChange No Function called every time there is a change in rendering.
postAdded No Function called every time a post is added. Passes the post object.
initialDataLoaded No Function called once the initial data is loaded. Passes the initial server data.
channelStatusChanged No Function called every time the channel status changes. Passes an object with two properties: "hasMore" (boolean) and "postCount" (number).
channelContentChanged No Function called every time the channel content is changed. Passes the channel content as the first parameter.


Control object

Property name Description
channelId The active live center channel ID.
bulletinProvider The bulletin provider used to get bulletins over HTTP.
listManager The list manager used to manage the list of posts.
loadMore Function that will load the next posts in the channel. Returns a promise.
showLatest Function that will truncate the list to display the latest 10 posts.
dispose Stops streaming from the backend (WebSockets or HTTP polling).

Iframe

The iframe solution provided is based on a sequence of JavaScript code that will create a dynamically sized iframe. The code needed is provided in the Live Center Channel under “Tools” and “Embed” on the left hand side of the page. The code will refer to the selected channel, and comes in two variations “default” and “white”. The two variations describe the background of the embedded Live Feed.

Our iframe solutions are based on the convenience function described above. If your company wants a custom iframe contact us at contact@norkon.net or build your own implementation using the convenience function.


Example HTML and JavaScript implementation

The provided JavaScript is included where one would want to have the iframe inserted. In this example it is added underneath the H3-tag saying “The live blog iframe will be inserted below this H3 element”.
Also worth noting is that the Live-feed has a default max-width of 700px. It will adjust to any size under this.

Beneath is the visual result of the code described above. The live blog iframe is inserted below the title “The live blog iframe…”.


Example JavaScript implementation

An example of a JavaScript implementation containing our standard CSS, JS, and default themes can be downloaded below. The included files can be used as a starting point for a customized implementation and modified at will. Contact us if you need help or input on how to adapt or modify your implementation.

Live-Center-211019.html


Iframe implementation

Inside the editor, you will see a section at the bottom of the left-hand side called Embed which when expanded will give you options for different live blog designs.

Each design skin can be freely used to create a different look and feel for your live blog.

To see how the feed will look for your readers, simply select a skin and a Preview will be rendered below. To see a full version of the skin, follow the  Open link which will open a new tab in your browser to show you the preview of that embed option.

When you have found a skin you want to use, copy the code in the Script area

You also have the option to embed the channel as a JavaScript object which will allow more freedom in how you design your channel and give your readers a better user experience through faster loading and crisper engagement.

Or us at contact@norkon.net for details on our JavaScript library and how to set up a custom live blog.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? How can we help? How can we help?