Flyreel React SDK

Requirements:

Android

• Android 6+ (minSdk 23)

iOS

• iOS 13+

Installation

$ npm install --save @flyreel/flyreel-sdk-react-native
# --- or ---
$ yarn add @flyreel/flyreel-sdk-react-native

Don't forget to run pod install after that !

Usage

Permissions on iOS

Since the SDK actively uses some functionalities of the iOS system you need to provide a few permission settings in your Info.plist file.

<dict>
    // ...
    <key>NSCameraUsageDescription</key>
    <string>We need access to the camera.</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>We need access to the camera.</string>
    <key>NSLocationWhenInUseUsageDescription</key>
    <string>We need access to your location data</string>
</dict>

Importing

To use the Flyreel SDK, import it into your javascript or typescript files like so:

import Flyreel from 'flyreel-sdk-react-native'

Initialization

To use the Flyreel SDK, you must provide a configuration with the following parameters:

organizationId: Identifier of your organization.

In your App.tsx file, initialize Flyreel using provided object:

// initialize Flyreel with organizationId
await Flyreel.initialize('5d3633f9103a930011996475');

How to open Flyreel chat

Invoke openFlyreel()

Flyreel.open();

Deep Linking

If you're launching the Flyreel flow from a deep link, push notification, or a custom solution where user details can be provided automatically, use:

// open with flyreelZipCode and flyreelAccessCode parameters
Flyreel.openWithCredentials('80212', '6M4T0T', true);

// open with deeplink url with flyreelAccessCode and flyreelZipCode parameters
Flyreel.openWithDeeplink('https://your.custom.url/?flyreelAccessCode=6M4T0T&flyreelZipCode=8021', true);

[!NOTE] Last parameter determines whether you want to skip login page and login automatically.

Custom fonts

If you want to use a custom font for Flyreel chat, you have to provide a ttf file to both iOS and Android Platform.

• in the Android directory, you can put the ttf file in the main/assets folder or the main/res/font folder.
• for iOS, you have to go with the Apple instruction to add a custom font to your project.

Then, you can use the font's name in the Flyreel dashboard panel. For example, if you have added font my_font.ttf to the assets folder, you can use my_font as a font name in the Flyreel dashboard.

Debug Logs

Enable debug logging for troubleshooting purposes:

Flyreel.enableLogs();

Sandbox

Verify your implementation in the sandbox mode. Initialize Flyreel with sandbox environment:

await Flyreel.initializeWithSandbox('5d3633f9103a930011996475');

Analytics

/// Subscribes to a stream of analytic events and handles each event with a provided closure.
///
/// This function observes a feed of analytic events from the SDK. When an event
/// is received, the provided handler closure is called with the event as its argument.
///
/// - Parameters:
///   - handler: A closure that is called with the analytic event emitted by the SDK.
///     The closure takes a single parameter:
///       - event: A map that contains event's data.
///       
Flyreel.observeAnalyticEvents((event: Map<String, any>) => {
      console.log('Received analytic event:', event);
    });

Firewall whitelisting

Here is a list of Flyreel's hosts in case you need to whitelist URLs.

api3.flyreel.co
sandbox.api3.flyreel.co