Background

Please make sure you are familiar with the Architecture Overview before proceeding with this integration.

Prerequisites

System Requirements

• Node.js / JavaScript or TypeScript environment
• React application

Obtain an SDK API Key

You need an SDK API key to integrate StreamLayer into your application.

If you don’t have one:

1. Provide your email to StreamLayer support.
2. We’ll create an organization and set up your dashboard.
3. You’ll receive an invitation email with admin panel credentials.
4. After accessing the admin panel, generate your API key from the Developer Settings section.

This API key authenticates your app and is required for all SDK interactions.

Installation

Install the @streamlayer/react dependency:

npm install @streamlayer/react

Note:
@streamlayer/react has peer dependencies. Modern package managers install these automatically. If you encounter issues, install them manually.

Adding Styles

You can add styles in two ways:

• Link inindex.html:

  HTML

  <link rel="stylesheet" type="text/css" href="https://react-cdn.streamlayer.io/sdk-web/VERSION/style.css">

• Import in your app:

  JSX

  import '@streamlayer/react/style.css'

Integration

Basic Terminology

• SDK Key: Organization-specific identifier that authenticates your app.
• Event ID: Unique identifier for the event you want to interact with.
• StreamLayerProvider: React component that initializes the SDK and provides context.
• StreamLayer UI Components:
  • StreamLayerLogin: User login
  • StreamLayerSDKReact: Main interactive UI
  • StreamLayerSDKNotification: Notifications
  • StreamLayerSDKPoints: Gamification points
  • StreamLayerSDKInsight: Insight cards
  • StreamLayerSDKAdvertisement: Advertisements
  • StreamLayerSDKEvent: Defines the event context
• useStreamLayer: React hook to access SDK core context.
• useStreamLayerUI: React hook to access UI context.

Introduction

StreamLayerProvider is the main entry point.
It initializes the SDK and configures it via its props.

All other StreamLayer components must be placed inside StreamLayerProvider.

You can use:

• useStreamLayer to access core SDK context
• useStreamLayerUI to access UI context

In most cases, you don’t need to use these hooks directly.
The SDK components handle this internally. Hooks are available if you need advanced customization.

Each UI component exposes properties to customize its behavior and appearance.
You can use them individually or together.

Place and Configure StreamLayer

Wrap only the parts of your app that require StreamLayer features.

Important:

• Only one StreamLayerProvider is allowed in your app.
• Do not use CSS to hide or show StreamLayerProvider.
  Use conditional rendering based on state or props.
• The SDK core initializes once when StreamLayerProvider mounts and destroys on unmount.
• Initialization loads required resources.
  For a smooth experience, render StreamLayerProvider in advance.

Example:

import { StreamLayerProvider, StreamLayerSDKReact } from '@streamlayer/react'
import '@streamlayer/react/style.css'

import { App, Header, VideoPlayerContainer, VideoPlayer, SidebarContainer } from './app'

export const Main = () => (
  <App>
    <Header />
    <StreamLayerProvider sdkKey="your-sdk-key" event="your-event-id">
      <VideoPlayerContainer>
        <VideoPlayer />
        <SidebarContainer>
          <StreamLayerSDKReact />
        </SidebarContainer>
      </VideoPlayerContainer>
    </StreamLayerProvider>
    <Footer />
  </App>
)