CarouselItemMessage

4min
Carousel item messages describe specific actions in the carousel domain that are either received from the context that LiSA is integrated in or sent by LiSA.
Message definition
The message target of an carousel item message is carousel.item.
A carousel item message contains a universally unique identifier of the carousel item assigned by LiSA, detailed information of the carousel item.
In case of a product item the message payload contains information relevant to opening the product’s PDP or quick view. Such as a unique product ID assigned by the customer’s ecommerce system, and/or a URL that either addresses the product’s PDP or contains a custom value to be processed by the embedding context.
TypeScript
interface CarouselItemMessage extends Message {
  readonly action: 'click' | 'close' | 'cta' | 'impression' | 'like.grant' | 'like.revoke';
  readonly additional: {
    /** Either a PDP URL or a custom value to act on */
    action?: string;
    /** The product origin ID in case of product item */
    id?: string;
    /** Indicator whether the event fired with the stream/recording playing or not. */
    playing?: boolean;
    /** The date of the current show in ISO 8601 format */
    showDate?: string;
    /** The identifier of the current show */
    showId?: UUID;
    /** The current state of the current show */
    showState?: ShowState;
    /** The title of the current show */
    showTitle?: string;
    /** Indicator whether media is playing */
    playing?: boolean;
    /** The current player time of a live stream or replay */
    time?: number;
  };
  /** Indicator whether it is the first occurrence of this message event */
  readonly first: boolean;
  readonly item: {
    /** Type of the carousel item. Optional for messages sent to LiSA. */
    data?: Banner | Product;
    /** LiSA internal ID of the carousel item */
    id: UUID;
    /** Detailed carousel item information */
    type: 'banner' | 'product';
  };
  readonly target: 'carousel.item';
}
interface CarouselItemMessage extends Message {
  readonly action: 'click' | 'close' | 'cta' | 'impression' | 'like.grant' | 'like.revoke';
  readonly additional: {
    /** Either a PDP URL or a custom value to act on */
    action?: string;
    /** The product origin ID in case of product item */
    id?: string;
    /** Indicator whether the event fired with the stream/recording playing or not. */
    playing?: boolean;
    /** The date of the current show in ISO 8601 format */
    showDate?: string;
    /** The identifier of the current show */
    showId?: UUID;
    /** The current state of the current show */
    showState?: ShowState;
    /** The title of the current show */
    showTitle?: string;
    /** Indicator whether media is playing */
    playing?: boolean;
    /** The current player time of a live stream or replay */
    time?: number;
  };
  /** Indicator whether it is the first occurrence of this message event */
  readonly first: boolean;
  readonly item: {
    /** Type of the carousel item. Optional for messages sent to LiSA. */
    data?: Banner | Product;
    /** LiSA internal ID of the carousel item */
    id: UUID;
    /** Detailed carousel item information */
    type: 'banner' | 'product';
  };
  readonly target: 'carousel.item';
}
﻿
Message actions
LiSA accepts/exposes the following carousel item actions:
Action
Description
Direction of communication
click
Viewer clicks an item in the carousel.
LiSA to X
close
Viewer closes a product detail page.
LiSA to X, X to LiSA
cta
Viewer clicks the carousel item CTA.
LiSA to X
impression
Carousel item appears in the visible view port.
LiSA to X
like.grant
Viewer clicks the carousel item like CTA.
LiSA to X, X to LiSA
like.revoke
Viewer un-clicks the carousel item like CTA.
LiSA to X, X to LiSA
Examples
Listed below are examples for carousel item event payloads.
JS
// LiSA notifies about a carousel item click interaction.
const payload = {
  action: 'click',
  additional: {
    action: 'https://...',
    id: '4711',
    showDate: '2013-06-21T06:30:00.000Z',
    showId: '8f6f7cc3-fc71-4d79-b131-add88c0233a7',
    showState: 'live',
    showTitle: 'Show title',
  },
  first: false,
  item: {
    data: {
      id: '03657395-15e6-4a09-a316-b6cb80a25b37',
      name: 'Product name',
      // ... other properties, e.g. price, url, stores, title, description
    },
    id: '03657395-15e6-4a09-a316-b6cb80a25b37',
    type: 'product',
  },
  sender: 'LiSA',
  target: 'carousel.item',
};
// LiSA notifies about a carousel item click interaction.
const payload = {
  action: 'click',
  additional: {
    action: 'https://...',
    id: '4711',
    showDate: '2013-06-21T06:30:00.000Z',
    showId: '8f6f7cc3-fc71-4d79-b131-add88c0233a7',
    showState: 'live',
    showTitle: 'Show title',
  },
  first: false,
  item: {
    data: {
      id: '03657395-15e6-4a09-a316-b6cb80a25b37',
      name: 'Product name',
      // ... other properties, e.g. price, url, stores, title, description
    },
    id: '03657395-15e6-4a09-a316-b6cb80a25b37',
    type: 'product',
  },
  sender: 'LiSA',
  target: 'carousel.item',
};
﻿
﻿
Action	Description	Direction of communication
click	Viewer clicks an item in the carousel.	LiSA to X
close	Viewer closes a product detail page.	LiSA to X, X to LiSA
cta	Viewer clicks the carousel item CTA.	LiSA to X
impression	Carousel item appears in the visible view port.	LiSA to X
like.grant	Viewer clicks the carousel item like CTA.	LiSA to X, X to LiSA
like.revoke	Viewer un-clicks the carousel item like CTA.	LiSA to X, X to LiSA
Updated 25 Mar 2024
Did this page help you?
AppMessage
CartMessage