Metabot Widget
Создание канала
При создании и тестировании чат-бота можно воспользоваться быстрой и бесплатной настройкой чат-виджета от Metabot.
Первым делом, следует создать канал для общения с клиентами. Это место, где будут проходить все диалоги.
Для этого в меню Каналы создаем новый канал и из выпадающего списка в открывшемся окне Новая привязка к каналу выбираем Metabot Widget.
- Версия формата вебхука — по умолчанию V3, менять не рекомендуется;
- Использовать Inline-кнопки — по умолчанию выключено. При включении в чате пункты меню будут отображены в виде кнопок, а не текста;
- Отображать дату/время сообщений в виджете — по умолчанию включено, отображает дату и время поступающих и отправленных сообщений в чате;
- Отображать кнопки бота в одну колонку — по умолчанию выключено. При включении кнопки меню в виджете будет размещены в одну колонку, иначе на строке будет размещено столько кнопок, сколько поместятся по ширине виджета;
- Автопрокрутка до последнего исходящего сообщения лида — по умолчанию выключено. При выключенном состоянии позиционирование производится в конец последней кнопки меню, если включить опцию, то позиционирование производится вначале последнего сообщения бота, что очень удобно при объемных текстовых сообщениях от бота;
- Версия виджета — не редактируемое поле;
- Заголовок — текстовое поле, которое будет отображаться в заголовке виджета. Не обязательно для заполнения;
- Подзаголовок — текстовое поле, которое будет отображаться в подзаголовке виджета. Не обязательно для заполнения;
- Подсказка для поля отправки текста — редактируемое текстовое поле. По умолчанию заполнено фразой "Введите сообщение...";
- Всплывающая подсказка для поля отправки текста — редактируемое текстовое поле. По умолчанию заполнено фразой "Введите сообщение...";
- Автогенерация списка диплинков — автоматическое заполнение списка диплинков, при этом, список диплинков, заполненный вручную не будет использоваться;
- Список диплинков (JSON-массив) — список диплинков (массив в JSON-формате), указанные диплинки будут отображены при нажатии на значок чат-виджета. Нажатие на ссылку с диплинком запустит привязанный к диплинку маршрут. Привязка диплинка к маршруту устанавливается в "Настройках бота", на странице "Маршруты";
- Разрешить отправку файлов — опция для включения или отключения отправки файлов в виджете;
- Список поддерживаемых расширений файлов — список форматов файлов, которые могут быть отправлены в виджет. По умолчанию в поле указано: "png, jpg, gif, pdf, doc, docx, csv, xml, zip, 7zip, gzip, rar";
- Реакция на файлы (документы) — выпадающий список с выбором реакции виджета на файлы;
- Контекст NLP для файлов (документов) — NLP контекст для файлов в виджете;
- Отключить Fallback для файлов (документов) — опция для включения или отключения Fallback для файлов в виджете.
Затем сохраните введенные параметры настройки, нажав на кнопку Создать.
Конфигурация виджета и брендирование
Для кастомизации цветов доступны следующие параметры:
| Параметр | Описание | Пример: |
| mainColor | Основной цвет | "#F69B1D" |
| userTextColor | Цвет текста на кнопках | "#FFF" |
| userBackgroundColor | Цвет кнопок | "#F69B1D" |
| allowAttachments | Вкл/откл отправки файлов в виджете | "true" |
| attachmentExtensions | Список поддерживаемых расширений файлов | "png,jpg,gif,pdf,doc,docx,csv,xml,zip,7zip,gzip,rar" |
| attachmentIcon | Ссылка на иконку для прикрепления файлов | "default" |
Если в поле attachmentIcon указано 'default' то указываем SVG иконки прошитую в виджете, иначе будет указана HTTPS ссылка на картинку.
Эти параметры добавляются в код инициализации виджета, который вы можете взять в поле Код виджета канала.
Например, вот так выглядит код виджета для бренда Metabot, который работает на нашем сайте https://metabot24.ru. Обратите внимание на новые параметры в методе init.
<script type="text/javascript">
(function (url)
{
const callback = function () {
let container = document.createElement('div');
container.id = "metabot-ab8e2b168d216b1a6fa7b8d82c230f13";
container.insertAdjacentHTML('beforeend','<div class="widget"></div>');
document.body.appendChild(container);
let showMessageDate = false;
showMessageDate = ((date) => {
const dateToFormat = new Date(date);
const showDate = (dateToFormat.toLocaleDateString() === (new Date).toLocaleDateString()) ? '' : `${dateToFormat.toLocaleDateString()} `;
return `${showDate}${dateToFormat.toLocaleTimeString('ru-RU', { timeStyle: 'short' })}`;
});
WebChat.default.init({
selector: "#metabot-ab8e2b168d216b1a6fa7b8d82c230f13 .widget"
, customData: 'v3_metabotWidget_17_49_359_TvIxQdsegnJgJrMKktBtYbFkwcpmQIeJPDFabo'
, locale: 'ru-RU'
, title: 'Метабот'
, subtitle: 'В сети ...'
, initPayload: '/start'
, inputTextFieldHint: 'Введите сообщение...'
, inputTextTitle: 'Введите сообщение...'
, showMessageDate: showMessageDate
, params: {"storage": "local"}
, socketUrl: 'https://app.metabot24.com:3000'
, shortcut: []
, mainColor: "#F69B1D" // Основной цвет
, userTextColor: "#FFF" // Цвет текста на кнопке
, userBackgroundColor: "#F69B1D" // Цвет фона кнопки
});
};
const head = document.head;
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.onreadystatechange = callback;
script.onload = callback;
head.appendChild(script);
})("https://user43148.clients-cdnnow.ru/js/chatwidget/metabot_widget-1.3.4.js");
</script>В Metabot Widget можно так же настроить мультиязычность, приветственное меню и персонажа. Для настройки данных возможностей обратитесь к команде Metabot.
Размещение кода виджета на сайте
Асинхронное подключение чат-виджета
Для асинхронного подключения чат-виджета в настройках имеется поле Загрузчик. Оно становится доступным после первоначального сохранения настроек канала.
По команде Загрузить выполняется (пере-)генерация скрипта-загрузчика и загрузка его на CDN. Загружается скрипт, идентичный тому, что выведен в поле Код виджета выше. Соответственно при изменении настроек, влияющих на код виджета, следует перезагружать скрипт-загрузчик на CDN.
Нет комментариев