Integrating Points with StreamLayer SDK

Overview

The StreamLayerSDKPoints component allows you to integrate gamification points into your React application. This component wraps the StreamLayerPoints class from the StreamLayer SDK.

Usage

Step-by-Step Guide

1. Import Required Components

  import { StreamLayerProvider, StreamLayerSDKReact, StreamLayerSDKPoints } from '@streamlayer/react';

2. Wrap Your Application withStreamLayerProvider

  const providerProps = {
    sdkKey: 'your-sdk-key',
    // Add other provider props as needed
  };

  export const Main = () => (
    <StreamLayerProvider {...providerProps}>
      {/* Place StreamLayerSDKPoints component inside StreamLayerProvider */}
      <StreamLayerSDKPoints />

      {/* Place StreamLayerSDKReact component independently if needed */}
      <StreamLayerSDKReact />
    </StreamLayerProvider>
  );

Notes

• Ensure both StreamLayerSDKPoints and StreamLayerSDKReact components are wrapped inside StreamLayerProvider.
• The StreamLayerSDKPoints component can be placed anywhere within your app to display points.

Related

• StreamLayerSDKReact — Main interactive gamification UI component
• Authentication Forwarding — Required for personalized points tracking
• Integration Guide — Full Web SDK setup