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

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

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

Qwertyshka
Qwertyshka

Добрый день.

А его можно перенаправить на базу SQL? Чтобы не в коде ответы были, не в JSON, а в базе.

Bess
Bess

Добрый день как добавить аватарки для бота и ответов юзера? Бота слева от текста а юзера справа.

И еще вопрос, как сделать что б бот печатал свой текст как будто на клавиатуре это делает человек?
web-turist
web-turist

Добрый день.

Бот запускается. Но когда отправляю сообщение, то в консоль получаю такую ошибку:

POST http://localhost:8888/bots/chatbot/chatbot.php 404 (Not Found)

И при этом соответственно никаких диалогов в папке "chats" не сохраняется.

Я использую Mamp и Wordpress.

Может вам известно как избавиться от этой ошибки??
Александр Мальцев
Александр Мальцев

Привет! Скорее всего что-то с путями к файлам и каталогам.

Jack
Jack

Скачал архив, разархивировал. Запускаю файл index.html, но в нем кнопки для запуска бота нет, только надпись в левом верхнем углу -задать вопрос....

Александр Мальцев
Александр Мальцев

Добрый день! Нужно нажать на эту кнопочку.

Для демонстрации работы можно скачать Visual Studio Code, установить расширение «Live Server», после этого открыть папку и нажать на кнопку «Go Live»:

Описание картинки

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

Jack
Jack

Здравствуйте! Не подскажите как его подключить через HTML редактор?

dj_Nikita
dj_Nikita

Александр. А как настроить скрипты, чтобы получился простой чат, типа как на Youtube. Было бы классно, если бы было так: Когда заходишь с нового устройства, выскакивало приветствие, как Инфинити. Далее: придумайте Ник для общения в чате. Потом предупреждение, чтобы соблюдали нормы приличного общения. И последнее: ссылочка перейти... И ты уже в общем чате, где все пользователи...

Я пытался найти скрипт простого и лёгкого чата, но этот оказался лучший.
Александр Мальцев
Александр Мальцев

Привет! Для создания общего чата нужно похорошему это дело реализовать по-другому. Добавлю этот комментарий в закладки, может когда-нибудь к нему вернусь.

AlexBLR
AlexBLR

У меня есть коллекция разных чатов преимущественно на файлах, но я бы тоже не отказался от ещё одного чата :) желательно на файлах.

Александр Мальцев
Александр Мальцев

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

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

Александр Мальцев
Александр Мальцев
Пожалуйста! Нужно добавить CSS-свойство z-index.
NBB
NBB
Александр, здравствуйте.

Прошу по возможности помочь. Задача такова, чтобы чат открывался не в окне по кнопке, а сразу в теле страницы при её открытии.
Если это затруднительно или невозможно, то сделать так, чтобы при открытии страницы чат открывался сразу же или после заданной задержки.
Подскажите, пожалуйста, как это можно реализовать?
Андрей
Андрей
Добрый день, подскажите пожалуйста, существует ли вариант для drupal?
Александр Мальцев
Александр Мальцев
Привет! Версии для drupal нет.
POV
POV
Здравствуйте Александр, как для данного бота подключить базу данных для сохранения имен, телефона и так далее, что нужно прописать?
klever
klever
Добрый день Александр, возможно ли в боте сделать объединить все созданные файлы с перепиской и поместить все данные этих переписок в один файл?
Александр Мальцев
Александр Мальцев
Привет! Можно, на php имеется все необходимое для работы с файлами.
klever
klever
Александр, еще один вопрос: А возможно ли в реплике диалога сделать так, чтобы когда пользователь нажимал на его интересующий вопрос, выходил еще один вопрос как дополнительный? Если возможно, то как обратиться от пользователя к пользователю?
Andrey
Andrey
Александр, приветствую!

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

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

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

Спасибо
Александр Мальцев
Александр Мальцев
Привет! Спасибо за отзыв. Тогда наверно это будет лучше делать на стороне сервера. В таком случае это конечно потребует изменений. Сделать такую версию можно, но когда на это найду время пока не знаю.
Cutulch
Cutulch
Доброго времени суток. Бот классный. Подскажите, как вставить в ответы бота какие либо изображения. Заранее благодарю!
Cutulch
Cutulch
Люди добрые, извиняю за тупость. разобрался. Но возник другой вопрос. Если в реплике бота очень много текста, как сделать так, чтоб при активации этой длинной реплики, сообщение не скролилось в конец?
Александр Мальцев
Александр Мальцев
Спасибо!
За скроллинг отвечают строчки:
$container.scrollTop = $container.scrollHeight;
Aleks
Aleks
Спасибо за скриптик. Написал плагин для WordPress, Причем диалоги редактируются с админки WP и просмотр заявок с сайта там же в админке.
samflynn
samflynn
Поделитесь плагином? Или ссылкой на плагин?
Aleks
Aleks
samflynn
samflynn
Подскажите. Как данного бота «прикрутить» к сайту на wordpress?
Александр Мальцев
Александр Мальцев
Необходимо подключить стили, скрипты и поместить в нужное место шаблона кусочек HTML кода.
Aleks
Aleks
Уже написан плагин с использованием этого скрипта. Причем диалоги редактируются с админки WP
dez2be
dez2be
Доброго времени суток! Хочу сказать Вам спасибо, Александр! Очень интересно и достаточно подробно всё описываете, мне как новичку, приятно и понятно читать, где, что и для чего нужно! С чат-ботом и репликами разобрался достаточно быстро, но не могу понять, почему не сохраняется переписка с пользователем? Apache (XAMPP) поставил, но всё равно не сохраняет… Если есть возможность — подскажите пожалуйста, что я не так делаю?
И ещё раз спасибо за ваш сайт и интересные статьи!
Александр Мальцев
Александр Мальцев
Привет! Спасибо за отзыв!
Посмотрите какой ответ приходит от сервера:
dez2be
dez2be
Здравствуйте! Я попробовал реализовать бота в пробной версии битрикса (который может выполнять php-скрипты), но результат тот же — переписка не сохраняется…
Вот скриншот начала переписки

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

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


Ещё раз спасибо за ваш ответ)
Александр Мальцев
Александр Мальцев
Здравствуйте! Значит файлы сохраняются, т.к. ошибок нет. «start: false» означает, что это просто продолжение диалога.
За файлохранилище, спасибо, посмотрю, что там не так.
A0
A0
Добрый день, Александр! Захотел немного переделать чат-бот для расширения возможностей, вместо файла json формирую ответ бота на php. Но столкнулся с тем, скрипт на js не добавляет новые данные, а пользуется единожды считанными. Сам, к сожалению, js пока не знаю в достаточной степени для самостоятельного изменения, поэтому прошу Вашей помощи. Подскажите, пожалуйста, как можно реализовать добавление в чат новых сообщений, сгенерированных php-скриптом?
kservice
kservice
С последним вопросом разобрался, но появился следующий: как добавить кнопки соцсетей и как сделать с ними интеграцию? Наверно, слишком много вопросов?
Александр Мальцев
Александр Мальцев
Добавлять новый функционал пока не планирую, но проект с открытым кодом. Можете написать самостоятельно. А социальные сети хотите использовать для авторизации?
kservice
kservice
И еще вопрос: как сделать, чтобы чат-бот накладывался на header? У меня header накладывается и закрывает часть чат-бота (размер изменять не хочу)
Александр Мальцев
Александр Мальцев
Необходимо разобраться с CSS-свойством z-index.
kservice
kservice
Я вижу, что такие поля по отдельности есть (кроме фамилии и причины обращения).
Как их собрать в единую форму и как эти данные использовать в дальнейшем. Например, переслать на почту?
Александр Мальцев
Александр Мальцев
Когда создаёте реплики и хотите запросить некоторые данные, то указываете ключ, в который их нужно сохранить (например, 'name'):
3: { content: '', bot: 3, name: 'name' },
Таким же образом можно запросить другие данные и определить для них ключ.

Если данные необходимо как-то обрабатывать, то их лучше будет сохранять не в текстовый файл, а в базу данных. Такую информацию будет очень легко собирать и отправлять в нужном виде на почту.
kservice
kservice
Спасибо за ваш труд. А как вместо «Я тоже рад, как мне к Вам обращаться?» создать поля для ввода ланных: имя, фамилия, телефон, почта, причина обращения?
Александр Мальцев
Александр Мальцев
Пожалуйста!
Нужно понять, как составляются реплики и написать их:
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' },
    // ...
  }
}
Vladyslav
Vladyslav
Привет: ) Почему при обновлении страницы в самом верху чата появляется зеленая пустая строка от пользователя?
Александр Мальцев
Александр Мальцев
Привет! Исправил этот момент. Обновил версию на GitHub до 1.3.1.
Илья Титов
Илья Титов
Супер!!! Было бы круто отправлять все это дело на почту и дать возможность юзеру отправлять файл при запросе бота.
Александр Мальцев
Александр Мальцев
Для отправки на почту можно написать php-скрипт и запускать его по расписанию, используя cron. Возможность отправлять файлы пока реализовывать не планирую, но добавлю в список для дальнейшего развития этого компонента.
Илья Титов
Илья Титов
Спасибо за ответ. В Рунете лучше вашей работы ничего не нашел.
Dmytro
Dmytro
Как очистить чат и начать переписку с самого начала? И можно ли сделать так чтобы отправлять сообщения нажатием на Enter, а не кликом?
Александр Мальцев
Александр Мальцев
Отправку сообщения по Enter добавил в чат.
Dmytro
Dmytro
Cпасибо большое!
Александр Мальцев
Александр Мальцев
Метод для очистки (сброса) чата добавил в JavaScript, и кнопку. Код немного изменился (в том числе и стили), будьте внимательны при обновлении.
Shishov Igor
Shishov Igor
Доброй ночи. Возникла следующая проблема: на ПК версиях и в режиме разработчика (мобильная версия) кнопка вызова чата работает.

<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 выполняется, но всплывающее окно чата не открывается. Подскажите как исправить данную проблему
Александр Мальцев
Александр Мальцев
Привет! А какое устройство и браузер? А в пример, приведённой в статье на этом мобильном устройстве работает?
Gosha Stukanov
Gosha Stukanov
На Ipad е, при нажатии просто игнорит
Николай
Николай
«работа чат-бота всегда стартует с приветственного сообщения бота, заданного в 0»

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

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

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