Supercharge your support team with AI-driven email ticketing<\/a> \u2013 automate, organize, and resolve queries effortlessly!<\/code><\/pre>\n\n\n\nBefore we dive in, here are the prerequisites:<\/p>\n\n\n\n
Prerequisites:<\/h2>\n\n\n\n\n- Basic Knowledge of React Native development.<\/li>\n\n\n\n
- Programming knowledge – Javascript.<\/li>\n\n\n\n
- Node.JS to be installed on your local environment.<\/li>\n\n\n\n
- Visual Studio Code (IDE)<\/li>\n<\/ol>\n\n\n\n
![\"CTA\"](\"https:\/\/www.kommunicate.io\/blog\/wp-content\/uploads\/2023\/06\/Healthcare-CTA-1-\u2013-1-1-3-1024x250.png\")
<\/a><\/figure>\n<\/div>\n\n\nStep 1: Setup an account in Kommunicate<\/h4>\n\n\n\n
If you do not have an account in Kommunicate, you can create one here<\/a> for free.<\/p>\n\n\n\nNext, log in to your Kommunicate dashboard and navigate to the Bot Integration section. Locate the Kompose section and click on Integrate Bot.<\/p>\n\n\n\n![\"Screenshot](\"https:\/\/www.kommunicate.io\/blog\/wp-content\/uploads\/2024\/01\/React-Native-img-1-1024x523.png\")
<\/figure>\n\n\n\nIf you want to build a bot from scratch, select a blank template and go to the Set up your bot section. Select the name of your Bot, your bot\u2019s Avatar, and your bot\u2019s default language and click \u201cSave and Proceed\u201d.<\/p>\n\n\n\n![\"Screenshot](\"https:\/\/www.kommunicate.io\/blog\/wp-content\/uploads\/2024\/01\/React-Native-img-2.png\")
<\/figure>\n\n\n\nYou are now done creating your bot and all you have to worry about now is to \u201cEnable bot to human transfer\u201d when the bot encounters a query it does not understand. Enable this feature and click \u201cFinish Bot Setup.\u201d<\/p>\n\n\n\n![\"Screenshot](\"https:\/\/www.kommunicate.io\/blog\/wp-content\/uploads\/2024\/01\/React-Native-img-3-1024x713.png\")
<\/figure>\n\n\n\nFrom the next page, you can choose if this bot will handle all the incoming conversations. Click on \u201cLet this bot handle all the conversations\u201d and you are good to go.<\/p>\n\n\n\n![\"Screenshot](\"https:\/\/www.kommunicate.io\/blog\/wp-content\/uploads\/2024\/01\/React-Native-img-4-1024x635.png\")
<\/figure>\n\n\n\nNewly created bot here: Dashboard \u2192Bot Integration \u2192 Manage Bots.<\/p>\n\n\n\n
Build Your Own AI Chatbot Without The Need To Sign up<\/a><\/code><\/pre>\n\n\n\nStep 2: Create welcome messages & answers for your chatbot<\/h4>\n\n\n\n
Go to the \u2018Kompose \u2013 Bot Builder\u2019<\/a> section and select the bot you created.<\/p>\n\n\n\nFirst, set the welcome message for your chatbot. The welcome message is the first message that the chatbot sends to the user who initiates a chat.<\/p>\n\n\n\n
Click the \u201cWelcome Message\u201d section. In the \u201cEnter Welcome message \u2013 Bot\u2019s Message\u201d box, provide the message your chatbot should be shown to the users when they open the chat and then save the welcome intent.<\/p>\n\n\n\n
After creating the welcome message, the next step is to feed answers\/intents. These answers\/intents can be the common questions about your product and service.<\/p>\n\n\n\n
The answers section is where you\u2019ve to add all the user\u2019s messages and the chatbot responses.<\/p>\n\n\n\n
Go to the \u201cAnswer\u201d section, click +Add, then give an \u2018Intent name\u2019<\/p>\n\n\n\n
In the Configure user\u2019s message section \u2013 you need to mention the phrases that you expect from the users that will trigger. <\/p>\n\n\n\n![\"Screenshot](\"https:\/\/www.kommunicate.io\/blog\/wp-content\/uploads\/2024\/01\/React-Native-img-5-1024x532.png\")
<\/figure>\n\n\n\nConfigure the bot\u2019s reply section \u2013 you need to mention the responses (Text or as Rich messages<\/a>) the chatbot will deliver to the users for the particular message. You can add any number of answers and follow-up responses for the chatbot. I have used custom payload by selecting the \u201cCustom\u201d option in the \u201cMore\u201d option.<\/p>\n\n\n\nOnce you have configured the responses, you need to click on \u201cTrain Bot\u201d which is at the button right and to the left of the preview screen. Once successfully trained, a toast \u201cAnser training completed\u201d will come at the top right corner.<\/p>\n\n\n\n![\"Screenshot](\"https:\/\/www.kommunicate.io\/blog\/wp-content\/uploads\/2024\/01\/React-Native-img-6-1024x536.png\")
<\/figure>\n\n\n\n
Step 3: Setup the React Native chatbot development environmen<\/h4>\n\n\n\nhttps:\/\/reactnative.dev\/docs\/environment-setup<\/a><\/pre>\n\n\n\n
<\/a>Step 4: Create a React Native app<\/h4>\n\n\n\nCreate a new React Native app (my-app) by using the command in your terminal or Command Prompt:<\/p>\n\n\n\n
npx react-native init my-app<\/pre>\n\n\n\n
Step 4: Now, navigate to the my-app folder<\/h4>\n\n\n\ncd my-app<\/pre>\n\n\n\nStep 5: Install Kommunicate to your project<\/h4>\n\n\n\n
To add the Kommunicate module to your React Native application, add it using npm:<\/p>\n\n\n\n
npm install react-native-kommunicate-chat --save<\/pre>\n\n\n\nStep 6: Add Kommunicate code to your project<\/h4>\n\n\n<\/div>\n\n\nNavigate to App.js in your project. By default, a new project contains demo code which is not required. You can remove those codes and write your code to start a conversation in Kommunicate.<\/p>\n\n\n\n
First, import Kommunicate using:<\/p>\n\n\n\n
import RNKommunicateChat from 'react-native-kommunicate-chat';<\/pre>\n\n\n\nThen, create this a method to open conversation before returning any views:<\/p>\n\n\n
\n![\"Code](\"https:\/\/www.kommunicate.io\/blog\/wp-content\/uploads\/2022\/06\/Screenshot-2022-06-17-at-5.13.06-PM.png\")
<\/figure>\n<\/div>\n\n\nNext, we need to add a button, which when clicked would open a conversation. Add these React elements and return them.<\/p>\n\n\n
\n![\"React](\"https:\/\/www.kommunicate.io\/blog\/wp-content\/uploads\/2022\/06\/Screenshot-2022-06-17-at-5.13.39-PM.png\")
<\/figure>\n<\/div>\n\n\nconst App: () => Node = () => {\nconst isDarkMode = useColorScheme() === 'dark';\n\u00a0\u00a0const backgroundStyle = {\n\u00a0\u00a0\u00a0\u00a0backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,\n\u00a0\u00a0};\n\u00a0\u00a0startConversation = () => {\n\u00a0\u00a0\u00a0\u00a0let conversationObject = {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'appId': 'eb775c44211eb7719203f5664b27b59f' \/\/ The [APP_ID](https:\/\/dashboard.kommunicate.io\/settings\/install) obtained from kommunicate dashboard.\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0RNKommunicateChat.buildConversation(conversationObject, (response, responseMessage) => {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (response == "Success") {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log("Conversation Successfully with id:" + responseMessage);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0}\n\u00a0\u00a0return (\n\u00a0\u00a0\u00a0\u00a0<SafeAreaView style={styles.con}>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<ScrollView\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0contentInsetAdjustmentBehavior="automatic"\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0style={backgroundStyle}>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<Header \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<View\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0style={{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0backgroundColor: isDarkMode ? Colors.black : Colors.white,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}}>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<Text style={styles.title}><\/Text>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<Text style={styles.title}>Here you can talk with our customer support.<\/Text>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<View style={styles.container}>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<Button\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title="Start conversation"\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onPress={() => startConversation()}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/View>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/View>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/ScrollView>\n\u00a0\u00a0\u00a0\u00a0<\/SafeAreaView>\n\u00a0\u00a0);\n};\n\n<\/pre><\/div>\n\n\nFAQ: How to Build a Chatbot with React native<\/strong><\/h2>\n\n\n\nAre you still afraid of building your own chatbot with react native? Just take a deep breath and read on. Here are some of the most frequently asked questions about building a chatbot <\/a>with react native. It should give you some more insights into the React native chatbot creation process.<\/p>\n\n\n