Adding Live Center
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
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.
- Systems for analytics of content.
|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.|
|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.|
|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:
|channelRenderers||No|| Array of NcPosts.ChannelRenderer to be used for rendering channel content on top of the feed. Defaults to:
|extraPostRenderers||No||Additional post renderers to append to the postRenderers.|
|extraInlineRenderers||No||Additional inline renderers to append to the inlineRenderers.|
|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.
|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).|
Our iframe solutions are based on the convenience function described above. If your company wants a custom iframe contact us at firstname.lastname@example.org or build your own implementation using the convenience function.
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…”.
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.