| Mobile | Tablet | ||
|---|---|---|---|
This article introduces interactive widgets in DIVA.
Topics covered here:
- What are widgets?
- Do all of DIVA's player features support widgets?
- Are widgets customizable?
- How do widgets display?
What are widgets?
Widgets are independent software applications that appear as content. DIVA's video player supports Interactive widgets on Android and iOS native mobile (smartphone and tablet).
Widgets let people express their opinions, make predictions, vote, etc., on the content they’re consuming, which can help boost engagement.
Widgets are editorially driven by LiveLike, and, when enabled, are pushed to end users, displaying on top of Live or Live DVR content.
LiveLike editorially drives widgets and, when enabled, are pushed to end users, displaying on top of Live and Live DVR content. It's important to note that widgets are only visible when consuming Live DVR content if playback is at the live point.
The following widgets are available:
- Polls
- Image sliders
- Quizzes
- Predictions
- Cheer meters
- Alerts
Once interacted with, depending on the length of time the widget displays (set by an operator), when the countdown timer is reached, the widget state changes to reveal the results. Users can then dismiss the widget.
Typical use cases include:
- The widget appears before a penalty asking for predictions; the penalty is then taken, and the widget results are revealed.
- The widget appears during the build-up of a broadcasted political debate, revealing results at the end.
Do all of DIVA's player features support widgets?
No, not all player features support widgets. DIVA supports widgets on the following:
- Main player
- Multi-angle mode (coming soon)
Currently, widgets are not supported on the following DIVA features due to platform support and screen space restrictions:
- Modal
- 360° video
- Highlights mode
- Side-by-side (web)
Are widgets customizable?
Yes, all widgets are customizable, meaning the visual appearance is configurable to suit project needs.
We offer a downloadable Deltatre theme for projects to adapt or use as a starting point for customizations. Operators can modify this JSON file to specify visual properties such as color themes, backgrounds, borders, paddings, font styling, etc.
Specify properties per theme to apply to all widgets or create a unique theme per video ID using the livelikeProgramID attribute. This is especially useful if your platform hosts various events, as widgets can reflect branding.
How do widgets display?
Widgets display on the main video, even with the overlays panel open on tablet. For users switching to another video with enabled widgets, the widgets display automatically unless the video is modal, Side-by-side, or in Picture-in-Picture (PiP) mode.
The platform determines the appearance of widgets. Select an option below to learn more:
What are native apps?
Native apps refer to apps that have been built for a specific platform, in this case, Android and iOS on mobile and tablet. Native app UX/UI may differ from responsive sites.
Interacting with widgets
In portrait mode, widgets display beneath the video and on top of all other UI.
Widgets (mobile portrait):
In landscape mode, widgets display in the top-right corner of the screen. When player controls are present, the widget is presented below the UI, meaning users need to tap on the screen to remove player control from view or wait for player controls to fade out to interact with widgets.
Widgets (mobile landscape):
Can users dismiss widgets?
Yes, users can dismiss widgets within video playback. Dismissing a widget removes the particular widget from the UI, which is different from disabling (turning widgets off); learn more about disabling widgets.
To dismiss widgets, swipe left or right on Android; on iOS, swipe right on the widget.
Some widgets display a countdown timer, e.g., the cheer meter. Users can manually dismiss the widget during the countdown; alternatively, the widget auto-dismisses once the countdown timer ends.
Widget countdown timer:
Disabling widgets
If users dismiss two widgets in a row, users are asked if they wish to disable widgets for the rest of the video stream.
A confirmation message displays if the user chooses to disable widgets for the remainder of the current video.
Widgets are re-enabled upon loading another video into the player or re-loading the same video.
Re-enabling widgets
Users are asked if they want to reactivate widgets after switching to a new video with widgets enabled.
Widget animation
Animation refers to widgets appearing and disappearing; timing is configurable via LiveLike. Behavior is as follows for both portrait and landscape modes:
- Animation in: top-to-bottom
- Animation out (timeout): bottom-to-top
Note: LiveLike integrations are not currently supported on DIVA for Responsive mobile.
Widgets are unavailable on screens smaller than 900px wide.
What are responsive sites?
Websites that are responsive mean pages have been reformatted to reproduce the same experience on a desktop as on a mobile device, otherwise known as mobile-responsive. Responsive sites UX/UI may differ from native apps.
Interacting with widgets
Widgets (tablet):
In landscape mode, widgets display in the top-right corner of the screen within the video window.
When player controls are present, the widget is presented below the UI, meaning users need to tap on the screen to remove player control from view or wait for player controls to fade out to interact with widgets.
Can users dismiss widgets?
Yes, users can dismiss widgets within video playback. Dismissing a widget removes the particular widget from the UI, which is different from disabling (turning widgets off). Learn more about disabling widgets.
To dismiss widgets, swipe left or right on Android; on iOS, swipe right on the widget.
Some widgets display a countdown timer, e.g., the cheer meter. Users can manually dismiss the widget during the countdown; alternatively, the widget auto-dismisses once the countdown timer ends.
Widget countdown timer:
Disabling widgets
If users dismiss two widgets in a row, users are asked if they wish to disable widgets for the rest of the video stream.
A confirmation message displays if the user chooses to disable widgets for the remainder of the current video.
Widgets are re-enabled upon loading another video into the player or re-loading the same video.
Re-enabling widgets
Users are asked if they want to reactivate widgets after switching to a new video with widgets enabled.
Widget animation
Animation refers to widgets appearing and disappearing; timing is configurable via LiveLike. Behavior is as follows for both portrait and landscape modes:
- Animation in: top-to-bottom
- Animation out (timeout): bottom-to-top
Note: LiveLike integrations are not currently supported on DIVA for Responsive mobile.
Widgets are unavailable if browser windows are reduced smaller than 900px wide.
What are responsive sites?
Websites that are responsive mean pages have been reformatted to reproduce the same experience on a desktop as on a mobile device, otherwise known as mobile-responsive. Responsive sites UX/UI may differ from native apps.
Interacting with widgets
Widgets (desktop):
Widgets display in the top-right corner of the screen within the video window.
When player controls are present, the widget is presented below the UI, meaning users need to select anywhere on the screen to remove player controls from view or wait for player controls to fade out to interact with widgets.
Can users dismiss widgets?
Yes, users can dismiss widgets within video playback. Dismissing a widget removes the particular widget from the UI, which is different from disabling (turning widgets off). Learn more about disabling widgets.
To dismiss widgets, select the X icon on the top-right of the widget.
Some widgets display a countdown timer, e.g., the cheer meter. Users can manually dismiss the widget during the countdown; alternatively, the widget auto-dismisses once the countdown timer ends.
Widget countdown timer:
Disabling widgets
If users dismiss two widgets in a row, users are asked if they wish to disable widgets for the rest of the video stream.
A confirmation message displays if the user chooses to disable widgets for the remainder of the current video.
Widgets are re-enabled upon loading another video into the player or re-loading the same video.
Re-enabling widgets
Users are asked if they want to reactivate widgets after switching to a new video with widgets enabled.
Widget animation
Animation refers to widgets appearing and disappearing; timing is configurable via LiveLike.
For further insight and tips, read our creating an engaging fan experience opinion article.