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

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

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