Web SDK Quickstart

This quickstart gets you from zero to seeing the StreamLayer Element on screen in under 5 minutes. For detailed configuration options, see the Integration Guide.

System Requirements

• React 17+
• Node.js 16+

Install NPM Package

npm install @streamlayer/react

Import Styles and Configure Provider

Import styles and wrap your app with StreamLayerProvider:

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

function App() {
  return (
    <StreamLayerProvider sdkKey="your-sdk-key" event="your-event-id">
      <VideoPlayerContainer>
        <VideoPlayer />
        <SidebarContainer>
          <StreamLayerSDKReact />
        </SidebarContainer>
      </VideoPlayerContainer>
    </StreamLayerProvider>
  )
}

export default App

Run Your App

npm start
# or
yarn start

Open http://localhost:3000 in your browser. You should now see the StreamLayer Element on your screen.

Related

• Integration Guide — Full Web SDK setup and configuration
• Test Integration — Validate ads and interactive units
• Getting Started — Web SDK overview and quick-start path