React неуклонно поднимается в чартах популярности, когда речь заходит о библиотеках Javascript, которые разработчики предпочитают для создания быстрых, отзывчивых и красивых веб-сайтов.

Создание чат-бота на веб-сайте ReactJS, возможно, было сложным делом в прошлом, но сегодня это не так, благодаря конструктору чат-ботов Kompose от Kommunicate.

В этом сообщении блога мы научим вас интегрировать бота Kompose в ваш веб-сайт React.

Мы проведем интеграцию в 2 этапа:

  1. Создайте чат-бота Kompose и настройте ответы.
  2. Добавьте созданного чат-бота на свой сайт React.

Давайте прыгнем прямо в него.

Фаза 1: Создайте чат-бота в Kompose и настройте ответы

Шаг 1: Настройте учетную запись в Communicate

Если у вас нет аккаунта в Kommunicate, вы можете бесплатно создать его здесь.

Затем войдите в свою панель управления Kommunicate и перейдите в раздел «Интеграция с ботом». Найдите раздел Compose и нажмите Интегрировать бота.

Если вы хотите создать бота с нуля, выберите пустой шаблон и перейдите в раздел «Настройка бота». Выберите имя своего бота, аватар вашего бота и язык вашего бота по умолчанию и нажмите «Сохранить и продолжить».

Теперь вы закончили создание своего бота, и теперь все, о чем вам нужно беспокоиться, это «Включить передачу бота человеку», когда бот сталкивается с запросом, который он не понимает. Включите эту функцию и нажмите «Завершить настройку бота».

На следующей странице вы можете выбрать, будет ли этот бот обрабатывать все входящие разговоры. Нажмите «Позволить этому боту обрабатывать все разговоры», и все готово.

Недавно созданный бот здесь: Панель инструментов → Интеграция ботов → Управление ботами.

Шаг 2. Создайте приветственные сообщения и ответы для своего чат-бота.

Перейдите в раздел Kompose — Bot Builder и выберите созданного вами бота.

Сначала установите приветственное сообщение для своего чат-бота. Приветственное сообщение — это первое сообщение, которое чат-бот отправляет пользователю, который инициирует чат.

Щелкните раздел «Приветственное сообщение». В поле «Введите приветственное сообщение — сообщение бота» укажите сообщение, которое ваш чат-бот должен показывать пользователям, когда они открывают чат, а затем сохраните приветственное намерение.

После создания приветственного сообщения следующим шагом будет отправка ответов/намерений. Эти ответы/намерения могут быть общими вопросами о вашем продукте и услуге.

В разделе ответов вы должны добавить все сообщения пользователя и ответы чат-бота.

Перейдите в раздел «Ответ», нажмите «+Добавить», затем укажите «Имя намерения».

В разделе Настроить сообщение пользователя — вам нужно указать фразы, которые вы ожидаете от пользователей, которые будут срабатывать.

Настройте раздел ответов бота — вам нужно указать ответы (текстовые или в виде расширенных сообщений), которые чат-бот будет доставлять пользователям на конкретное сообщение. Вы можете добавить любое количество ответов и последующих ответов для чат-бота. Здесь я использовал пользовательскую полезную нагрузку, выбрав опцию Пользовательская в опции Дополнительно.

После того, как вы настроили ответы, вам нужно нажать "Обучить бота", которая находится справа и слева от экрана предварительного просмотра. После успешного обучения в правом верхнем углу появится уведомление "Обучение Anser завершено".

Этап 2: добавьте созданный чат-бот на свои веб-сайты React.

Шаг 1: Создайте приложение React

Создайте новое приложение React (my-app), используя команду в терминале или командной строке:

npx create-react-app my-app

Шаг 2. Теперь перейдите в папку my-app

cd my-app

Шаг 3: Создайте новый файл chat.js в папке src.

После создания chat.js добавьте приведенный ниже код в componentDidMount. Приведенный ниже код запустит виджет чата на вашем сайте со встроенным ботом Dialogflow. Обязательно замените ‹YOUR_APP_ID› вашим ID приложения для общения.

Вы также можете получить этот код в разделе Установка Communicate.

import React, { Component } from “react”;
class KommunicateChat extends Component {
constructor(props){
super(props);
}
componentDidMount(){
(function(d, m){
var kommunicateSettings =
{“appId”:”2bf085baaad3f559103cf127c1cc98c10″,”popupWidget”:true,”automaticChatOpenOnNavigation”:true};
var s = document.createElement(“script”); s.type = “text/javascript”; s.async = true;
s.src = “https://widget.kommunicate.io/v2/kommunicate.app”;
var h = document.getElementsByTagName(“head”)[0]; h.appendChild(s);
window.kommunicate = m; m._globals = kommunicateSettings;
})(document, window.kommunicate || {});
}
render(){
return(
<div>
<h1>Hello</h1>
</div>
)
}
}
export default KommunicateChat;

Вот скриншот моего редактора кода для того же:

Шаг 4. Запустите приложение локально

Используйте следующую команду, чтобы запустить только что созданный веб-сайт с установленным ботом Kompose.

npm start

Вуаля! Насколько это было просто? Выполнив эти несколько простых шагов, вы сможете интегрировать бота Kompose в веб-сайты React. Вот так виджет чата выглядит на сайте:

Первоначально опубликовано на https://www.kommunicate.io/ 11 января 2022 г.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord. Заинтересованы в Взлом роста? Ознакомьтесь с разделом Схема.