Widget Modes

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>

📘

Timeline Mode Deprection

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

In interactive timeline mode,

• previously published widgets are displayed newest to oldest
• 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 customisable "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>

Integrator can also control the timer on widgets in the Intractable timeline using method overRideTimer

Integrators can pass their own custom timer value or use the value received from CMS in widgetPayload
(Note: widgetPayload.timeout should be converted into milliseconds before returning from this function)

The below code sample shows how we can implement a custom timer value in interactive-timeline.

const widgets = document.querySelector('livelike-widgets');
let send15sTimer = ({widget}) => 15000 //Timer value should be in milliseconds
widgets && (widgets.overRideTimer = send15sTimer);

Filtering Widgets

Integrators can filter published widgets from appearing on the timeline by using the following methods onInitialWidgetsLoaded and onMoreWidgetsLoaded
Integrators can also filter widgets coming from CMS in real-time by using method onWidgetReceived

The sample code below filters all Alert Widgets from being displayed

//For filtering old widgets (received from timeline resource)
const widgets = document.querySelector('livelike-widgets');
let filterAlertWidgets = ({widgets}) => widgets.filter(widget => widget.kind !== 'alert')
widgets && (widgets.onInitialWidgetsLoaded = filterAlertWidgets);
widgets && (widgets.onMoreWidgetsLoaded = filterAlertWidgets);

//For filtering new widgets (received from CMS via pubnub)
const widgets = document.querySelector('livelike-widgets');
let filterAlertWidgets = (widgetPayload) => widgetPayload.kind !== 'alert' && widgetPayload
widgets && (widgets.onWidgetReceived = filterAlertWidgets);

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