Простой чат-бот для сайта на чистом JavaScript

В этой статье разберём, как добавить на сайт простой чат-бот SimpleChatbot и создать для него необходимый сценарий диалога.
О чат-боте SimpleChatbot
SimpleChatbot — это простой чат-бот для сайта, сценарий диалога которого определяется JSON-файлом или данными, расположенными непосредственно в скрипте. Он состоит из 2 частей: клиентской и северной. Первая написана на чистом JavaScript, а вторая - на PHP.
SimpleChatbot очень прост в настройке и установке на сайт. Он не зависит от сторонних сервисов и библиотек. Для его работы (серверной стороны) нужен веб-сервер Nginx, Apache или любой другой, умеющий выполнять php-скрипты.
На клиентской стороне кроме самого скрипта чат-бота («chatbot.js») используется ещё FingerPrint JS. Он применяется для создания отпечатка браузера (выполнение анонимной идентификации клиента). Сам чат-бот непосредственно от него не зависит. Его действие заключается в формирование только некоторого идентификатора, который затем сохраняется в LocalStorage и используется чат-ботом для передачи его на сервер. А серверу он нужен только для создания файла с соответствующим именем, в который он будет сохранять всю переписку бота с этим пользователем. По умолчанию файлы сохраняются в папку chats
.
Пример содержимого каталога chats
:

В этом примере имеются 2 файла. Каждый из них – это некий диалог бота с определённым клиентом.
Если его открыть, то мы увидим весь контент «разговора».
Например:

Если обратно вернуться к FingerPrint JS и немного углубиться в эту тему, то увидим, что значение, которое он генерирует сохраняется в LocalStorage. При этом в качестве имени ключа используется значение переменной keyLS
. По сути, здесь не важно, что использовать, FingerPrint JS , или какую-то другую библиотеку, или свой код, главное, чтобы он создавал некий идентификатор клиента и помещал его в хранилище.
Исходный код этого чат-бота является открытым и находится на GitHub. Текущая версия 1.1.1. В качестве лицензии, используется MIT. Эта лицензия позволяет данное программное обеспечение использовать как в бесплатных, так и в коммерческих проектах (при условии, что текст лицензии поставляется вместе с этим программным обеспечением).
Установка чат-бота на сайт
1. Скачать последний релиз SimpleCatbot (v. 1.1.1) с GitHub и распаковать его.
2. Загрузить папку «chatbot»
в корень вашего сайта или любое другое место. Если вы выбрали последнее, то в этом случае необходимо будет ещё в определённых местах изменить отредактировать пути к файлам.
3. Добавить стили (файл «chatbot.css») к странице:
<link rel="stylesheet" href="/chatbot/chatbot.css">
4. Подключить скрипты («fp2.js» и «chatbot.js»):
<!-- FingerPrint JS --> <script src="/chatbot/fp2.js"></script> <!-- ChatBot JS --> <script src="/chatbot/chatbot.js"></script>
Код в «chatbot.js» написан с использованием современного синтаксиса JavaScript. А это значит, что он может выполняться только в ограниченном количестве браузеров и его не рекомендуется использовать на продакшене. Вместо него желательно подключить к странице файл «chatbot_es5.js». Он выполняет те же самые действия, которые просто переписаны на более старом синтаксисе и поддерживаются всеми используемые в данное время браузерами включая IE11.
<!-- FingerPrint JS --> <script src="/chatbot/fp2.js"></script> <!-- ChatBot JS (для поддержки всех используемых в настоящее время браузеров) --> <script src="/chatbot/chatbot_es5.js"></script>
5. Поместить в HTML документ кнопку, с помощью которой мы будем вызывать окно чат-бота:
<!-- chatbot-btn --> <div class="chatbot-btn"> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" width="20" height="20"><path fill="currentColor" d="M14 8.999v-5a2.003 2.003 0 00-2-2H3a2.003 2.003 0 00-2 2v5a2.003 2.003 0 002 2v1.694a.302.302 0 00.486.244l2.587-1.945H12A1.997 1.997 0 0014 9zm3-2h-2v2a3.003 3.003 0 01-3 3H7v2a2.003 2.003 0 002 2h3.927l2.59 1.941c.198.15.483.004.483-.243v-1.701h1a2.003 2.003 0 002-1.997v-5a2.003 2.003 0 00-2-2z" /></svg> </div>

Далее необходимо поместить на страницу скрипт после подключения этих файлов.
1 вариант скрипта – с загрузкой сценария диалога из JSON файла («/data/data-1.json») посредством AJAX.
<script> // 1 - Указание ключа в localstorage, в котором будет храниться отпечаток браузера const keyLS = 'fingerprint'; // 2 - Указание URL файла, в котором находится сценарий диалога для чат-бота const url = '/data/data-1.json'; // 3 - Указание CSS селектора кнопки, с помощью которой будем вызывать окно диалога с чат-ботом const chatbotBtnSel = '.chatbot-btn'; // 4 - URL к chatbot.php const urlChatbot = '/chatbot/chatbot.php'; // добавление хэша fingerprint в localstorage let fingerprint = localStorage.getItem(keyLS); if (!fingerprint) { Fingerprint2.get(function (components) { fingerprint = Fingerprint2.x64hash128(components.map(function (pair) { return pair.value }).join(), 31) localStorage.setItem(keyLS, fingerprint) }); } // получение json-файла, содержащего сценарий диалога для чат-бота через AJAX const request = new XMLHttpRequest(); request.open('GET', url, true); request.responseType = 'json'; request.onload = function () { const status = request.status; if (status === 200) { const data = request.response; // инициализация ChatBotByItchief посредством вызова следующей функции с передачи ей нужных параметров chatBotByItchiefInit({ chatbotBtnSel: chatbotBtnSel, data: data, url: urlChatbot, keyLS: keyLS }); } else { console.log(status, request.response); } }; request.send(); </script>
Настройка чат-бота выполняется посредством установки определённых значений следующим переменным:
keyLS
- имя ключа в LocalStorage, в котором будет храниться отпечаток браузера;url
- адрес JSON файла, содержащего сценарий диалога для чат-бота;chatbotBtnSel
- селектор кнопки, посредством которой будет выполняться открытие окна с чат-ботом;urlChatbot
- путь к файлуchatbot.php
.
Все основные действия, связанные с инициализацией чат-бота в коде, выполняет функция chatBotByItchiefInit
. Она создаёт экземпляр класса ChatBotByItchief
и привязывает открытие окна чат-бота к кнопке chatbotBtnSel
.
2 вариант скрипта – с помещением данных для чат-бота непосредственно в сценарий.
<script> // 1 - Указание ключа в localstorage, в котором будет храниться отпечаток браузера const keyLS = 'fingerprint'; // 2 - Указание CSS селектора кнопки, с помощью которой будем вызывать окно диалога с чат-ботом const chatbotBtnSel = '.chatbot-btn'; // 3 - URL к chatbot.php const url = '/chatbot/chatbot.php'; // 4 - Описание данных, определяющие сценарий диалога для чат-бота const data = { /*...*/ }; // добавление хэша fingerprint в localstorage let fingerprint = localStorage.getItem(keyLS); if (!fingerprint) { Fingerprint2.get(function (components) { fingerprint = Fingerprint2.x64hash128(components.map(function (pair) { return pair.value }).join(), 31) localStorage.setItem(keyLS, fingerprint) }); } // инициализация ChatBotByItchief посредством вызова следующей функции с передачи ей нужных параметров chatBotByItchiefInit({ chatbotBtnSel: chatbotBtnSel, data: data, url: url, keyLS: keyLS }); </script>
Настройка чат-бота в этом варианте практически ничем отличается от способа с JSON за исключением того, что данные здесь уже находятся непосредственно в скрипте (в переменной data
), и их не нужно дополнительно загружать через AJAX.
Составление диалога для чат-бота
Написание реплик для чат-бота выполняется в формате объекта. При создании объекта необходимо определить 2 ключа. Первый ключ (bot
) отвечает за сообщения бота, а второй (human
) - пользователя.
const data = { bot: { /* ... */ }, human: { /* ... */ } }
Далее в bot
необходимо поместить сами реплики. Описание их также выполняется в формате объекта. В качестве ключа используется число, а в роли значения – объект, состоящий из свойств content
и human
. В content
помещаем сам контент, а в human
– массив ответов для пользователя.
const data = { bot: { 0: { content: 'Привет! Я Инфинити - бот поддержки сайта <a href="https://itchief.ru" target="_blank">itchief.ru</a>', human: [0, 1, 2] }, /* ... */ } human: { /* ... */ } }
Кстати, работа чат-бота всегда стартует с приветственного сообщения бота, заданного в 0
. После показа этой реплики и некоторой паузы будет выведены варианты ответов для пользователя, указанные в human
.

Создание ответов для пользователя выполняется аналогичным образом. Т.е. в content
помещаем ответ пользователя, который будет выведен в виде кнопки, а в bot
– номер следующей реплики бота при выборе этого ответа пользователем.
const data = { bot: { 0: { content: 'Привет! Я Инфинити - бот поддержки сайта <a href="https://itchief.ru" target="_blank">itchief.ru</a>', human: [0, 1, 2] }, /* ... */ } human: { 0: { content: 'Привет! Я рад с тобой познакомиться', bot: 1 }, 1: { content: 'Салют!', bot: 2 }, 2: { content: 'Приветик, Инфинити!', bot: 2 }, /* ... */ } }

Но если нужно, чтобы пользователь не просто выбрал один из предоставленных ему ответов, а ввёл некоторые данные. То в этом случае в качестве значения content
нужно указать пустую строку. В этом сценарии пользователю станет доступно поле для ввода (input
) информации и кнопка, с помощью которой её можно будет отправить.
Если данные, которые ввёл пользователь вы хотите использовать в репликах, то им необходимо задать имя. Осуществляется это с помощью свойства name
.
const data = { bot: { 0: { content: 'Привет! Я Инфинити - бот поддержки сайта <a href="https://itchief.ru" target="_blank">itchief.ru</a>', human: [0, 1, 2] }, 1: { content: 'Я тоже рад, как мне к Вам обращаться', human: [3] }, 2: { content: 'Как мне к Вам обращаться?', human: [3] }, /* ... */ } human: { 0: { content: 'Привет! Я рад с тобой познакомиться', bot: 1 }, 1: { content: 'Салют!', bot: 2 }, 2: { content: 'Приветик, Инфинити!', bot: 2 }, 3: { content: '', bot: 3, name: 'name' }, /* ... */ } }

Например, в этом примере, мы установили данным, которые введёт пользователь, имя name
. Далее эти данные мы можем использовать в репликах бота используя это имя, заключенное в двойные фигурные скобки (например, {{name}}
).
const data = { bot: { 0: { content: 'Привет! Я Инфинити - бот поддержки сайта <a href="https://itchief.ru" target="_blank">itchief.ru</a>', human: [0, 1, 2] }, 1: { content: 'Я тоже рад, как мне к Вам обращаться', human: [3] }, 2: { content: 'Как мне к Вам обращаться?', human: [3] }, 3: { content: '{{name}}, что Вас интересует?', human: [4, 5] }, /* ... */ } human: { 0: { content: 'Привет! Я рад с тобой познакомиться', bot: 1 }, 1: { content: 'Салют!', bot: 2 }, 2: { content: 'Приветик, Инфинити!', bot: 2 }, 3: { content: '', bot: 3, name: 'name' }, 4: { content: 'Меня интересует, как я могу использовать этот чат-бот у себя на сайте', bot: 4 }, 5: { content: 'Хочу оставить запрос разработчику чат-бота', bot: 5 }, /* ... */ } }

Далее, придерживаясь этих правил при написании реплик составляем нужный диалоговый сценарий чат-бота для своего сайта.
Пример сценария:
const data = { bot: { 0: { content: 'Привет! Я Инфинити - бот поддержки сайта <a href="https://itchief.ru" target="_blank">itchief.ru</a>', human: [0, 1, 2] }, 1: { content: 'Я тоже рад, как мне к Вам обращаться?', human: [3] }, 2: { content: 'Как мне к Вам обращаться?', human: [3] }, 3: { content: '{{name}}, что Вас интересует?', human: [4, 5] }, 4: { content: '{{name}}, для этого перейдите на <a href="https://itchief.ru/javascript/chatbot-for-website" target="_blank">эту страницу</a>. Она содержит подробную инструкцию по использованию этого чат-бота.', human: [6] }, 5: { content: "{{name}}, какой у Вас вопрос?", human: [7] }, 6: { content: '{{name}}, мы получили Ваш вопрос! Скажите, как с Вами удобнее будет связаться?', human: [8, 9] }, 7: { content: '{{name}}, укажите пожалуйста ваш телефон', human: [10] }, 8: { content: '{{name}}, укажите пожалуйста ваш Email ниже', human: [10] }, 9: { content: 'Готово! {{name}}, мы свяжемся с вами в ближайшее время по {{contact}}. Всего хорошего!', human: [6] }, }, human: { 0: { content: 'Привет! Я рад с тобой познакомиться', bot: 1 }, 1: { content: 'Салют!', bot: 2 }, 2: { content: 'Приветик, Инфинити!', bot: 2 }, 3: { content: '', bot: 3, name: 'name' }, 4: { content: 'Меня интересует, как я могу использовать этот чат-бот у себя на сайте', bot: 4 }, 5: { content: 'Хочу оставить запрос разработчику чат-бота', bot: 5 }, 6: { content: 'В начало', bot: 3 }, 7: { content: '', bot: 6, name: '' }, 8: { content: 'по телефону', bot: 7 }, 9: { content: 'по email', bot: 8 }, 10: { content: '', bot: 9, name: 'contact' }, } }
Когда сценарий у вас готов, его следует, если вы используете 2 вариант скрипта, поместить вместо этой строчки:
const data = { /*...*/ };
При использовании 1 варианта скрипта, его необходимо перевести в строку JSON. Для этого можно воспользоваться каким-нибудь онлайн сервисом или стандартным JavaScript методом stringify
:
const data = { /* ... */ }; const json = JSON.stringify(data); console.log(json);
Если вы воспользовались последним советом, то после открытия страницы из консоли браузера нужно скопировать полученную строку (без обрамляющих её кавычек). После этого вставить её в файл с расширением json и загрузить его на сервер.
в Google Chrome всё работает