1. Technical
  2. Adding Live Center

Introduction

Integrating the Live Center feed into your website is a straightforward process with multiple implementation options to choose from

You can embed Live Center feeds using an iframe, an embed script, or by implementing our core libraries with JavaScript.

Depending on your specific needs and technical expertise, you can select the most suitable option to create a seamless and engaging live-blogging experience for your website visitors.

 

1. Data only 👩‍💻

This script provides an example of how you can utilize data access libraries that receive posts from a server via HTTP, to retrieve raw data and create and customize data rendering scripts yourself.

2. Data and post rendering 💻

Building upon the "Data Only" example, this script utilizes our JavaScript libraries to retrieve posts from a server via HTTP and render them using a list of post renderers from our library (you also have the freedom to manipulate and display the data as you want). This example will demonstrate how to effectively handle and display the list of posts in real-time, utilizing interval polling for continuous updates.

3. Data and custom post rendering 👩‍🏭

This script provides an example of how to create custom post renderers displaying live blog content that updates posts from a server via HTTP. With this implementation, you have complete control over how the posts are displayed, enabling them to create rich and dynamic content on their web pages. By customizing the post renderers, you can provide a unique user experience and keep readers engaged with real-time updates.

4. Streaming and extended rendering 👩‍🔧

This is a JavaScript implementation for displaying live blog content from a server via HTTP and WebSockets. It uses the NcPosts library to create posts and inline renderers to display content in a customizable way. The script fetches data from the server, displays it in the container, and allows users to load more posts with a click of a button. It also supports extensions for further customization.

5. Streaming, extended rendering, server-side rendering, and convenience functions 👌

This is the most used JS implementation we have. This sample convenience method takes care of the setup code that was stated in the previous documentation. For most projects, this is the preferred approach for including live feeds on your pages, but in cases, you need more control of the rendering you can go down a level or two. This also tackles CDN outage protection so you keep your live blog safe even when CDN resources are down ⚡

6. AMP-enabled iframe 🌐

This script demonstrates how using an AMP-enabled iframe can enhance the delivery of high-quality, dynamic live blog content to your readers in a fast, secure, and consistent manner. By using an AMP-enabled iframe, every post and update of the live feed will get indexed by Google, improving your website's visibility and search engine ranking. Overall, the use of AMP technology can provide a better user experience for your readers while also increasing the visibility and reach of your live blog content.

6. iframe 🖼

Don't want to dive into JS implementations? The most convenient alternative is to render the whole feed in an iframe.

At Live Center, we are committed to providing our customers with the best access and flexibility to use our platform and resources to keep your live blog up and running smoothly. We hope this information has been helpful in getting you started with Live Center and setting up your live blog today! ✨