StreamLayerSDKReact

The StreamLayerSDKReact component provides the main interactive gamification UI, including free-to-play games and insight cards.

Overview

The StreamLayerSDKReact component provides the main interactive UI for the StreamLayer Element. It comes with gamification features including free-to-play games and social engagement tools.

For details on the interactive features available through this component, see:

Quick Start

Place the StreamLayerSDKReact component inside a StreamLayerProvider. Position it wherever you want the interactive UI to appear — typically in a sidebar next to your video player.

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

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

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

            <StreamLayerSDKReact />

          </SidebarContainer>
        </VideoPlayerContainer>
      </StreamLayerProvider>
      <Footer />
    </App>
  )
}

Related

Integration Guide — Full Web SDK setup and configuration
Gamification Points — Points system integration
Notification — Notification card component

Updated 21 days ago