Blog

Integration of YM ChatBot in React Native Application

Let’s learn how to add a live chat feature to your app. Applications built with React Native, iOS, or Android can all use Integration of YM ChatBot.

Installation

With Npm

$ npm install ymchat-react-native --save

$ react-native link ymchat-react-native

With Yarn

yarn add ymchat-react-native

Android

Change this following key in your strings.xml file found at project/android/app/src/main/res/values/strings.xml, this override default file provider used by SDK.

Overriding file provider path will avoid conflict with other app using YM CHATBOT SDK. You can use application id and suffix it with “.fileprovider”

Example – 

applicationId : "com.abc.xyz" then 

application_id_for_provider = com.abc.xyz.fileprovider

<string name="application_id_for_provider">your.application.id.fileprovider</string>

Usage

Import YMChat in App.js

import { YMChat } from "ymchat-react-native";

Set botId​

This is the first,important and mandatory step.

YMChat.setBotId("x1234567890"); // Use your BOT ID

YM AuthenticationToken​

ymAuthenticationToken is used to identify the identity of the user with the chat bot.

Whenever a chatbot is launched with AuthenticationToken it will load the previous chats associated with this user.kind of showing old chats.

YMChat.setAuthenticationToken("token");

Note: This is also mandatory step

Set Payload​

Additional payload can be passed in the form of object [ key value pair] from app to bot using setPayload(<object>).

YMChat.setPayload({ name: "Integration", type: "react-native" });

With this Payload we can pass the extra information like mobile number,email  from hosted app to the chatbot. The payload should be JavaScript Object Notation (JSON) compatible otherwise an error will be thrown.

V2 bot​

You can change version of the bot by calling setVersion() method. Default value is 1

YMChat.setVersion(2); // here we are setting version 2

Present chatbot​

Chat bot can be presented by calling startChatbot(). This will display full screen chat view in the App.

YMChat.startChatbot();