The Channel Talk React Native SDK is a plugin facilitating the installation of real-time customer chat into React Native applications. If you intend to install it into a web view or a mobile web, please refer to the JavaScript SDK Installation Guide.

Installation

Execute the following command in the shell to install the SDK.

npm install react-native-channel-plugin

The SDK includes a list of versions that are compatible with the mobile SDK. To verify that the version you have installed is compatible, please refer to the version compatibility.

Installing on iOS

You can install the SDK through CocoaPods, Carthage.

CocoaPods

You can use CocoaPods to install Channel Talk iOS SDK. The minimum requirements for installation are as follows:

• Xcode 12 or later
• CocoaPods 1.10.0 or later

1. Run the pod install command in the directory where Podfile is located to install the package.
   If it is already installed, run the pod update.
2. open Project_Name.xcworkspace.

Carthage

You can utilize Carthage to install Channel Talk iOS SDK.

1. Add ChannelIOSDK to the Cartfile of the project as below.

binary "https://mobile-static.channel.io/ios/latest/channeliosdk-ios.json"

If you need to install a specific package version, modify the script accordingly.

// Compatible version
binary "https://mobile-static.channel.io/ios/latest/channeliosdk-ios.json" ~> 8.0.0
// Specific version
binary "https://mobile-static.channel.io/ios/latest/channeliosdk-ios.json" == 8.0.0

2. Execute the carthage update command in the directory where Cartfile is located to install the package. For Example:

carthage update -platform iOS --use-xcframeworks

3. The ChannelIOSDK package is built inside the PROJECT_DIR/Carthage/build directory. Drag this package to Xcode to add it.

Additional Settings

Several additional settings are required.

Add the permission and description used by the SDK

The following permissions are required to use the SDK. Add the key value and description below to the project's info.plist.

Initialization

Initialize the SDK to prepare for use.

Swift

Go to AppDelegate.swift and add the initialize method below.

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

    ChannelIO.initialize(application)

    return true
}

If you manage window instance on SceneDelegate.swift, You should add initializeWindow as shown below.

// SceneDelegate.swift

// add:
var channelWindow: UIWindow?

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
    guard let windowScene = (scene as? UIWindowScene) else { return }
    
    channelWindow = ChannelIO.initializeWindow(with: windowScene)
}

Objective-C

Go to AppDelegate.m and add the initialize method below.

#import <ChannelIOFront/ChannelIOFront-swift.h>

@interface AppDelegate ()
@end

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [ChannelIO initialize:application];
  return YES;
}

If you manage window instance on SceneDelegate.m, You should add initializeWindow as shown below.

//  SceneDelegate.m

@interface SceneDelegate ()
@property (strong, nonatomic) UIWindow * channelWindow;
@end

@implementation SceneDelegate


- (void)scene:(UIScene *)scene willConnectToSession:(UISceneSession *)session options:(UISceneConnectionOptions *)connectionOptions {
  _channelWindow = [ChannelIO initializeWindowWith:(UIWindowScene *)scene];
}
@end

Installing on Android

Project - build.gradle

Declare our Maven repository to the build.gradle:

buildscript {
    ...
    repositories {
        ...
        google()
        mavenCentral()
        maven {
            url 'https://maven.channel.io/maven2'
            name 'ChannelTalk'
        }
        ...
    }
    ...
}

If a build error occurs, please add the dependency to the app level build.gradle.

dependencies {
  implementation 'io.channel:plugin-android'
}

Initialization

To use the Channel Talk SDK, you must call ChannelIO.initialize() in Application#onCreate().
If you haven't separately created your app's Application, create a new one.
Add the code below based on the language used in your project.

Kotlin

class MainApplication : Application(), ReactApplication {

  override fun onCreate() {
    super.onCreate()
    
    ChannelIO.initialize(this)
  }
}

Java

import android.support.multidex.MultiDexApplication;

import com.zoyi.channel.plugin.android.ChannelIO;
import com.zoyi.channel.rn.RNChannelIOPackage;

public class MainApplication extends MultiDexApplication implements ReactApplication {
  @Override
  public void onCreate() {
    super.onCreate();

    ChannelIO.initialize(this); // Initialize ChannelIO
  }
}

Android Cleartext Traffic

In Android API level 28 or above, an insecure HTTP connection is prohibited by default. If an HTTP URL is delivered during a conversation, the WebView embedded in the SDK cannot show the web page. The best way to resolve the issue is to deliver HTTPS URLs consistently. However, if your team needs to deliver an HTTP URL, change AndroidManifest.xml properties as follows:

<application  
	...  
	android:usesCleartextTraffic="true">

🚧

Allowing all HTTP connections might cause a security issue. See Android official documentation about network security.

Using Channel Talk

Step 1. Import the Framework

import the SDK wherever you intent to use it.

import { ChannelIO } from 'react-native-channel-plugin';

Step 2. Boot

Boot is the preparation process for using the SDK.

You may require your channel’s plugin key. See how to get a plugin key.
There are two types of Boot: Boot as an anonymous user or Boot as a member user.

For a detailed description of the user, see Member User.

2 - 1. Boot as an anonymous user

An anonymous user is a user without a memberId. The following is an example of Boot with an anonymous user and how to receive the Boot result value.

let settings = {
  "pluginKey": YOUR_PLUGIN_KEY
}

ChannelIO.boot(settings).then((result) => {

})

2 - 2 Boot as a member user

A member user is a user with a memberId property. If the user can be identified independently, such as when signed in to your service, you can boot as a member user by providing a memberId. Channel distinguishes a user by the memberId field.

❗️

Use member hash to protect sensitive information of your users

If you set the memberId using predictable values such as a user ID or email, an unauthorized third party might acquire your user’s memberId. This unauthorized access might allow the malicious third party to obtain your user’s sensitive information, including their mobile number and chat logs, which could lead to a security breach. Enable member hash for your channel to improve the security level.

The following is an example of boot a member user with a specific memberId.

let settings = {
  "pluginKey": YOUR_PLUGIN_KEY,
  "memberId": memberId,
  "profile": {
    "name": USER_NAME,
    "mobileNumber": "01012345678"
  }
};

ChannelIO.boot(settings).then((result) => {
});

Displaying the Channel Button

The SDK provides a default Channel button to launch messengers. You can call showChannelButton and hideChannelButton to show or hide Channel buttons.

If you want to change the button’s appearance, see how to customize the Channel button.

ChannelIO.showChannelButton();
ChannelIO.hideChannelButton();

sleep

It can be used when you only want to use event tracking via track or push notifications. Features such as chat support or marketing pop-ups will not function.

ChannelIO.sleep();

shutdown

Terminates all features of the SDK. If you want to use the feature of SDK again, you need to Boot it once more.

ChannelIO.shutdown();