React Native

You can embed a Smartzer player inside of a React Native app by using a WebView using code similar to below

import { WebView } from 'react-native-webview';
import { useMemo } from 'react';

const SmartzerPlayer = () => {
  const webViewSourceProps = useMemo(
    () => ({
      uri: '<your_player_url>',
    }),
    []
  );

  return <WebView source={webViewSourceProps} />;
};

export default SmartzerPlayer;

If you want to listen to call to action events from the player, you can use the onMessage prop of the WebView component. The onMessage prop is a function that will be called whenever the player sends a message to the parent window

import { WebView, WebViewMessageEvent } from 'react-native-webview';
import { useMemo, useCallback } from 'react';

const SmartzerPlayer = () => {
  const webViewSourceProps = useMemo(
    () => ({
      uri: '<your_player_url>',
    }),
    []
  );

  const onMessage = useCallback((event: WebViewMessageEvent) => {
    if (e.nativeEvent.data) {
      try {
        const eventData = JSON.parse(e.nativeEvent.data);
        if (eventData.event_type === 'smrtzr_cta') {
          const productData = JSON.parse(eventData.cta);
          const { type, cta } = productData;
          switch (type) {
            case 'goTo':
              // TODO: load the product info into the viewport using `cta` as sku
              break;
            case 'addToCart':
              // TODO: add the product to the cart using `cta` as sku
              break;
            default:
              break;
          }
        }
      } catch (e) {}
    }
  }, []);

  return <WebView source={webViewSourceProps} onMessage={onMessage} />;
};

export default SmartzerPlayer;