What is a Chatbot?

The chatbot is needed to simplify the interaction between the humans and the device with predefined steps. Chatbots or Virtual Assistants are currently one of the most popular technologies.

  • Chatbots are important because it has a unique way of interaction with the end-user and it enhances the user experience as well as response time.
  • Chatbot services are used in industries like Health Insurance, Ecommerce, Real Estate, etc to improve customer engagement and operational efficiency by reducing the typical cost of customer service.
  • To be successful, a chatbot solution should be able to effectively perform both of these tasks. Human support plays a key role here: Regardless of the kind of approach and the platform, human intervention is crucial in configuring, training and optimizing the chatbot system. Therefore, most chatbot developers now focus on builing human-like conversational bots.

We built a Chatbot for one of our customers as a mobile app to perform a set of processes in an interactive way. Integrating a chatbot in React Native apps follows a comprehensive process.

Read Also: 13 Most Powerful Chatbot Platforms You Should Know

Download chatbot development guide

Basic Features Supported By React Native Chatbot

Chatbot apps built with React Native have the following features: 

  • Create simple conversational chatbot by defining workflow – It allows to define all the steps with a native JSON object.
  • Change the styling of the chat.
  • A step could be one of the following,
    • User step – Where user will type in and send a message, here the bot waits for the user to respond before pushing the next message.
    • Options step – Where we can simply show multiple options to choose from and based on the choice user made, the bot will perform the next step.
    • Custom step – Where we can actually render our own React.
    • Update step – Where we can define which step to be updated when the user takes action on the current step.

Setup Chatbot in React Native App

  • Install the react-native-chatbot library
  • Follow all the instructions to configure the chatbot in lib.

ChatBot has one prop called ‘steps’ in which we have to pass the flow of the conversation built using the React Native platform.

Code snippet

Customizations Needed

  • Capture Image using the camera and send it as a chat message.
  • Allow the end user to search for the places using Google maps API.
  • Render our own component in response to user’s input on a specific step, showing scrollable list based on the data received in API response.
  • On selection, send message from custom component as a user response.

To solve the above challenges in chatbot app development solutions, we have to fork the repo and make changes as per our requirements and use the forked URL,

“react-native-Chabot”: “git+https://git@github.com/BoTreeConsultingTeam/react-native-chatbot.git“

Read Also: Facebook Chatbot Case Study for Restaurant Order Management

Capture Image using the Camera and send it as a Chat Message

Let’s see how we achieved this using a hybrid framework like React Native.

Chatbot has one feature called “custom component”, instead of displaying text we can also render a custom component using the “component” attribute into our steps JSON object. React Native apps that have a chatbot can easily integrate this.

To achieve that,

  • Install `react-native-image-picker` into your project.
  • Create one component called `captureImage.js` which will capture the image and upload it to the S3.
  • Change your steps in which you want to add component an attribute into it.
  • You can also give the extra data into the metadata attribute.

const steps = [{

id: ‘image-upload’,

component: <CaptureImage nextTrigger=’show-message’/>,

metadata: { dataType: ‘image-url’ }

}]

Code snippet

That’s it, it will show the image into the chat screen after capturing.

Also, the same way you can create a custom component for Google Places API, but you have to manually trigger the next step via `triggerNextStep`.

Chatbot gif

Checkout FACEBOOK CHATBOT CASE STUDY

explore more about facebook chatbot case study

Consulting is free – let us help you grow!