Skip to main content

Getting started

Getting Started with StreamLayer SDK​

Installation​

Install StreamLayerSDK dependency

npm install @streamlayer/react

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

Adding Styles​

Add style to entrypoint:

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

Or import it in your app:

app.jsx
import '@streamlayer/react/style.css'

Obtain an SDK API Key​

You will need an SDK API Key in order to successfully integrate StreamLayer into your application. If you do not already have one, please follow the instructions below to obtain one.

Provide us with your email, we will use this to create a new organization for you on our platform, including setting up a personal dashboard for your account. You will then receive an invitation email with a link to the admin panel and the credentials for authentication. After receiving access to the admin panel, you will be able to generate an API key in the development section of the admin panel. This API authenticates your application with our servers and is required for all interactions.

Integration​

Basic Terminology​

  • SDK Key: A organization-specific identifier that authenticates your application with our servers.

  • Event ID: A unique identifier for the event you want to interact with.

  • StreamLayerProvider: A React component that initialize core and provides the StreamLayer context to your application.

  • StreamLayer UI: A general term for the next components:

    • StreamLayerLogin: A React component that logins the user.
    • StreamLayerSDKReact: A React component that displays the StreamLayer UI.
    • StreamLayerSDKNotification: A React component that displays the StreamLayer notifications.
    • StreamLayerSDKPoints: A React component that displays the points of the user.
    • StreamLayerSDKInsight: A React component that displays the insight cards.
    • StreamLayerSDKAdvertisement: A React component that displays the advertisements.
    • StreamLayerSDKEvent: A React component that defines the event, in most cases, the event specified in the StreamLayerProvider.

  • useStreamLayer: A React hook that provides access to the StreamLayer Core context.

  • useStreamLayerUI: A React hook that provides access to the StreamLayer UI context.

Introduction​

StreamLayerProvider is a main component that initializes the StreamLayer SDK and has a properties that configure the SDK. All other components should be placed inside this component.

In the components inside provider, you can use the StreamLayer context to interact with the StreamLayer SDK by using the useStreamLayer and useStreamLayerUI hooks. The useStreamLayer hook provides access to the StreamLayer Core context, while the useStreamLayerUI hook provides access to the StreamLayer UI context.

In most cases, you not need to use these contexts directly, as they are used internally by the StreamLayer SDK components, but they can be useful in certain situations and allows you to flexibly integrate StreamLayer UI components into your application. For more information about these hooks, contact the StreamLayer team.

Each StreamLayer UI component has a set of properties that can be used to customize its appearance and behavior. And can be used separately or together.

Place and configure StreamLayer​

You can wrap all of your application or a specific part of it. We recommend wrapping only the part of the application that needs to interact with StreamLayer and render it when it's needed.

Important! You can only have one StreamLayerProvider in your application. Do not use CSS to hide or show StreamLayerProvider. Instead, manage component visibility through conditional rendering based on state or props. StreamLayer core initialize only once on the mount of the StreamLayerProvider component. And it will be destroyed when the StreamLayerProvider component is unmounted. Initialize of core takes time, because it loads the necessary resources. And for smooth experience, we recommend to render StreamLayerProvider in advance.

Here is an example of how to use StreamLayerProvider and one of the StreamLayer UI components:

app.jsx
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>
  )
}

What's next?​

Feel free to reach out if you need any more improvements or further customization!