¶ Setting up Actionables
Revision date: 08/jul/2022
Vizzi version: 1.12.0
Actionable are events that can be triggered while a video is playing on the frontend. With this feature, you can configure, for example, a button to be shown on the video page, a logo or icon to be displayed during video playback or some calls to the third-party application or endpoint.
¶ How to Create Actionables
First, go to the “Actionables” menu and click the “CREATE” button in the upper right corner of the screen. There, fill in the actionable name and configure it according to the types presented below:
Note: optionally, you can assign one or more audiences and products to which the actionable will appear. To do this, use the “Audiences” and “Products” fields respectively.
When choosing an actionable type, other fields will be presented. Let’s see below how to configure each of them:
¶ Overlay Type
Shows the specified content at the defined time within the video player. When configuring this type of actionable, fill in all the fields highlighted in the picture below:
- Start time: enter the actionable playback start time (in seconds);
- End time: enter the actionable playback end time (in seconds);
- Align: choose a position where the content will be displayed in the video. When choosing the “Custom” option you will need to enter the exact position as XY coordinates in pixels. The coordinate string takes the form of x-y where the top left corner of the video player is considered the 0-0 origin point. Observe in the image below the representation of points 0-0 and 10-20:
- Rich text editor: check this option if you want to format the text in the “Content” field;
- Content: enter the content that will be overlaid on the video. You can include simple text or HTML content (e.g. an image, third-party video player, etc). Bear in mind that HTML content is intended for simple widgets and must be carefully tested and validated.
¶ Generic Event Type
Triggers events that can be listened to by 3rd-party applications (e.g. custom frontend) as callback functions. To configure this type of actionable, fill in the start time and the configuration for triggering an external event, in the fields highlighted in the picture below:
¶ Go To Type
Used to display actionable buttons in the customer frontend that will navigate to the configured URL when clicked. For this type of actionable, enter the text button in the “Display text” field and the address in the “URL” field:
¶ Webhook Type
Triggers a webhook call (e.g to a 3rd-party endpoint). To configure a webhook, enter the URL of the endpoint to be called in the “URL” field:
To link actionable directly in VOD or Live, go to one of them and configure it in the “Actionables” tab.
When setting up VODs, if you want to define the point in the video where the actionable will start, set it in the “Cue Points” area and indicate the start time in seconds. Otherwise, it can be linked in the “Actionable” field.
Note: in cases where the actionable was configured with a start time and was also linked to a VOD with a different start point, the value of the VOD will prevail.
In live streams there is no concept of a timeline, so the actionable will always be linked by the “Actionable” field and will be triggered at the beginning of the broadcast. Therefore, in case it has to be triggered times after the start of the transmission, make sure that this configuration was made in the actionable item.
Let’s see in practice how this works:
In the image below, the following actionable has been configured:
1 - Goto, 2 - Overlay, 3 - Generic, 4 - Goto, and 5 - Webhook.
The image below represents the actionables in the frontend:
Note: the “Generic” type has no graphical representation either on the page or in the player.
For more details on how to configure an actionable, please refer to chapter Actionables.