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
  }
]

onRenderedStoryGroups Event

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

storylyWeb.init({    
  ...
  events: {
    onRenderedStoryGroups: (groups: Array) => {
      // Triggered when a Story Group is rendered.
      // console.log(groups: Array);
    }
  }
});

onRenderedStoryGroups 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.init({    
  ...
  events: {
    noStoryGroup: () => {
      // Triggered when there is no story group.
    }
  }
});

openStoryGroup Event

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

storylyWeb.init({    
  ...
  events: {
    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
}

onStoryShowFailed Event

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

storylyWeb.init({    
  ...
  events: {
    onStoryShowFailed: (errorMessage) => {
      // Triggered when Story Group or Story does not exist while opening Story programmatically.
    }
  }
});

closeStoryGroup Event

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

storylyWeb.init({    
  ...
  events: {
    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
}

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
}

onNextStory Event

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

storylyWeb.init({    
  ...
  events: {
    onNextStory: (story) => {
      // Triggered when the user proceeds to the next Story.
    }
  }
});

onNextStory 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

onNextStory 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.

onPreviousStory Event

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

storylyWeb.init({    
  ...
  events: {
    onPreviousStory: (story) => {
      // Triggered when the user proceeds to the previous Story.
    }
  }
});

onPreviousStory 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.

onNextStoryGroup Event

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

storylyWeb.init({    
  ...
  events: {
    onNextStoryGroup: (group) => {
      // Triggered when the user proceeds to the next Story Group.
    }
  }
});

onNextStoryGroup 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

onNextStoryGroup 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.

onPreviousStoryGroup Event

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

storylyWeb.init({    
  ...
  events: {
    onPreviousStoryGroup: (group) => {
      // Triggered when the user proceeds to the previous Story Group.
    }
  }
});

onPreviousStoryGroup 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

onPreviousStoryGroup event's gesture_type returns as clicked if the user proceeds to the previous Story Group with a click, also as swiped if the user proceeds with a back swipe.

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

actionClicked event returns the following response data:

{ 
  id: Integer
  title: 'String'
  seen: Boolean,
  index: Integer,
  group_id: Integer,
  media: {
    actionUrl: URL,
  },
}

🚧

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

onStoryImageQuizAnswered Event

An event that's fired when Image Quiz interactive is answered.

storylyWeb.init({    
  ...
  events: {
   onStoryImageQuizAnswered: (group) => {
      // Triggered when Image Quiz interactive is answered.
    }
  }
});

onStoryImageQuizAnswered event returns the following response data:

{
  story_id: Number,
  alt_text: String,
  icon_image_url: String,
  is_sharable: Boolean,
  track_id: String,
  title: String,
  questions: Array,
  images: Array,
  votes: Array,
  answer: Number,
  correct_answer: Number
}