LiveLike

The LiveLike Developer Hub

Welcome to the LiveLike developer hub. You'll find comprehensive guides and documentation to help you start working with LiveLike as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

Widget Modes

Different ways of displaying and interacting with widgets

The livelike-widgets element has two built-in modes: the default pop-up mode, and the timeline mode. In pop-up mode, widgets appear for a limited time and then disappear. In timeline mode, a list of previously published widgets is loaded immediately, and then new widgets appear and stack up on top of older ones.

Popup Mode

Widgets appear for a limited time and then disappear. They are interactive until the timer animation runs out. It is typically used for live interactive experiences.

<!-- The mode attribute is optional and defaults to popup -->
<livelike-widgets programid="example-program-id" mode="pop-up">
</livelike-widgets>

Timeline Mode

Previously published widgets are displayed newest to oldest, and then new widgets appear above the old ones. New widgets act similarly to how they do in popup mode, where they are interactive for a limited time, but they do not disappear in timeline mode. Old widgets are not interactive. Each "page" of widgets in the timeline contain up to the 20 most recent widgets. If there are more than 20 past widgets available, there will be a customisable "Load More" button at the end of the widget list that will load up to the next 20 widgets at a time.

<livelike-widgets programid="example-program-id" mode="timeline">
</livelike-widgets>

Note: Timeline mode has been deprecated and its support will be removed from next major release. Integrators should prefer using Interactive Timeline for their integrations

Interactive Timeline Mode

Previously published widgets are displayed newest to oldest, and then new widgets appear above the old ones. All the widgets are interactive for infinite time. There is no timer attached to any of the widgets. Each "page" of widgets in the timeline contain up to the 20 most recent widgets. If there are more than 20 past widgets available, there will be a customizable "Load More" button at the end of the widget list that will load up to the next 20 widgets at a time.

Quiz Widgets
Quiz answers can be submitted by clicking on Vote button as there is no timer to initiate the answer submission
Slider Widgets
Slider votes an be submitted by clicking on Vote button as there is no timer to initiate the answer submission

<livelike-widgets programid="example-program-id" mode="interactive-timeline">
</livelike-widgets>

Adding timer for interactive-timeline

Timers can be added to widgets in interactive-timeline by using the overRideTimer hook

const widgets = document.querySelector('livelike-widgets');
let send15sTimer = ({widget}) => {return 15000;}
widgets && (widgets.overRideTimer = send15sTimer);

Filtering Widgets

Widgets can be filtered based on kind or any other property.
In this example we will filter all Cheer Meter Widgets from being displayed in the timeline.

const widgets = document.querySelector('livelike-widgets');
let filterCheerMeter = ({widgets}) => {return widgets.filter(widget => widget.kind !== 'cheer-meter')}
widgets && (widgets.didLoadInitialWidgets = filterCheerMeter);
widgets && (widgets.didLoadMoreWidgets = filterCheerMeter);

widgets && (widgets.onWidgetReceived = (widgetPayload) => {return widgetPayload.kind !== 'cheer-meter'? widgetPayload : null});

Showing a Loader

When the livelike-widgets element is loading, it will render a widgets-loading slot. To use this, you can add any element as a child of livelike-widgets with the slot="widgets-loading" attribute.

<livelike-widgets programid="example-program-id"  mode="timeline">
  <div slot="widgets-loading">Widgets loading...</div>
</livelike-widgets>

Timeline Widget Bylines

Timeline mode can be used to implement things like Live Blogs and pinned widgets. Optionally, the widget author and timestamp bylines can be displayed with each widget. The author is the name of the user that created the widget, and the timestamp is the time when the widget was posted. One or both can be used, and it's as simple as adding them as attributes to the <livelike-widgets> element.

<livelike-widgets programid="example-program-id" mode="timeline" authors timestamps></livelike-widgets>

Here is an example of the timeline mode with the bylines enabled.

Custom Mode Creation

If you need finer control over the widget lifecycle, a custom mode can be created using the registerWidgetMode method

The registerWidgetMode method's first argument is a string, the name of the mode to be used as the mode attribute on the livelike-widgets element, and the second argument is a function that has the widgetPayload object as an argument, and should return the widget lifecycle changes.

Below is an example of how to create your own timeline mode using the available methods.

Custom timeline mode

Updated about a month ago


Widget Modes


Different ways of displaying and interacting with widgets

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.