Personalization with StorifyMe

In case you want your stories to be dynamic and to show different content to different users you would can do that in a few simple steps.

Just map your dynamic personal data in StorifyMe Admin app, and after you provide it with the SDK, the stories would automatically change and adapt to the user that is consuming content making them feel VIP with stories built just for them.

Before you begin

You need to have the working StorifyMe setup as described in Initial SDK Setup

Set Customer ID

Customer ID is a great way to track analytics on a customer level. You can configure customer ID by providing the value in the StorifyMeWidgetConfig attribute.

import {
  StorifyMeEnv,
  StorifyMeWidget,
  StorifyMe,
  StorifyMeWidgetConfig,
} from 'react-native-storifyme';

export default function App(): JSX.Element {
  const ref = React.useRef(null);
  
  // Widget configuration
  const widgetConfig: StorifyMeWidgetConfig = {
   customerId: 'customer-1234',
  };
  
  return (
    <App>
       <StorifyMeWidget
          accountId={ACCOUNT_ID}
          apiKey={API_KEY}
          env={ENV}
          widgetId={WIDGET_ID}
          config={widgetConfig}
          style={styles.box}
          ref={ref}
          segments={segments}
        />
    </App>
  );
}

Set personal and dynamic data

Enable dynamic personalization of elements using StorifyMe's Dynamic data feature in the app. Then, map the personal fields with the elements.

From the SDK, easily pass personalized data through to dynamically modify and adapt text, images, videos and other elements and provide a tailored user experience within your application for your user.

It can be set by providing dynamicData property in StorifyMeWidgetConfig.

import {
  StorifyMeEnv,
  StorifyMeWidget,
  StorifyMe,
  StorifyMeWidgetConfig,
} from 'react-native-storifyme';

export default function App(): JSX.Element {
  const ref = React.useRef(null);
  
  // Widget configuration
  const widgetConfig: StorifyMeWidgetConfig = {
    dynamicData: [
      {
        dynamicIntegrationId: '12345yuio',
        data: {
          name: 'John',
          age: 30,
        },
      },
    ],
  };
  
  return (
    <App>
       <StorifyMeWidget
          accountId={ACCOUNT_ID}
          apiKey={API_KEY}
          env={ENV}
          widgetId={WIDGET_ID}
          config={widgetConfig}
          style={styles.box}
          ref={ref}
          segments={segments}
        />
    </App>
  );
}