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.
    }
  }
});