Skip to main content

Insight

The StreamLayerSDKInsight component is a React component that allows you to render insights in your application.

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 next params:

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​

With enabled auto close timer in the card, the insight card has next behavior:

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

With skipAutoClose prop set to true, the auto close behavior is disabled. With hideHeader prop set to true, the auto close behavior is disabled.