StreamShop Event Listener

This page describes how you can use the StreamShop event listener to get data from your iframe.

streamshopListener Function Documentation

The streamshopListener function allows developers to listen to specific events within the page, enabling them to trigger actions based on these events.

Before using

Before using, you need to set the parameter on the live iframe.
Using sdk (SDK docs) :

HTML

<!-- Add the use-post-message parameter -->
<liveshop-ads slug-video="ABCDEF" use-post-message="true"></liveshop-ads>

Using iframe:

HTML

<!-- Add the usePostMessage parameter -->
<iframe src="https://yourlive.com?usePostMessage=true" allow="fullscreen; autoplay; playsinline; picture-in-picture"></iframe>

Usage Example

Include the StreamShop SDK in your HTML:

HTML

<script async src="https://assets.streamshop.com.br/sdk/liveshop-web-sdk.min.js" onload="streamShopLoaded()"></script>
<script>
  streamShopLoaded = () => {
    streamshopListener('openProductUrl', (event) => console.log('OpenProductUrl', event));
  };
</script>

 

Event Types

The streamshopListener function supports the following event types (enum):

TypeScript

enum PostMessageTypeEnum {
  OpenProductUrl = 'openProductUrl',
  OpenProductDetail = 'openProductDetail',
  AddToCart = 'addProductToCart',
  VideoLoaded = 'videoLoaded',
  Unmute = 'Unmute',
  RemoveFromCart = 'removeFromCart',
  Checkout = 'checkout',
  ShareVideo = 'shareVideo',
  CategoryExternalUrl = 'categoryExternalUrl',
  PipOpen = 'pipOpen',
  PipClosed = 'pipClosed',

  // These events below is about our Liveshop SDK Widget
  SwipeNext = 'next',
  SwipePrevious = 'previous',
  None = 'none',
  LiveshopAdsOpen = 'LiveshopAdsOpen'
}

Event Data Structures

Each event type returns specific data. Below are the interfaces used:

OpenProductUrl and OpenProductDetail Event

TypeScript

interface Product {
  id: string;
  productId?: string;
  sku: string;
  name: string;
  price?: number;
  url?: string;
}

CartItem interface, used in AddToCart, RemoveFromCart and Checkout events

TypeScript

interface CartItem {
  product?: Product;
  selectedItem?: Product;
  quantity: number;
}

AddToCart

TypeScript

interface AddToCart {
	cartItem: CartItem;
	addedQuantity: number;
}

RemoveFromCart

TypeScript

interface RemoveFromCart {
	cartItem: CartItem;
	removedQuantity: number;
}

Checkout

This event returns a array of CartItem.

Alternative: Using postMessage Directly

If integrating the StreamShop SDK is not feasible (e.g., in native apps), developers can still receive events using standard JavaScript postMessage.

TypeScript

window.addEventListener(
  'message',
  (event: MessageEvent<StreamShopEvent>) => {
    if (event.data?.from !== 'STREAMSHOP' || event.data?.action !== eventType) return;

    console.log(event.data);
  },
  false
);

Interface for StreamShop Events

To handle events received via postMessage, use the following interface to define the expected structure of the event data:

TypeScript

interface StreamShopEvent {
  from: 'STREAMSHOP';
  action: PostMessageTypeEnum;
  data: any; // Adjust `any` based on the expected data structure for each action
}

This approach allows developers to listen for specific StreamShop events directly within their applications, providing flexibility in integrating StreamShop functionality where the SDK cannot be utilized.