Skip to main content

Embedding Stories

The Nudge SDK enables seamless integration of interactive stories into your React Native application, enhancing user engagement through dynamic content delivery.

Importing the Package​

Ensure that NudgeStoriesWidget is imported in your file:

import { NudgeStoriesWidget } from "nudge_react_native_v2";

Embedding Nudge Stories​

To integrate stories within your React Native UI, use the NudgeStoriesWidget widget. This widget dynamically renders stories based on the specified widget ID and supports customization.

Usage Example​

<NudgeStoryWidget
        style={{}}
        label="your_globally_unique_identifier"
        pageName="page_name"
        headingDarkModeColor="#000000"
        headingLightModeColor="#000000"
        subheadingDarkModeColor="#FFFFFF"
        subheadingLightModeColor="#FFFFFF"
      />

Parameters:​

  • style (Object) - Your custom stylesheet
  • label (String) - Unique identifier for the story component, as defined in the Nudge dashboard.
  • pageName (String) - Page name where this view is added.
  • titleColorDarkMode (String) - Title text color in dark mode.
  • titleColorLightMode (String) - Title text color in light mode.
  • subtitleColorDarkMode (String) - Subtitle text color in dark mode.
  • subtitleColorLightMode (String) - Subtitle text color in light mode.

Integration Notes​

  • Ensure the widget ID matches the one configured in the Nudge dashboard.
  • The NudgeStoriesWidget widget must be placed within an appropriate widget tree to ensure visibility.
  • The appearance of stories dynamically updates based on campaign settings.