The first step in a Widget's lifecycle is creation. To create a widget you will need to provide the content of the Widget as well as other data such as the Program it belongs to. Each widget has distinct content properties that must be provided but some properties are common between all Widgets.
After creating the Widget it is time to publish it or schedule it to be published later. When a widget is published it will be pushed out to users to be interacted with.
And then you're done!
The widget will remain available for users to see and interact with. If you'd like to delete a widget see below.
Permissions
To create, publish a widget with an application profile you should be a producer or have the permissions mentioned in the below table.
Widget
Create Widget Permission
Publish Widget Permission
Text Poll
create_text_poll
publish_text_poll
Image Poll
create_image_poll
publish_image_poll
Alert
create_alert
publish_alert
Create a Widget
Every widget has some common properties that are provided upon creation which can alter the behavior and uses of the widget.
Property
Description
Required
Program ID
The ID of the Program this Widget belongs to
Yes
Timeout
A hint for how long this Widget should be displayed for
No
Custom Data
A string of custom data used for custom use cases
No
Interactive Until
A date on which the widget can no longer be interacted with
No
Playback Time Milliseconds
A hint in milliseconds for when this Widget should be displayed during VOD playback
No
Widget Attributes
A set of custom key-value pairs used for custom use cases
No
Sponsor Ids
List of sponsor Ids to add to a widget
No
Alerts
Property
Description
Required
Title
An alert title
No
Text
The text of the alert
Yes
Image URL
The image of the alert
No
Link Label
The label of a link to the alert
No
Link URL
The link to the alert
No
LiveLike.createAlertWidget({
programId: '<program-id>',
text: '<alert text>',
title: '<alert title>',
imageUrl: '<imag-url>',
linkLabel: '<link-label>',
linkUrl: '<link-url>',
customData: '<stringified-custom-data-object>',
widgetAttributes: [{ key: '<attribute-key>', value: '<atribute-value>' }],
programDateTime: '<date-time-for-syncing-widget-with-video-timestamp>',
// video playback time for showing video on demand widget
playbackTimeMs: 2000,
// UI interactive timeout value
timeout: 'P0DT0H0M30S',
interactiveUntil: '<date-time>',
}).then((res) => console.log(res));
let livelike: LiveLike
livelike.widgetClient.createAlertWidget(
options: CreateAlertRequestOptions(
common: CommonCreateWidgetOptions(
programID: <program - id>
),
title: "<title>",
text: "<text>",
imageURL: <image - url>,
linkLabel: "<link-label>",
linkURL: <link - url>
),
completion: {
result
switch result {
case .success(let widget):
break
case .failure(let error):
break
}
}
)
For publishing a prediction result, either you can create a followup widget with correct option Id or you could update a prediction widget option to declare which option is correct, once option(s) are updated, you may then publish a prediction followup widget that would show the prediction result to your users.
Approach 1:
Create a follow-up widget
LiveLike.createPredictionFollowUpWidget({
widgetId: "<widget-id>",
// this could be LiveLike.WidgetKind.TEXT_PREDICTION or LiveLike.WidgetKind.IMAGE_PREDICTION
widgetKind: LiveLike.WidgetKind.TEXT_PREDICTION,
correctOptionId: "<option-id>",
sponsorIds: ["sponsor-id"]
}).then(res => console.log(res))
// for updating text prediction option
LiveLike.updateTextPredictionWidgetOption({
widgetId: "ec55d288-5e7d-43ce-83fb-768f98c6d8af",
optionId: "742abe83-0bb8-4825-9b93-bc26fadb48f9",
isCorrect: true,
// optional rewardItemId in case there an need to add reward
rewardItemId: "<reward-id>",
// optional rewardItemAmount in case there an need to add reward
rewardItemAmount: 30
}).then(res => console.log(res))
// for updating image prediction option
LiveLike.updateTextPredictionWidgetOption({
widgetId: "ec55d288-5e7d-43ce-83fb-768f98c6d8af",
optionId: "742abe83-0bb8-4825-9b93-bc26fadb48f9",
isCorrect: true,
// optional if image url needs to be updated
imageUrl: "<updated-image-url>"
// optional rewardItemId in case there an need to add reward
rewardItemId: "<reward-id>",
// optional rewardItemAmount in case there an need to add reward
rewardItemAmount: 30
}).then(res => console.log(res))
// Updating text prediction follow up option
livelike.widgetClient.updateTextPredictionFollowUpWidgetOption(
options: UpdateTextPredictionFollowUpRequestOptions(
predictionID: "prediction-id",
optionID: "prediction-option-id",
isCorrect: true
)
) { result in
...
}
// Updating image prediction follow up option
livelike.widgetClient.updateImagePredictionFollowUpWidgetOption(
options: UpdateImagePredictionFollowUpRequestOptions(
predictionID: "prediction-id",
optionID: "prediction-option-id",
isCorrect: true
)
) { result in
...
}
Publish Prediction FollowUp
Whenever a prediction widget is created, our backend service automatically creates a corresponding follow-up widget, you could get the follow-up widget id and follow-up widget kind from the prediction widget resource
For publishing a number prediction result, you could update each prediction widget option with correct number, once options are updated, you may then publish a prediction followup widget that would show the prediction result to your users.
Update Number Prediction option
LiveLike.updateImageNumberPredictionWidgetOption({
widgetId: "ec55d288-5e7d-43ce-83fb-768f98c6d8af",
optionId: "742abe83-0bb8-4825-9b93-bc26fadb48f9",
correctNumber: 10,
// optional if image url needs to be updated
imageUrl: "<updated-image-url>"
// optional rewardItemId in case there an need to add reward
rewardItemId: "<reward-id>",
// optional rewardItemAmount in case there an need to add reward
rewardItemAmount: 30
}).then(res => console.log(res))
self.livelike.widgetClient.updateNumberPredictionFollowUpOption(
options: UpdateNumberPredictionFollowUpOption(
predictionID: "prediction-id",
optionID: "prediction-option-id",
correctNumber: 10,
text: "new text",
imageUrl: <new-image-url>
)
) { result in
...
}
Publish Number Prediction FollowUp
Whenever a number prediction widget is created, our backend service automatically creates a corresponding followup widget, you could get the followup widget id and followup widget kind from number prediction widget resource
