npm package: @livuvo/live-sdk
Description: ## Introduction
Latest version: 0.1.2

# 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](https://interactify.live) 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:

```shell
npm install @livuvo/live-sdk
```

or yarn:

```shell
yarn add @livuvo/live-sdk
```

## Usage

follow these steps:

1. Import the SDK:

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

2. import styles:

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

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

4. Initialize the configuration and render the LivuvoLiveSDK component:

```jsx
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

```typescript jsx
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](https://interactify.live) 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](https://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.

```json
{
  "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.