Storyly Events
Storyly Event Handling
This guide shows you how to handle Storyly events in your website. Storyly events provide insight on what is happening on Storyly.
Before you begin
You need to have the working Storyly integration as described in Initial Web SDK Setup.
isReady Event
An event that’s fired when Storyly is ready.
storylyWeb.init({
...
events: {
isReady: (data) => {
console.log(data);
// Triggered when story is ready.
}
}
...
});
isReady
event returns the following response data:
[
{
title: String,
image: URL,
pinned: Boolean,
id: Number
}
]
NoStoryGroup Event
This event will let you know that there is no Story Group.
storylyWeb.init({
...
events: {
noStoryGroup: () => {
// Triggered when there is no story group.
}
}
});
OpenStoryGroup Event
An event that’s fired when a Story Group icon is clicked.
openStoryGroup
event returns the following response data:
{
group_id: Number,
icon_image_url: String,
media_host: String,
order: Number,
pinned: Boolean
stories: Array,
title: String
}
storylyWeb.init({
...
events: {
openStoryGroup: (group) => {
// Triggered when clicked a story group.
// console.log(group);
}
}
});
CloseStoryGroup Event
An event that’s fired when a Story Group is closed.
closeStoryGroup
event returns the following response data:
{
group_id: Number,
icon_image_url: String,
media_host: String,
order: Number,
pinned: Boolean
stories: Array,
title: String
}
storylyWeb.init({
...
events: {
closeStoryGroup: (group) => {
// Triggered when closed story group.
// console.log(group);
}
}
});
onStoryViewed Event
An event that’s fired when a Story is viewed.
storylyWeb.init({
...
events: {
onStoryViewed: (story) => {
// Triggered when a story is viewed.
}
}
});
onStoryViewed
event returns the following response data:
{
group: groupData,
story_id: Number,
media: URL,
index: Number,
}
groupData
returns exactly same with the CloseStoryGroup
.
onStoryGroupViewed Event
An event that’s fired when the user changes Story Group while watching.
storylyWeb.init({
...
events: {
onStoryGroupViewed: (group) => {
// Triggered when the user changes Story Group while watching.
}
}
});
onStoryGroupViewed
event returns the following response data:
{
group_id: Number,
icon_image_url: String,
media_host: String,
order: Number,
pinned: Boolean
stories: Array,
title: String
}
Storyly Interactive Components' Events
ActionClicked Event
An event that’s fired when Swipe Up
or Action Button
is clicked.
storylyWeb.init({
...
events: {
actionClicked: (story) => {
// Triggered when clicked Swipe Up or Action Button.
}
}
});
Warning
If you're going to use
actionClicked
event, you need to handle the URL redirection.
ProductTagExpanded Event
An event that's fired when Product Tag
icon is clicked.
storylyWeb.init({
...
events: {
productTagExpanded: (group) => {
// Triggered when clicked Product Tag Icon.
}
}
});
productTagExpanded
event returns the following response data:
{
id: Number,
productTagId: String(uid),
title: String (Product Tag Title)
seen: Boolean,
index: Number,
media: {
actionUrl: String (Your action URL here),
},
};
ProductTagClicked Event
An event that's fired when Product Tag
tooltip is clicked.
storylyWeb.init({
...
events: {
productTagClicked: (group) => {
// Triggered when clicked Product Tag Tooltip.
}
}
});
productTagClicked
event returns the following response data:
{
id: Number,
productTagId: String(uid),
title: String (Product Tag Title)
seen: Boolean,
index: Number,
media: {
actionUrl: String (Your action URL here),
},
};
Warning
If you're going to use
productTagClicked
event, you need to handle the URL redirection.
Tip
All of the Interactive Component related events given below returns Story Group, Story information with the available answers and the answer user gave depending on the Interactive included in the Story.
onStoryPollAnswered Event
An event that's fired when Poll
interactive is answered.
storylyWeb.init({
...
events: {
onStoryPollAnswered: (group) => {
// Triggered when Poll interactive is answered.
}
}
});
onStoryQuizAnswered Event
An event that's fired when Quiz
interactive is answered.
storylyWeb.init({
...
events: {
onStoryQuizAnswered: (group) => {
// Triggered when Quiz interactive is answered.
}
}
});
onStoryReactionAnswered Event
An event that's fired when Emoji Reaction
interactive is answered.
storylyWeb.init({
...
events: {
onStoryReactionAnswered: (group) => {
// Triggered when Emoji Reaction interactive is answered.
}
}
});
onStoryQuestionAnswered Event
An event that's fired when Question
interactive is answered.
storylyWeb.init({
...
events: {
onStoryQuestionAnswered: (group) => {
// Triggered when Question interactive is answered.
}
}
});
onStoryRatingAnswered Event
An event that's fired when Rating
interactive is answered.
storylyWeb.init({
...
events: {
onStoryRatingAnswered: (group) => {
// Triggered when Rating interactive is answered.
}
}
});
Updated about 1 month ago