React Native SDK

Requirements

The Extole React Native SDK supports iOS 13.0 or later and Android minSdkVersion 21 or later.

Integration

Install the SDK dependency

Add the @extole/react-native-sdk dependency

kotl

npm install @extole/react-native-sdk react-native-webview

Please note that Github currently requires that you input your credentials to view public assets.

Initialize Extole

Initialize Extole as follows.

import {Extole} from '@extole/react-native-sdk';

const extole = new Extole('share.client.com', 'your-app-name');

You’ll need to provide your Extole program domain in place of ‘share.client.com’. Be sure to also replace ‘your-app-name’ with a descriptive name for your application.

Initialize View

In your code, pass configure the view and callback.

const [extoleView, setExtoleView] = React.useState<Element>(<View />);

extole.configure(extoleView, setExtoleView, () => {
    navigation.navigate('Promo');
});

// Use the extole.view
function ExtoleScreen() {
  return <View>extole.view</View>;
}

// The ExtoleScreen() method is used as a Screen
<Stack.Screen name='Promo' component={ExtoleScreen} />

By default, Extole will use this single view to interact with the customer.

Exchange Data with Extole

Send Customer Information

Send Extole information about the customer.

extole.identify("example@test.com", {"partner_user_id": "123"})

You can choose to pass any type of data to describe the customer. Richer data about your customers gives your marketing team the information they need to better segment your program participants and target them with appropriate campaigns.

JWT Identification

If you would like to verify the identity of your customers with JWT instead of their email address, use the following method:

extole.identifyJwt(_ jwt: String, _ data: [String: Any?], _ completion: ((Id<Event>?, Error?) -> Void)?)

For more information on generating JWTs, please reference our article on Verifying Consumers.

Events

Send Extole events, such as registers, signups, conversions, account openings, and so on.

extole.sendEvent("cta_viewed", {"key": "value"}))

For each event type, you can send additional data. For example, on a conversion event you may want to pass in order ID or order value and so on.

Send Call to Action Content

Populate a CTA with content from Extole. CTAs such as mobile menu items can be fully customized in the My Extole Campaign Editor. Each CTA has a designated zone. The following code is an example of how to retrieve a CTA by fetching zone content.

const [zone, setZone] = React.useState<Zone | null>(null);
React.useEffect(() => {
  extole
    .fetchZone('mobile_cta')
    .then(([zone, _campaign]) => {
      setZone(zone);
    });
}, []);

React.useEffect(() => {
  zone?.viewed()
}, [zone]);

// On CTA tap send the event to Extole
const onCtaButtonPress = () => {
  zone?.tap();
};

. . . 

// Usage example:
<View style={styles.container}>
  <Image
    style={styles.tinyLogo}
    source={{
      uri: zone?.getData().image || 'https://your-default-image',
    }}
  />
  <View style={styles.space} />
  <Button title={zone?.getData().title || ''} onPress={onCtaButtonPress} />
  <View style={styles.space} />
</View>

In order to be able to fetch the mobile_cta zone, the zone should be configured in My Extole and should return JSON content containing the image and title.

Important NoteWe encourage you to pull CTA content from My Extole because doing so ensures that your menu item or overlay message will reflect the copy and offer you’ve configured for your campaign.

Advanced Usage

The following topics cover advanced use cases for the Extole React Native SDK. If you would like to explore any of these options, please reach out to our Support Team at support@extole.com.

Configure Actions from Events

You can set up a specific action to occur when an event is fired. For example, when a customer taps on your menu item CTA, you may want the event to trigger an action that loads your microsite and shows the share experience. To set up this type of configuration, you will need to work with Extole Support to set up a zone in My Extole that returns JSON configurations with conditions and actions. The SDK executes actions for conditions that are passing for a specific event.

json

{
  "operations": [
    {
      "conditions": [
        {
          "type": "EVENT",
          "event_names": [
            "mobile_cta_tap"
          ]
        }
      ],
      "actions": [
        {
          "type": "VIEW_FULLSCREEN",
          "zone_name": "microsite"
        }
      ]
    }
  ]
}

Adding additional operationsIf you would like to add more operations, you will need to update the zone mobile_bootstrap. By default, this zone is not available to be updated. You must have already added the mobile SDK support component. Please reach out to our Support Team at support@extole.com for help adding this component to your campaign.

Supported Actions

The following types of actions are supported by default in our SDK.

Action Name	Description
`PROMPT`	Display a native pop-up notification. For example, this could appear when a discount or coupon code has been successfully applied.
`NATIVE_SHARING`	Open the native share sheet with a predefined message and link that customers can send via SMS or any enabled social apps.
`VIEW_FULLSCREEN`	Trigger a full screen mobile web view. For example, this could be your microsite as configured in My Extole to display the share experience.

Custom Actions

If you would like to create custom actions beyond our defaults, use the format exhibited in the example below. Please reach out to our Support Team at support@extole.com if you have any questions.

export class CustomReactAction implements Action {
  type = 'CUSTOM';
  title = 'REACT_ACTION';

  execute(_event: AppEvent, _extole: Extole) {
    // code
  }
}

Register Custom Actions

extole.registerAction("REACT_ACTION", CustomReactAction.prototype)

Integration Overview

Extole AI Tools

Platform Integrations

Partners

Building Custom Integrations

Solutions

Operational Tasks

Troubleshooting

Requirements

Integration

Install the SDK dependency

Initialize Extole

Initialize View

Exchange Data with Extole

Send Customer Information

JWT Identification

Events

Send Call to Action Content

Advanced Usage

Configure Actions from Events

Supported Actions

Custom Actions

Register Custom Actions

​Requirements

​Integration

​Install the SDK dependency

​Initialize Extole

​Initialize View

​Exchange Data with Extole

​Send Customer Information

​JWT Identification

​Events

​Send Call to Action Content

​Advanced Usage

​Configure Actions from Events

​Supported Actions

​Custom Actions

​Register Custom Actions

Requirements

Integration

Install the SDK dependency

Initialize Extole

Initialize View

Exchange Data with Extole

Send Customer Information

JWT Identification

Events

Send Call to Action Content

Advanced Usage

Configure Actions from Events

Supported Actions

Custom Actions

Register Custom Actions