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

Александр Мальцев
Александр Мальцев
20K
44
Простой чат-бот для сайта на чистом 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 для очистки (сброса) чата и кнопка для вызова этого метода.

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

  1. POV
    POV
    09.05.2022, 13:58
    Здравствуйте Александр, как для данного бота подключить базу данных для сохранения имен, телефона и так далее, что нужно прописать?
    1. klever
      klever
      05.05.2022, 13:49
      Добрый день Александр, возможно ли в боте сделать объединить все созданные файлы с перепиской и поместить все данные этих переписок в один файл?
      1. Александр Мальцев
        Александр Мальцев
        05.05.2022, 15:02
        Привет! Можно, на php имеется все необходимое для работы с файлами.
        1. klever
          klever
          06.05.2022, 17:41
          Александр, еще один вопрос: А возможно ли в реплике диалога сделать так, чтобы когда пользователь нажимал на его интересующий вопрос, выходил еще один вопрос как дополнительный? Если возможно, то как обратиться от пользователя к пользователю?
      2. Andrey
        Andrey
        04.04.2022, 22:52
        Александр, приветствую!

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

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

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

        Спасибо
        1. Александр Мальцев
          Александр Мальцев
          05.05.2022, 15:09
          Привет! Спасибо за отзыв. Тогда наверно это будет лучше делать на стороне сервера. В таком случае это конечно потребует изменений. Сделать такую версию можно, но когда на это найду время пока не знаю.
        2. Cutulch
          Cutulch
          14.03.2022, 16:10
          Доброго времени суток. Бот классный. Подскажите, как вставить в ответы бота какие либо изображения. Заранее благодарю!
          1. Cutulch
            Cutulch
            14.03.2022, 16:30
            Люди добрые, извиняю за тупость. разобрался. Но возник другой вопрос. Если в реплике бота очень много текста, как сделать так, чтоб при активации этой длинной реплики, сообщение не скролилось в конец?
            1. Александр Мальцев
              Александр Мальцев
              17.03.2022, 14:47
              Спасибо!
              За скроллинг отвечают строчки:
              $container.scrollTop = $container.scrollHeight;
          2. Aleks
            Aleks
            05.01.2022, 16:50
            Спасибо за скриптик. Написал плагин для WordPress, Причем диалоги редактируются с админки WP и просмотр заявок с сайта там же в админке.
            1. samflynn
              samflynn
              07.01.2022, 14:15
              Поделитесь плагином? Или ссылкой на плагин?
              1. Aleks
                Aleks
                11.01.2022, 20:43
            2. samflynn
              samflynn
              14.12.2021, 21:39
              Подскажите. Как данного бота «прикрутить» к сайту на wordpress?
              1. Aleks
                Aleks
                05.01.2022, 16:48
                Уже написан плагин с использованием этого скрипта. Причем диалоги редактируются с админки WP
                1. Александр Мальцев
                  Александр Мальцев
                  15.12.2021, 11:04
                  Необходимо подключить стили, скрипты и поместить в нужное место шаблона кусочек HTML кода.
                2. dez2be
                  dez2be
                  07.12.2021, 21:02
                  Доброго времени суток! Хочу сказать Вам спасибо, Александр! Очень интересно и достаточно подробно всё описываете, мне как новичку, приятно и понятно читать, где, что и для чего нужно! С чат-ботом и репликами разобрался достаточно быстро, но не могу понять, почему не сохраняется переписка с пользователем? Apache (XAMPP) поставил, но всё равно не сохраняет… Если есть возможность — подскажите пожалуйста, что я не так делаю?
                  И ещё раз спасибо за ваш сайт и интересные статьи!
                  1. Александр Мальцев
                    Александр Мальцев
                    11.12.2021, 15:06
                    Привет! Спасибо за отзыв!
                    Посмотрите какой ответ приходит от сервера:
                    1. dez2be
                      dez2be
                      14.12.2021, 16:20
                      Здравствуйте! Я попробовал реализовать бота в пробной версии битрикса (который может выполнять php-скрипты), но результат тот же — переписка не сохраняется…
                      Вот скриншот начала переписки

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

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


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

                            Если данные необходимо как-то обрабатывать, то их лучше будет сохранять не в текстовый файл, а в базу данных. Такую информацию будет очень легко собирать и отправлять в нужном виде на почту.
                          2. kservice
                            kservice
                            02.09.2021, 12:19
                            Спасибо за ваш труд. А как вместо «Я тоже рад, как мне к Вам обращаться?» создать поля для ввода ланных: имя, фамилия, телефон, почта, причина обращения?
                            1. Александр Мальцев
                              Александр Мальцев
                              03.09.2021, 14:38
                              Пожалуйста!
                              Нужно понять, как составляются реплики и написать их:
                              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' },
                                  // ...
                                }
                              }
                            2. Vladyslav
                              Vladyslav
                              21.07.2021, 00:41
                              Привет: ) Почему при обновлении страницы в самом верху чата появляется зеленая пустая строка от пользователя?
                              1. Александр Мальцев
                                Александр Мальцев
                                08.08.2021, 15:46
                                Привет! Исправил этот момент. Обновил версию на GitHub до 1.3.1.
                              2. Илья Титов
                                Илья Титов
                                27.05.2021, 09:21
                                Супер!!! Было бы круто отправлять все это дело на почту и дать возможность юзеру отправлять файл при запросе бота.
                                1. Александр Мальцев
                                  Александр Мальцев
                                  13.06.2021, 03:24
                                  Для отправки на почту можно написать php-скрипт и запускать его по расписанию, используя cron. Возможность отправлять файлы пока реализовывать не планирую, но добавлю в список для дальнейшего развития этого компонента.
                                  1. Илья Титов
                                    Илья Титов
                                    13.06.2021, 09:03
                                    Спасибо за ответ. В Рунете лучше вашей работы ничего не нашел.
                                2. Dmytro
                                  Dmytro
                                  25.05.2021, 13:04
                                  Как очистить чат и начать переписку с самого начала? И можно ли сделать так чтобы отправлять сообщения нажатием на Enter, а не кликом?
                                  1. Александр Мальцев
                                    Александр Мальцев
                                    13.06.2021, 03:16
                                    Метод для очистки (сброса) чата добавил в JavaScript, и кнопку. Код немного изменился (в том числе и стили), будьте внимательны при обновлении.
                                    1. Александр Мальцев
                                      Александр Мальцев
                                      03.06.2021, 14:44
                                      Отправку сообщения по Enter добавил в чат.
                                      1. Dmytro
                                        Dmytro
                                        03.06.2021, 20:35
                                        Cпасибо большое!
                                    2. Shishov Igor
                                      Shishov Igor
                                      04.02.2021, 22:48
                                      Доброй ночи. Возникла следующая проблема: на ПК версиях и в режиме разработчика (мобильная версия) кнопка вызова чата работает.

                                      <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. Александр Мальцев
                                        Александр Мальцев
                                        14.02.2021, 06:39
                                        Привет! А какое устройство и браузер? А в пример, приведённой в статье на этом мобильном устройстве работает?
                                        1. Gosha Stukanov
                                          Gosha Stukanov
                                          27.04.2021, 15:21
                                          На Ipad е, при нажатии просто игнорит
                                      2. Николай
                                        Николай
                                        03.02.2021, 17:40
                                        «работа чат-бота всегда стартует с приветственного сообщения бота, заданного в 0»

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

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

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