Insight

Quick Start

You can place the StreamLayerSDKInsight component wherever you want in your app, but it should be wrapped inside the StreamLayerProvider component.

Pass event identifier to the event prop of the StreamLayerProvider. Or you can use StreamLayerSDKEvent component.

import { StreamLayerProvider, StreamLayerSDKEvent } from '@streamlayer/react'
import { StreamLayerSDKInsight } from '@streamlayer/react/insight'

<StreamLayerProvider {...providerProps}>
  <StreamLayerSDKInsight />
</StreamLayerProvider>

Configuration

Props

type StreamLayerSDKInsightProps = {
  hideHeader?: boolean // Indicates whether the insight header is displayed or no.
  persistent?: boolean // Indicates whether the advertisement card is displayed persistently, without the isViewed check.
  skipAutoClose?: boolean // Skip auto close behavior.
}

Handling activated insight

The StreamLayerProvider provides a onContentActivate callback that is triggered when an insight is activated with the following parameters:

type Params = {
  stage: 'activate' | 'deactivate'
  id: string
  isViewed?: boolean
  hasNotification?: boolean
  type: 'insight'
}

You can use this callback to track the activation of the insight card and perform any necessary actions without rendering the StreamLayerSDKInsight component.

Auto Close Behavior

When the auto-close timer is enabled on an insight card, the following behavior applies:

• The card closes after the configured time.
• The close button is disabled during the timer countdown.

Setting skipAutoClose to true disables the auto-close behavior. Setting hideHeader to true also disables auto-close behavior.

Related

• StreamLayerSDKReact — Main interactive UI component
• Notification — Notification card component
• Integration Guide — Full Web SDK setup