🚧

Warning

That documentation for Storyly SDK 3.0 and over. If you are using Storyly Web SDK 2.x.x and lower, you should follow through with that documentation.

Interactive Events

This guide shows you how to get reactions of users from specific interactive components. You can use the following function to get reactions of your users:

 storylyWeb.on('userInteracted', (data) => {
    	console.log(data); // Includes story, storyGroup, storyComponent fields.
    });

StoryComponent parameter informs your application about the interacted component and the details of the interaction. For instance, if a user answers a quiz, the payload will include what the right answer is and what the user's answer is. The structure of StoryComponent is different for each of the interactive components.

🚧

Warning

This event only notifies your application about Emoji, Rating, Poll, Quiz, and Countdown reactions.

Storyly Events

This section shows you how to observe Storyly's basic functionality events. In order to get notification about these basic events. You can use the following function of storylyWeb.on to redirect the Storyly events to your data platform.

userEvent

An event that’s fired when the user sees a story. You can get the events such as impression, reach, etc. under that event.

storylyWeb.on('userEvent', (data) => {
    	console.log(data);
    });

renderedStoryGroups Event

An event that’s fired when a Story Group is rendered on the screen.

storylyWeb.on('renderedStoryGroups', (groups: Array) => {
  // Triggered when a Story Group is rendered.
   console.log(groups: Array);
    });

renderedStoryGroups event returns the following response data in an array for each Story Group that is rendered:

[
  {
    group_id: Number,
    icon_image_url: String,
    media_host: String,
    order: Number,
    pinned: Boolean
    stories: Array,
    title: String
  }
]

noStoryGroup Event

This event will let you know that there is no Story Group.

storylyWeb.on('noStoryGroup', () => {
      // Triggered when there is no story group.
    });

openStoryGroup Event

An event that’s fired when a Story Group icon is clicked.

storylyWeb.on('openStoryGroup', (group) => {
      // Triggered when clicked a story group.
       console.log(group);
    });

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
}

storyOpenFailed Event

An event that’s fired when the Story or Story Group could be not opened programmatically.

storylyWeb.on('storyOpenFailed', (errorMessage) => {
      //Triggered when Story Group or Story does not exist while opening Story programmatically.
       console.log(errorMessage);
    });

closeStoryGroup Event

An event that’s fired when a Story Group is closed.

storylyWeb.on('closeStoryGroup', (group) => {
      //Triggered when closed story group.
       console.log(group);
    });

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
}

storyViewed Event

An event that’s fired when a Story is viewed.

storylyWeb.on('storyViewed', (story) => {
      //Triggered when a story is viewed.
       console.log(story);
    });

storyViewed event returns the following response data:

{
  group: groupData,
  story_id: Number,
  media: URL,
  index: Number,
}

groupData returns exactly same with the CloseStoryGroup.

storyGroupViewed Event

An event that’s fired when the user changes Story Group while watching.

storylyWeb.on('storyGroupViewed', (group) => {
      //Triggered when the user changes Story Group while watching.
       console.log(group);
    });

storyGroupViewed event returns the following response data:

{
  group_id: Number,
  icon_image_url: String,
  media_host: String,
  order: Number,
  pinned: Boolean
  stories: Array,
  title: String
}

nextStory Event

An event that’s fired when the user proceeds to the next Story.

storylyWeb.on('nextStory', (story) => {
      //Triggered when the user proceeds to the next Story.
       console.log(story);
    });

nextStory event returns the following response data:

{
  group: groupData,
  gesture_type: clicked | progress,
  story_id: Number,
  media: URL,
  index: Number,
}

groupData returns exactly same with the CloseStoryGroup.

📘

Tip

nextStory event's gesture_type returns as clicked if the user proceeds to the next Story with a click.

If the Story is proceeded by itself without any action (click) from the user, gesture_type returns as progress.

previousStory Event

An event that’s fired when the user proceeds to the previous Story.

storylyWeb.on('previousStory', (story) => {
      //Triggered when the user proceeds to the previous Story.
       console.log(story);
    });

previousStory event returns the following response data:

{
  group: groupData,
  gesture_type: clicked,
  story_id: Number,
  media: URL,
  index: Number,
}

groupData returns exactly same with the CloseStoryGroup.

nextStoryGroup Event

An event that’s fired when the user proceeds to the next Story Group.

storylyWeb.on('nextStoryGroup', (group) => {
      //Triggered when the user proceeds to the next Story Group.
       console.log(group);
    });

nextStoryGroup event returns the following response data:

{
  group_id: Number,
  gesture_type: clicked | swiped | progress,
  icon_image_url: String,
  media_host: String,
  order: Number,
  pinned: Boolean
  stories: Array,
  title: String
}

📘

Tip

nextStoryGroup event's gesture_type returns as clicked if the user proceeds to the next Story Group with a click, also as swiped if the user proceeds with a forward swipe.

If the Story Group is proceeded by itself without any action (click) from the user, gesture_type returns as progress.

previousStoryGroup Event

An event that’s fired when the user proceeds to the previous Story Group.

storylyWeb.on('previousStoryGroup', (group) => {
      //Triggered when the user proceeds to the previous Story Group.
       console.log(group);
    });

previousStoryGroup event returns the following response data:

{
  group_id: Number,
  gesture_type: clicked | swiped,
  icon_image_url: String,
  media_host: String,
  order: Number,
  pinned: Boolean
  stories: Array,
  title: String
}

📘

Tip

previousStoryGroupevent'sgesture_typereturns asclickedif the user proceeds to the previous Story Group with a click, also asswiped\ if the user proceeds with a back swipe.

productTagExpanded Event

An event that's fired when Product Tag icon is clicked.

storylyWeb.on('productTagExpanded', (group) => {
      //Triggered when clicked Product Tag Icon.
       console.log(group);
    });

productTagExpanded event returns the following response data:

{
  id: Number,
  productTagId: String(uid),
  title: String (Product Tag Title)
  seen: Boolean,
  index: Number,
  actionUrl: String (Your action URL here),
};

productTagClicked Event

An event that's fired when Product Tag tooltip is clicked.

storylyWeb.on('productTagClicked', (group) => {
      //Triggered when clicked Product Tag Tooltip.
       console.log(group);
    });

productTagClicked event returns the following response data:

{
  id: Number,
  productTagId: String(uid),
  title: String (Product Tag Title)
  seen: Boolean,
  index: Number,
  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.