React JS has steadily climbed the popularity charts when it comes to Javascript libraries preferred by developers khổng lồ build fast, responsive & good looking websites.

Bạn đang xem: Cách tạo chatbot trong React JS

Building a chatbot in react Js website may have been a complicated affair in the past, but not so today, thanks to lớn Kommunicate’s Kompose chatbot builder.

In this blog post, we will teach you how khổng lồ integrate the chatbot in react js website.

We’ll vày the integration in 2 phases:

Add the created chatbot in React JS website.

Let’s jump right into it.

Phase 1: Create a chatbot in Kompose and thiết đặt the answers

Step 1: cài đặt an tài khoản in Kommunicate

If you vày not have an tài khoản in Kommunicate, you can create one here for free.

Next, log in to lớn your Kommunicate dashboard & navigate khổng lồ the Bot Integration section. Locate the Kompose section and click on Integrate Bot.

*

If you want to lớn 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’s Avatar, & your bot’s default language & click “Save and Proceed”.

*

You are now done creating your bot and all you have lớn worry about now is khổng lồ “Enable bot khổng lồ human transfer” when the bot encounters a query it does not understand. Enable this feature và click “Finish Bot Setup.”

*
From the next page, you can choose if this bot will handle all the incoming conversations. Click on “Let this bot handle all the conversations” and you are good to go.

*

Newly created bot here: Dashboard →Bot Integration → Manage Bots.

Step 2: Create welcome messages & answers for your chatbot

Go to the ‘Kompose – Bot Builder’ section and select the bot you created.

First, 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.

Click the “Welcome Message” section. In the “Enter Welcome message – Bot’s Message” box, provide the message your chatbot should be shown khổng lồ the users when they open the chat & then save the welcome intent.

After creating the welcome message, the next step is to feed answers/intents. These answers/intents can be the common questions about your product & service.

The answers section is where you’ve to showroom all the user’s messages & the chatbot responses.

Go to the “Answer” section, click +Add, then give an ‘Intent name’

In the Configure user’s message section – you need to mention the phrases that you expect from the users that will trigger.

*

Configure bot’s reply section – you need to lớn mention the responses (Text or as Rich messages) the chatbot will deliver to lớn the users for the particular message. You can địa chỉ any number of answers & follow-up responses for the chatbot. Here, I have used custom payload by selecting “Custom” option in “More” option.Once you have configured the responses, you need lớn click on “Train Bot” which is at the button right & to the left of the preview screen. Once successfully trained, a toast “Anser training completed” will come at the đứng đầu right corner.

*

Phase 2: add the created chatbot in react js website

Step 1: Create a React app

Create a new React ứng dụng (my-app) by using the command in your terminal or Command Prompt:

npx create-react-app my-app

Step 2: Now, navigate to the my-app folder

cd my-app

Step 3: Create a new file chat.js inside src folder

Once you create the chat.js, showroom the below code in component
Did
Mount. The below code will launch a chat widget on your website with the integrated Dialogflow bot. Make sure to lớn replace with your Kommunicate application ID.

You can get this code in the install section of Kommunicate as well.

import React, Component from "react";class Kommunicate
Chat extends Component constructor(props)super(props);component
Did
Mount() );render()return(
)export mặc định Kommunicate
Chat;

Here’s a screenshot of my code editor for the same:

*

Step 4: Start your tiện ích locally

Use the following command to lớn start your newly created trang web with the installed Kompose bot.

npm start

*
*

Here is the quick video


AtKommunicate, we are envisioning a world-beating customer tư vấn solution to lớn empower the new era of customer support. We would love khổng lồ have you on board to have a first-hand experience of Kommunicate. You can signuphereand start delighting your customers rightaway.

1. React
JS là gì? 

*
React được Facebook giới thiệu vào năm 2011, bọn họ quảng bá đây là thư viện có thể chấp nhận được Developer tạo nên các dự án công trình ứng dụng web lớn, gồm giao diện UI tinh vi từ một quãng mã nguồn nhỏ và độc lập.React
JS (đôi dịp cũng có thể gọi là React.JS hay React) là một thư viện Javascript giúp bạn nhanh chóng xây dựng giao diện ứng dụng (UI). React
JS rất có thể xây dựng website trọn vẹn sử dụng Javascript (để thao tác làm việc với HTML), được về tối ưu hiệu năng vày kỹ thuật Virtual DOM.Cách thiết đặt và bước đầu làm việc với React
OVl
Y1Pvl8W

 2. React
JS làm cho được hầu hết gì?

 React
JS hỗ trợ cho việc viết các đoạn code Javascript vẫn trở nên dễ ợt hơn vì chưng nó thực hiện một cú pháp quan trọng đó chính là cú pháp JSX. Trải qua JSX chất nhận được nhúng code HTML với Javascript.React
JS có thể chấp nhận được Developer phá vỡ những cấu tạo UI tinh vi thành số đông component độc lập. Dev sẽ không còn phải băn khoăn lo lắng về toàn diện và tổng thể ứng dụng web, lúc này Developer dễ dàng chia nhỏ dại các kết cấu UI/UX phức hợp thành từng component đơn giản và dễ dàng hơn. Đi kèm cùng với React
JS là không ít các công cụ phát triển giúp cho việc debug code một cách dễ dàng hơn.Một vào những ưu thế nữa của React
JS chính là sự thân thiện với SEO. Số đông các JS Framework không thân mật và gần gũi với những tìm kiếm mặc dù đã được nâng cao nhiều tuy vậy dưới sự hỗ trợ của các render tài liệu trả về bên dưới dạng web page giúp cho SEO chuẩn chỉnh hơn.

 3. Kiến thức căn cơ về React
JS

DOM-render.png" alt="*">