@livuvo/live-sdk

Interactify Live Service Documentation

Introduction

Welcome to the documentation for the @livuvo/live-sdk library. This library facilitates seamless integration of your React application with the Interactify live service. The provided LivuvoLiveSDK component enables you to connect to Interactify server and render Live and Chat features.

Installation

You can install this package using npm:

npm install @livuvo/live-sdk

or yarn:

yarn add @livuvo/live-sdk

Usage

follow these steps:

1. Import the SDK:

import { LivuvoLiveSDK } from "@livuvo/live-sdk";

1. import styles:

import "@livuvo/live-sdk/style.css";

1. Fetch the configuration data from below API endpoint: https://neo.interactify.live/authnz/api/v1/user-token/[SPACE-SLUG]/live/[LIVE-SLUG]/

2. Initialize the configuration and render the LivuvoLiveSDK component:

const userToken = ...;

<LivuvoLiveSDK  userToken={userToken} />

Components

LivuvoLiveSDK

Props

• isDesktop (optional): A boolean flag indicating whether the app is running in desktop mode or mobile mode. Default value is false.

• className (optional): A string that allows you to apply custom CSS classes to the component.

• userToken (optional): A token representing the user, following the GLiveUserToken type.

• brokerURL (optional): A string representing the WebSocket broker URL. Default value is "wss://messaging.interactify.live/mqtt".

• neoURL (optional): A string representing the Neo URL for the SDK.

• streamerURL (optional): A string representing the URL for the streamer.

• liveStreamerURL (optional): A string representing the URL for the live streamer.

• productModalButton (optional): An object to customize button on product modal

Usage

import { LivuvoLiveSDK } from "./LivuvoLiveSDK";

<LivuvoLiveSDK
  isDesktop={true}
  userToken={userToken}
  productModalButton={{
    text: "View Product",
    onClick: ({ product, onCancel }) => {
      // you can close modal by calling onCancel();
      onCancel();

      // do anyting with product object which contains product details like image, url and ...
      console.log("Product button clicked", product);

      // default behaviour is
      window.open(product.url);
    },
  }}
/>;

Conclusion

This library simplifies the integration of your React application with the Interactify live service. By following the steps outlined in this documentation, you can quickly set up the LivuvoLiveSDK component.

Endpoint description

The endpoint URL for fetching user tokens is: https://neo.interactify.live/authnz/api/v1/user-token/[SPACE-SLUG]/live/[LIVE-SLUG]/

It's important to note that this endpoint should be accessed from the backend due to security considerations. This is because you need to provide a confidential Authorization token (Authorization header) as part of the request. To obtain an API token, follow these steps:

1. Visit app.interactify.live.
2. Navigate to the space settings page.
3. In the "API Tokens" section at the bottom, you can generate a new API token.
4. Set obtained api token as Authorization header.

When making a request to the endpoint, include the following object in the request body: This object should be sent as part of the POST request to the specified URL.

{
  "user_id": "USER_ID",
  "display_name": "DISPLAY_NAME",
  "chat": "rw"
}

Please ensure that you handle this sensitive information securely and follow best practices for API token management.