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

Александр Мальцев
Александр Мальцев
23K
49
Простой чат-бот для сайта на чистом JavaScript
Содержание:
  1. О чат-боте SimpleChatbot
  2. Установка чат-бота на сайт
  3. Составление диалога для чат-бота
  4. Новые возможности чат-бота
  5. Комментарии

В этой статье разберём, как добавить на сайт простой чат-бот SimpleChatbot и создать для него необходимый сценарий диалога.

О чат-боте SimpleChatbot

SimpleChatbot — это простой чат-бот для сайта, сценарий диалога которого определяется JSON-файлом или данными, расположенными непосредственно в скрипте. Состоит он из 2 частей: клиентской и северной. Первая написана на чистом JavaScript, вторая - на PHP.

SimpleChatbot очень прост в настройке и установке на сайт. Он не зависит от сторонних сервисов и библиотек. Для его работы (серверной стороны) нужен веб-сервер Nginx, Apache или любой другой, умеющий выполнять php-скрипты.

Демо чат-бота

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

Пример содержимого каталога chats:

Пример содержимого папки chats

В этом примере имеются 2 файла. Каждый из них – это некий диалог бота с определённым клиентом.

Если его открыть, то мы увидим весь контент «разговора».

Например:

Пример разговора чат-бота с клиентом

Если обратно вернуться к FingerPrint JS и немного углубиться в эту тему, то увидим, что значение, которое он генерирует сохраняется в LocalStorage. При этом в качестве имени ключа используется значение configChatbot.key. По сути, здесь не важно, что использовать, FingerPrint JS , или какую-то другую библиотеку, или свой код, главное, чтобы он создавал некий идентификатор клиента и помещал его в хранилище.

Исходный код этого чат-бота является открытым и находится на GitHub. Текущая версия 1.3.2. В качестве лицензии, используется MIT. Эта лицензия позволяет данное программное обеспечение использовать как в бесплатных, так и в коммерческих проектах (при условии, что текст лицензии поставляется вместе с этим программным обеспечением).

Установка чат-бота на сайт

Порядок действий:

1. Скачать последний релиз SimpleCatbot (v. 1.3.2) с 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» написан на синтаксисе, который поддерживается всеми используемые в данное время браузерами включая IE11.

<!-- FingerPrint JS -->
<script src="/chatbot/fp2.js"></script>
<!-- ChatBot JS -->
<script src="/chatbot/chatbot.js"></script>

5. Поместить в HTML документ кнопку, посредством которой будем вызывать окно чат-бота:

<!-- Кнопка для вызова окна чат-бота -->
<div class="chatbot__btn">
  <div class="chatbot__tooltip d-none">Есть вопрос?</div>
</div>
Кнопка для открытия окна чат-бота

Далее необходимо поместить на страницу скрипт после подключения этих файлов.

1 вариант скрипта – с загрузкой сценария диалога из JSON файла («/data/data-1.json») посредством AJAX.

// конфигурация чат-бота
const configChatbot = {};
// CSS-селектор кнопки, посредством которой будем вызывать окно диалога с чат-ботом
configChatbot.btn = '.chatbot__btn';
// ключ для хранения отпечатка браузера
configChatbot.key = 'fingerprint';
// реплики чат-бота
configChatbot.replicas = '/data/data-1.json';
// корневой элемент
configChatbot.root = SimpleChatbot.createTemplate();
// URL chatbot.php
configChatbot.url = '/chatbot/chatbot.php';
// переменная для хранения экземпляра
let chatbot = null;
// добавление ключа для хранения отпечатка браузера в LocalStorage
let fingerprint = localStorage.getItem(configChatbot.key);
if (!fingerprint) {
  Fingerprint2.get(function (components) {
    fingerprint = Fingerprint2.x64hash128(components.map(function (pair) {
      return pair.value
    }).join(), 31)
    localStorage.setItem(configChatbot.key, fingerprint)
  });
}
// при клике по кнопке configChatbot.btn
document.querySelector(configChatbot.btn).onclick = function (e) {
  this.classList.add('d-none');
  const $tooltip = this.querySelector('.chatbot__tooltip');
  if ($tooltip) {
    $tooltip.classList.add('d-none');
  }
  configChatbot.root.classList.toggle('chatbot_hidden');
  if (chatbot) {
    return;
  }
  // получение json-файла, содержащего сценарий диалога для чат-бота через AJAX
  const request = new XMLHttpRequest();
  request.open('GET', configChatbot.replicas, true);
  request.responseType = 'json';
  request.onload = function () {
    const status = request.status;
    if (status === 200) {
      const data = request.response;
      // для поддержки IE11
      if (typeof data === 'string') {
        configChatbot.replicas = JSON.parse(data);
      } else {
        configChatbot.replicas = data;
      }
      // инициализация SimpleChatbot
      chatbot = new SimpleChatbot(configChatbot);
      chatbot.init();
    } else {
      console.log(status, request.response);
    }
  };
  request.send();
};

Настройка чат-бота выполняется посредством установки определённых ключей configChatbot:

  • configChatbot.btn - селектор кнопки, посредством которой будем вызывать окно диалога с чат-ботом;
  • configChatbot.key - имя ключа LocalStorage, в котором будет храниться отпечаток браузера;
  • configChatbot.replicas - URL json-файла, содержащего сценарий диалога для чат-бота;
  • configChatbot.root - ссылка, на корневой элемент чат-бота;
  • configChatbot.url - путь к файлу chatbot.php.

Инициализация чат-бота в коде выполняется так:

let chatbot = new SimpleChatbot(configChatbot);
chatbot.init();

2 вариант скрипта – с помещением данных для чат-бота непосредственно в сценарий.

// конфигурация чат-бота
const configChatbot = {};
// CSS-селектор кнопки, посредством которой будем вызывать окно диалога с чат-ботом
configChatbot.btn = '.chatbot__btn';
// ключ для хранения отпечатка браузера
configChatbot.key = 'fingerprint';
// реплики чат-бота
configChatbot.replicas = { /*...*/ };
// корневой элемент
configChatbot.root = SimpleChatbot.createTemplate();
// URL chatbot.php
configChatbot.url = '/chatbot/chatbot.php';
// создание SimpleChatbot
let chatbot = new SimpleChatbot(configChatbot);
// при клике по кнопке configChatbot.btn
document.querySelector(configChatbot.btn).onclick = function (e) {
  this.classList.add('d-none');
  const $tooltip = this.querySelector('.chatbot__tooltip');
  if ($tooltip) {
    $tooltip.classList.add('d-none');
  }
  configChatbot.root.classList.toggle('chatbot_hidden');
  chatbot.init();
};
// добавление ключа для хранения отпечатка браузера в LocalStorage
let fingerprint = localStorage.getItem(configChatbot.key);
if (!fingerprint) {
  Fingerprint2.get(function (components) {
    fingerprint = Fingerprint2.x64hash128(components.map(function (pair) {
      return pair.value
    }).join(), 31)
    localStorage.setItem(configChatbot.key, fingerprint)
  });
}

Настройка чат-бота в этом варианте практически ничем отличается от способа с JSON за исключением того, что данные здесь уже находятся непосредственно в скрипте (в configChatbot.replicas), и их не нужно дополнительно загружать через AJAX.

Составление диалога для чат-бота

Написание реплик для чат-бота выполняется в формате объекта. При создании объекта необходимо определить 2 ключа. Первый ключ (bot) отвечает за сообщения бота, а второй (human) - пользователя.

configChatbot.replicas = {
  bot: { /* ... */ },
  human: { /* ... */ }
}

Далее в bot необходимо поместить сами реплики. Описание их также выполняется в формате объекта. В качестве ключа используется число, а в роли значения – объект, состоящий из свойств content и human. В content помещаем сам контент, а в human – массив ответов для пользователя.

configChatbot.replicas = {
  bot: {
    0: { content: 'Привет! Я Инфинити - бот поддержки сайта <a href="https://itchief.ru" target="_blank">itchief.ru</a>', human: [0, 1, 2] },
    /* ... */
  },
  human: { /* ... */ }
}

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

Приветственная реплика бота

Создание ответов для пользователя выполняется аналогичным образом. Т.е. в content помещаем ответ пользователя, который будет выведен в виде кнопки, а в bot – номер следующей реплики бота при выборе этого ответа пользователем.

configChatbot.replicas = {
  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.

configChatbot.replicas = {
  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}}).

configChatbot.replicas = {
  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 },
    /* ... */
  }
}
Использование имени пользователя в реплики чат-бота

Далее, придерживаясь этих правил при написании реплик составляем нужный диалоговый сценарий чат-бота для своего сайта.

Пример сценария:

configChatbot.replicas = {
  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 вариант скрипта, поместить вместо этой строчки:

configChatbot.replicas = { /*...*/ };

При использовании 1 варианта скрипта, его необходимо перевести в строку JSON. Для этого можно воспользоваться каким-нибудь онлайн сервисом или стандартным JavaScript методом stringify:

configChatbot.replicas = { /* ... */ };
const json = JSON.stringify(configChatbot.replicas);
console.log(json);

Если вы воспользовались последним советом, то после открытия страницы из консоли браузера нужно скопировать полученную строку (без обрамляющих её кавычек). После этого вставить её в файл с расширением json и загрузить его на сервер.

Новые возможности чат-бота

В SimpleChatbot начиная с версии 1.2.0 для бота можно указывать сразу несколько сообщений. Для этого их необходимо передать в формате массива. Такие сообщения будут выведены последовательно друга за другом в виде отдельных реплик.

Например:

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

В версии 1.3.0 добавлена возможность отправки сообщения клавишей Enter, метод reset для очистки (сброса) чата и кнопка для вызова этого метода.

Комментарии: 49

  1. igar
    igar
    2022-09-23 09:21:30
    урааа. прикрутил бота к сайту и он работает. как то получилось. спасибо :)
    такого никто не спрашивал, я тут наверное самый бестолковый :)
    подскажите, пожалуйста где чего нибудь понажимать чтобы бот был поверх страницы, а то некоторые элементы его закрывают.
    предполагаю что там что то надо изменить в стилях css. сайта или бота?
    Спасибо.
    itchief.ru/assets/uploadify/f/4/4/f44fc18d07d3cc3dc9852382406252c3.jpg

  1. Александр Мальцев
    Александр Мальцев
    2022-09-27 03:37:00
    Пожалуйста! Нужно добавить CSS-свойство z-index.
  • NBB
    NBB
    2022-08-04 13:48:00
    Александр, здравствуйте.

    Прошу по возможности помочь. Задача такова, чтобы чат открывался не в окне по кнопке, а сразу в теле страницы при её открытии.
    Если это затруднительно или невозможно, то сделать так, чтобы при открытии страницы чат открывался сразу же или после заданной задержки.
    Подскажите, пожалуйста, как это можно реализовать?
    1. Андрей
      Андрей
      2022-07-14 10:47:46
      Добрый день, подскажите пожалуйста, существует ли вариант для drupal?
      1. Александр Мальцев
        Александр Мальцев
        2022-07-14 13:17:18
        Привет! Версии для drupal нет.
    2. POV
      POV
      2022-05-09 13:58:48
      Здравствуйте Александр, как для данного бота подключить базу данных для сохранения имен, телефона и так далее, что нужно прописать?
      1. klever
        klever
        2022-05-05 13:49:26
        Добрый день Александр, возможно ли в боте сделать объединить все созданные файлы с перепиской и поместить все данные этих переписок в один файл?
        1. Александр Мальцев
          Александр Мальцев
          2022-05-05 15:02:56
          Привет! Можно, на php имеется все необходимое для работы с файлами.
        2. klever
          klever
          2022-05-06 17:41:45
          Александр, еще один вопрос: А возможно ли в реплике диалога сделать так, чтобы когда пользователь нажимал на его интересующий вопрос, выходил еще один вопрос как дополнительный? Если возможно, то как обратиться от пользователя к пользователю?
      2. Andrey
        Andrey
        2022-04-04 22:52:12
        Александр, приветствую!

        Спасибо за отличный чатбот.

        Хотелось бы немного обрабатывать ввод пользователя.
        Хотя бы проверять на ключевые фразы и генерировать зашитые ответы. Не в стиле NLP.JS конечно, по-проще :)

        Какие варианты работы с переменными возможны в этом случае?
        Или это потребует серьезной модификации кода?

        Спасибо
        1. Александр Мальцев
          Александр Мальцев
          2022-05-05 15:09:05
          Привет! Спасибо за отзыв. Тогда наверно это будет лучше делать на стороне сервера. В таком случае это конечно потребует изменений. Сделать такую версию можно, но когда на это найду время пока не знаю.
      3. Cutulch
        Cutulch
        2022-03-14 16:10:34
        Доброго времени суток. Бот классный. Подскажите, как вставить в ответы бота какие либо изображения. Заранее благодарю!
        1. Cutulch
          Cutulch
          2022-03-14 16:30:31
          Люди добрые, извиняю за тупость. разобрался. Но возник другой вопрос. Если в реплике бота очень много текста, как сделать так, чтоб при активации этой длинной реплики, сообщение не скролилось в конец?
        2. Александр Мальцев
          Александр Мальцев
          2022-03-17 14:47:32
          Спасибо!
          За скроллинг отвечают строчки:
          $container.scrollTop = $container.scrollHeight;
      4. Aleks
        Aleks
        2022-01-05 16:50:50
        Спасибо за скриптик. Написал плагин для WordPress, Причем диалоги редактируются с админки WP и просмотр заявок с сайта там же в админке.
        1. samflynn
          samflynn
          2022-01-07 14:15:04
          Поделитесь плагином? Или ссылкой на плагин?
        2. Aleks
          Aleks
          2022-01-11 20:43:26
      5. samflynn
        samflynn
        2021-12-14 21:39:06
        Подскажите. Как данного бота «прикрутить» к сайту на wordpress?
        1. Александр Мальцев
          Александр Мальцев
          2021-12-15 11:04:24
          Необходимо подключить стили, скрипты и поместить в нужное место шаблона кусочек HTML кода.
        2. Aleks
          Aleks
          2022-01-05 16:48:29
          Уже написан плагин с использованием этого скрипта. Причем диалоги редактируются с админки WP
      6. dez2be
        dez2be
        2021-12-07 21:02:15
        Доброго времени суток! Хочу сказать Вам спасибо, Александр! Очень интересно и достаточно подробно всё описываете, мне как новичку, приятно и понятно читать, где, что и для чего нужно! С чат-ботом и репликами разобрался достаточно быстро, но не могу понять, почему не сохраняется переписка с пользователем? Apache (XAMPP) поставил, но всё равно не сохраняет… Если есть возможность — подскажите пожалуйста, что я не так делаю?
        И ещё раз спасибо за ваш сайт и интересные статьи!
        1. Александр Мальцев
          Александр Мальцев
          2021-12-11 15:06:40
          Привет! Спасибо за отзыв!
          Посмотрите какой ответ приходит от сервера:
        2. dez2be
          dez2be
          2021-12-14 16:20:11
          Здравствуйте! Я попробовал реализовать бота в пробной версии битрикса (который может выполнять php-скрипты), но результат тот же — переписка не сохраняется…
          Вот скриншот начала переписки

          Вот дальнейший диалог
          Как я понял не выполнилось какое-то условие, поэтому start: false?

          P.S. У вас при загрузке картинки в файлохранилище, немного большеват width в
          <div class="fieldset response">
          и залезает на сайдбар, по крайней мере на моём разрешении 1920х1080.


          Ещё раз спасибо за ваш ответ)
        3. Александр Мальцев
          Александр Мальцев
          2021-12-15 11:00:47
          Здравствуйте! Значит файлы сохраняются, т.к. ошибок нет. «start: false» означает, что это просто продолжение диалога.
          За файлохранилище, спасибо, посмотрю, что там не так.
      7. A0
        A0
        2021-11-02 16:58:42
        Добрый день, Александр! Захотел немного переделать чат-бот для расширения возможностей, вместо файла json формирую ответ бота на php. Но столкнулся с тем, скрипт на js не добавляет новые данные, а пользуется единожды считанными. Сам, к сожалению, js пока не знаю в достаточной степени для самостоятельного изменения, поэтому прошу Вашей помощи. Подскажите, пожалуйста, как можно реализовать добавление в чат новых сообщений, сгенерированных php-скриптом?
        1. kservice
          kservice
          2021-09-02 19:19:08
          С последним вопросом разобрался, но появился следующий: как добавить кнопки соцсетей и как сделать с ними интеграцию? Наверно, слишком много вопросов?
          1. Александр Мальцев
            Александр Мальцев
            2021-09-03 14:44:24
            Добавлять новый функционал пока не планирую, но проект с открытым кодом. Можете написать самостоятельно. А социальные сети хотите использовать для авторизации?
        2. kservice
          kservice
          2021-09-02 18:53:26
          И еще вопрос: как сделать, чтобы чат-бот накладывался на header? У меня header накладывается и закрывает часть чат-бота (размер изменять не хочу)
          1. Александр Мальцев
            Александр Мальцев
            2021-09-03 14:39:46
            Необходимо разобраться с CSS-свойством z-index.
        3. kservice
          kservice
          2021-09-02 13:41:59
          Я вижу, что такие поля по отдельности есть (кроме фамилии и причины обращения).
          Как их собрать в единую форму и как эти данные использовать в дальнейшем. Например, переслать на почту?
          1. Александр Мальцев
            Александр Мальцев
            2021-09-03 12:56:21
            Когда создаёте реплики и хотите запросить некоторые данные, то указываете ключ, в который их нужно сохранить (например, 'name'):
            3: { content: '', bot: 3, name: 'name' },
            Таким же образом можно запросить другие данные и определить для них ключ.

            Если данные необходимо как-то обрабатывать, то их лучше будет сохранять не в текстовый файл, а в базу данных. Такую информацию будет очень легко собирать и отправлять в нужном виде на почту.
        4. kservice
          kservice
          2021-09-02 12:19:34
          Спасибо за ваш труд. А как вместо «Я тоже рад, как мне к Вам обращаться?» создать поля для ввода ланных: имя, фамилия, телефон, почта, причина обращения?
          1. Александр Мальцев
            Александр Мальцев
            2021-09-03 14:38:34
            Пожалуйста!
            Нужно понять, как составляются реплики и написать их:
            configChatbot.replicas = {
              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: 'Фамилия?', human: [4] },
                4: { content: 'Телефон?', human: [5] },
                5: { content: 'Почта?', human: [6] },
                6: { content: 'Причина обращения?', human: [7] },
                // ...
              },
              human: {
                0: { content: 'Привет! Я рад с тобой познакомиться', bot: 1 },
                1: { content: 'Салют!', bot: 2 },
                2: { content: 'Приветик, Инфинити!', bot: 2 },
                3: { content: '', bot: 3, name: 'name' },
                4: { content: '', bot: 4, name: 'lastname' },
                5: { content: '', bot: 5, name: 'phone' },
                6: { content: '', bot: 6, name: 'email' },
                7: { content: '', bot: 7, name: 'reason' },
                // ...
              }
            }
        5. Vladyslav
          Vladyslav
          2021-07-21 00:41:44
          Привет: ) Почему при обновлении страницы в самом верху чата появляется зеленая пустая строка от пользователя?
          1. Александр Мальцев
            Александр Мальцев
            2021-08-08 15:46:06
            Привет! Исправил этот момент. Обновил версию на GitHub до 1.3.1.
        6. Илья Титов
          Илья Титов
          2021-05-27 09:21:34
          Супер!!! Было бы круто отправлять все это дело на почту и дать возможность юзеру отправлять файл при запросе бота.
          1. Александр Мальцев
            Александр Мальцев
            2021-06-13 03:24:54
            Для отправки на почту можно написать php-скрипт и запускать его по расписанию, используя cron. Возможность отправлять файлы пока реализовывать не планирую, но добавлю в список для дальнейшего развития этого компонента.
          2. Илья Титов
            Илья Титов
            2021-06-13 09:03:55
            Спасибо за ответ. В Рунете лучше вашей работы ничего не нашел.
        7. Dmytro
          Dmytro
          2021-05-25 13:04:52
          Как очистить чат и начать переписку с самого начала? И можно ли сделать так чтобы отправлять сообщения нажатием на Enter, а не кликом?
          1. Александр Мальцев
            Александр Мальцев
            2021-06-03 14:44:00
            Отправку сообщения по Enter добавил в чат.
          2. Dmytro
            Dmytro
            2021-06-03 20:35:48
            Cпасибо большое!
          3. Александр Мальцев
            Александр Мальцев
            2021-06-13 03:16:44
            Метод для очистки (сброса) чата добавил в JavaScript, и кнопку. Код немного изменился (в том числе и стили), будьте внимательны при обновлении.
        8. Shishov Igor
          Shishov Igor
          2021-02-04 22:48:28
          Доброй ночи. Возникла следующая проблема: на ПК версиях и в режиме разработчика (мобильная версия) кнопка вызова чата работает.

          <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>
          Однако когда открываешь сайт на мобильном устройстве, то кнопка не работает. Анимация нажатия :hover выполняется, но всплывающее окно чата не открывается. Подскажите как исправить данную проблему
          1. Александр Мальцев
            Александр Мальцев
            2021-02-14 06:39:22
            Привет! А какое устройство и браузер? А в пример, приведённой в статье на этом мобильном устройстве работает?
          2. Gosha Stukanov
            Gosha Stukanov
            2021-04-27 15:21:23
            На Ipad е, при нажатии просто игнорит
        9. Николай
          Николай
          2021-02-03 17:40:36
          «работа чат-бота всегда стартует с приветственного сообщения бота, заданного в 0»

          Привет, скажите можно как-то настроить бота чтобы было несколько приветственных сообщений подряд с маленькой задержкой.

          Пример:
          1 сообщение: Привет
          маленькая задержка
          2 сообщение: У Вас есть вопрос?
          Потом уже ответ посетителя сайта

          Я попытался сам разобраться в chatbot_es5 – но не смог.
          1. Александр Мальцев
            Александр Мальцев
            2021-02-14 15:41:35
            Привет! Добавил эту возможность в чат-бот. В статье написал инструкцию как это настраивать.
        10. vol
          vol
          2020-12-27 21:45:29
          Странно но в Mozilla Firefox 84.0.1 и Slimjet 27.0.7.0 не работает, в консоле пишет: Uncaught ReferenceError: chatBotByItchiefInit is not defined
          в Google Chrome всё работает
          1. Александр Мальцев
            Александр Мальцев
            2020-12-29 16:17:35
            Вместо «chatbot.js» подключите «chatbot_es5.js». Это тот же код, но написан с использованием более старого синтаксиса, его данные браузеры точно будут поддерживать.