Подключение каналов
- Metabot Widget
- Metabot Widget и GTM
- Metabot Widget с диплинками
- Telegram
- Jivochat
- VK
- Umnico
- Подключение распознавания файлов в различных каналах
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.
Metabot Widget и GTM
Настройка чат-виджета через Google Tag Manager (GTM)
Чтобы настроить чат-виджет через GTM нужно выполнить следующие действия:
1. Войти в Google аккаунт по ссылке https://tagmanager.google.com/.
2. Далее создать аккаунт как показано на рисунке ниже.
3. Заполнить контейнер и создать запись как показано на рисунке ниже.
4. В остальных диалоговых окнах согласиться и нажать кнопку ОК.
Если аккаунт GTM уже был создан, то достаточно в аккаунте добавить новый контейнер.
5. Добавить новый тег.
6. Нажать на кнопку в блоке Конфигурация тега.
7. Выбрать пункт Пользовательский HTML.
8. В административной панели платформы Metabot, необходимо создать подключение канала Metabot Widget (если ещё нет) и загрузить в CDN скрипт-загрузчик.
Запись должна быть отмечена зеленым значком со значением “200”.
9. Скопировать тело скрипта в буфер.
10. Продолжить заполнение тега в GTM, для этого выполнить по пунктам:
10.1. Придумать имя тега.
10.2. Вставить из буфера обмена скопированный скрипт.
10.3. Создать GTM-триггер.
10.4. Выбрать пункт All Pages.
10.5. Нажать кнопку Сохранить.
11. В рабочей области нажать кнопку Отправить.
12. Заполнить форму указав название версии, например, ver1 и по желанию описание версии. Затем нажать кнопку Опубликовать.
13. После успешной публикации версии, вернуться в Рабочую область и открыть popup с кодами тег-менеджера.
14. Скопировать фрагменты кода в вставить в соответствующие разделы на сайте в head и body нужной html-страницы.
Ниже показан пример как это может выглядеть:
15. Открыть страницу сайта в браузере. Нужные скрипты подгружаются и виджет запускается.
Редактирование чат-виджета в GTM
При удалении и создании нового канала Metabot Widget на платформе, затем достаточно просто скопировать скрипт из блока Загрузчик и вставить его новой версией тега в контейнер GTM.
Для этого в аккаунте GTM открыть тег на редактирование.
Через функцию редактирования вставить скопированный скрипт и сохранить изменения, указав новое имя версии. Далее опубликовать новую версию.
Мы получим новую версию загруженного чат-виджета с платформы.
Таким образом без правки кода сайта мы можем переключать на различные версии чат-виджетов.
Metabot Widget с диплинками
Чат-виджет с диплинками
При создании и тестировании чат-бота в канале Metabot Widget необходимо провести первоначальные настройки виджета. Как это сделать подробно описано в статье Metabot Widget.
Здесь мы рассмотрим дополнительные настройки бота и виджета, которые позволят вам изучить метод настройки с диплинками.
Настройка маршрутов с диплинками
Для того, чтобы настроить в чат-виджете дополнительные кнопки, например, переход в определенные сценарные ветки или быстрый вывод информации, необходимо настроить маршруты с переходами в данные разделы сценария или скрипты.
Также можно настроить на странице сайта кнопку с запуском диплинка и переходом в чат-виджет в соответствующий сценарий.
Рассмотрим пример:
- Разместим на тестовой странице сайта 2 кнопки с диплинками:
- Демо-бот;
- Поддержка.
- Создадим 3 ссылки в разделе Ссылки с именем диплинков, например, Deeplink1, Deeplink2, Deeplink3.
Заполним следующие параметры:
- Имя — указать имя ссылки, например "Deeplink1";
- Текст — текстовое сообщение, которое будет отображено в чат-виджете;
- Тип ссылки — выбираем пункт Ссылка на бот-скрипт (Deep Link).
Нажимаем кнопку Создать.
Аналогично создаем ссылки с именами: "Deeplink2" и "Deeplink3".
Результатом проделанных действий будут созданные 3 ссылки как на рисунке ниже.
- Создадим маршруты в разделе Маршруты с регулярными выражениями соответствующими именам созданных ссылок.
ДЕМО-БОТ
Должны быть активированы следующие свойства маршрута и заполнены соответствующие поля:
ПОДДЕРЖКА
Должны быть активированы следующие свойства маршрута и заполнены соответствующие поля:
Тестовый бот - СЕРВИС ОПРЕДЕЛЕН - ДЕМО-БОТ
Должны быть активированы следующие свойства маршрута и заполнены соответствующие поля, также необходимо указать условие JS:
Тестовый бот - СЕРВИС ОПРЕДЕЛЕН - ПОДДЕРЖКА
Должны быть активированы следующие свойства маршрута и заполнены соответствующие поля, также необходимо указать условие JS:
Контроль автоопределения текущего раздела сайта выполняется с помощью V8 условий в маршруте с диплинком.
// Запуск диплинка ДЕМО-БОТ
var requestJson = null;
if (request) {
requestJson = request.json;
}
var requestDeeplinkData = null;
if (requestJson && requestJson.deeplink) {
requestDeeplinkData = requestJson.deeplink;
}
var requestService = null;
if (requestDeeplinkData && requestDeeplinkData.service) {
requestService = requestDeeplinkData.service;
}
if (requestService === null || requestService === '') {
return false;
}
var availServices = ['demo_bot'];
if (availServices.includes(requestService)) {
return true;
} else {
return false;
}
Далее в диплинке ТЕСТОВЫЙ БОТ мы определяем какой это сервис и запускаем необходимый скрипт.
Тестовый бот - СЕРВИС НЕ ОПРЕДЕЛЕН
Последним маршрутом с диплинком ТЕСТОВЫЙ БОТ и V8 условием идет маршрут, который запускает приветствие бота если сервис не распознан.
В нем условие можно и не писать, но в таком случае этот маршрут должен обязательно идти последним в списке.
На случай если кто-то случайно передвинет его выше в списке маршрутов, v8 просто не даст ему запуститься, если сервис ОПРЕДЕЛЕН.
// Запуск диплинка ТЕСТОВЫЙ БОТ, если сервис с сайта не передан или не определен
var requestJson = null;
if (request) {
requestJson = request.json;
}
var requestDeeplinkData = null;
if (requestJson && requestJson.deeplink) {
requestDeeplinkData = requestJson.deeplink;
}
var requestService = null;
if (requestDeeplinkData && requestDeeplinkData.service) {
requestService = requestDeeplinkData.service;
}
if (requestService === null || requestService === '') {
return true;
}
var availServices = ['demo_bot', 'support'];
if (availServices.includes(requestService)) {
return false;
} else {
return true;
}
Настройка чат-виджета с диплинками
Список диплинков указывается в виде json массива. В списке можно указывать макросы с названием ссылок или хэш код, если такой макрос не найден, то в поле диплинка будет подставлена строка как есть.
Дополнительной валидации правильности заполнения списка диплинков на платформе нет. Есть только общая проверка, что в поле введен json.
Автогенерация списка диплинков
В настройках канала Metabot Widget есть опция Автогенерация спиcка диплинков.
Если данная опция включена, то список диплинков заполненный вручную ниже не будет задействован.
Эта опция позволяет не заполнять список диплинков, они будут генерироваться автоматически при формировании кода виджета.
При автогенерации списка диплинков ссылки с диплинками будут выстроены в той же последовательности, как и в разделе Ссылки, поэтому в данном разделе имеется сортировка ссылок.
Генерация списка диплинков для заполнения вручную
Диплинки могут быть настроены в виде кнопок со ссылками или кнопки объединены в папки.
Настройка виджета с диплинками в виде кнопок со ссылками.
При такой генерации учитывается порядок ссылок бота, которые описаны в предыдущем пункте.
Для того, чтобы отредактировать список диплинков, необходимо открыть канал на редактирование по кнопке Редактировать.
Можно убрать лишние диплинки, блок настройки одного диплинка выделен на рисунке.
При предварительном просмотре чат-виджет имеет 3 кликабельные кнопки с диплинками перехода в сценарные скрипты.
Настройка виджета с диплинками объединенными в папки.
При генерации списка диплинков вручную в json массиве можно написать код, который позволит сгруппировать кнопки с диплинками в папки и добавить кнопки перехода на мессенджеры, также вывод различных надписей на кнопках, зависящих от поведения пользователя (новый диалог или продолжающийся).
Рассмотрим несколько примеров:
- Внешняя ссылка — возможность перехода из чат-виджета в мессенджеры и соц.сети, где также будет диалог с чат-ботом или оператором, например, в Telegram;
{
"type": "link",
"href": "https:\/\/t.me\/Stage_metabot_bot",
"target": "_blank",
"title": {
"text": "переходи в Телеграм",
"color": "#1B1C1E"
},
"icon": {
"type": "url",
"value": "https:\/\/app.metabot24.com\/uploads\/business\/34\/telegram_logo_icon_168692.png?nc=1689846288"
}
},
"href": <ссылка на телеграм аккаунт бота с икранирующими \/ символами>
"value": <ссылка на загруженный файл иконки с икранирующими \/ символами, картинку можно загрузить на платформу в разделе Магазин- Медиагалерея>
- Объединение диплинков в папки — различные кнопки с диплинками можно объединить/сгруппировать в папки;
{
"type": "folder",
"title": {
"text": "Сервисы тестового САЙТА",
"color": "#ffffff"
},
"icon": {
"type": "url",
"value": "https:\/\/user43148.clients-cdnnow.ru\/img\/more.svg"
},
"data": [
{
"type": "deepLink",
"event": {
"dataset": {
"deeplink": "{{ ^#Deeplink1 }}"
}
},
"title": {
"color": "#1B1C1E",
"background": "#1B1C1E",
"text": "ДЕМО-БОТ"
},
"background": "#E8F3FF"
},
{
"type": "deepLink",
"event": {
"dataset": {
"deeplink": "{{ ^#Deeplink2 }}"
}
},
"title": {
"color": "#1B1C1E",
"background": "#1B1C1E",
"text": "ПОДДЕРЖКА"
},
"background": "#E8F3FF"
},
{
"type": "deepLink",
"event": {
"dataset": {
"deeplink": "{{ ^#Deeplink3 }}"
}
},
"title": {
"color": "#1B1C1E",
"background": "#1B1C1E",
"text": "СТАРТ общий"
},
"background": "#E8F3FF"
}
]
},
- Кнопка с диплинком в теле чат-виджета:
- Если лид новый и еще не общался с ботом в виджет;
{
"type": "deepLink",
"newConversation": {
"title": {
"color": "#1B1C1E",
"text": "Начать диалог"
},
"subtitle": {
"text": "Начать диалог с ботом"
},
"event": {
"dataset": {
"deeplink": "someDeeplinkHashCode"
}
},
"icon": {
"type": "url",
"value": "https:\/\/user43148.clients-cdnnow.ru\/img\/message_round.svg"
}
},
-
- Если лид уже общался с ботом в виджете, то продолжение кода;
"existConversation": {
"title": {
"color": "#1B1C1E",
"text": "Продолжить диалог"
},
"subtitle": {
"text": "Продолжить ранее начатый диалог"
},
"icon": {
"type": "url",
"value": "https:\/\/user43148.clients-cdnnow.ru\/img\/message_round.svg"
}
}
- Кнопка в футере виджета:
- Если лид новый и еще не общался с ботом в виджет;
{
"type": "actionOpen",
"title": {
"color": "#1B1C1E",
"text": "Задать вопрос"
},
"event": {
"dataset": {
"deeplink": "E7tsR7VFWUGHKBgg"
}
},
"icon": {
"type": "url",
"value": "https:\/\/user43148.clients-cdnnow.ru\/img\/message.svg"
}
},
-
- Если лид уже общался с ботом в виджете, в кнопки можно добавить диплинки с переходом в нужные точки сценарной ветки чат-бота;
- Если лид уже общался с ботом в виджете, в кнопки можно добавить диплинки с переходом в нужные точки сценарной ветки чат-бота;
{
"type": "actionContinue",
"title": {
"color": "#1B1C1E",
"text": "Задать новый вопрос"
},
"event": {
"dataset": {
"deeplink": "E7tsR7VFWUGHKBgg"
}
},
"icon": {
"type": "url",
"value": "https:\/\/user43148.clients-cdnnow.ru\/img\/message.svg"
}
},
В целом чат-виджет может быть настроен с различными диплинками, мессенджерам и соц.сетями.
Настройка диплинков на сайте
Для того, чтобы настроить диплинки на странице сайта необходимо на раздел сайта или кнопку установить код, который генерируется автоматически при создании ссылки.
Раздел Ссылки с типом ссылки Deep Link.
Например, на беке есть кнопки: Демо-бот, Поддержка и Старт общий, то для их настройки надо передать:
- ДЕМО-БОТ:
{"type":"deepLink","event":{"dataset":{"deeplink":"{{ ^#Deeplink1 }}"}},
"title":{"color":"#1B1C1E","background":"#1B1C1E","text":"Deeplink1"},"background":"#E8F3FF"}
- ПОДДЕРЖКА:
{"type":"deepLink","event":{"dataset":{"deeplink":"{{ ^#Deeplink2 }}"}},
"title":{"color":"#1B1C1E","background":"#1B1C1E","text":"Deeplink2"},"background":"#E8F3FF"}
- СТАРТ общий:
{"type":"deepLink","event":{"dataset":{"deeplink":"{{ ^#Deeplink3 }}"}},
"title":{"color":"#1B1C1E","background":"#1B1C1E","text":"Deeplink3"},"background":"#E8F3FF"}
Telegram
Настройки канала
Для настройки интеграции рекомендуется использовать ПК версию мессенджера Telergam.
В поиске по ID необходимо найти @BotFather.
В найденном боте следует открыть список команд и выбрать функцию /newbot.
Затем нужно ввести имя нового бота, имя может быть созвучно с вашим бизнесом. Например, primerbot.
Далее укажите ID для мессенджера, оно может совпадать с именем бота для удобства. Например, укажем со словом test test_rpimerbot.
Затем сохраните ID токена, который будет сгенерирован в Telegram, скопировать его полностью в буфер обмена.
Перейдите в Настройки бота в раздел подраздел Каналы.
Нажмите кнопку Новая привязка и выберите канал Telegram, вставьте токен и сохраните настройку.
Новая привязка создана и для завершения настройки необходимо нажать ссылку Вебхук.
Не забудьте сгенерировать Вебхук в поле Операции, иначе операция привязки бота к каналу не будет завершена.
Далее необходимо подтвердить или отменить выполняемую операцию. Оставьте версию без изменений, как было предложено.
Подключение к каналу Telegram завершено.
Теперь можно проверить запуск бота, набрав имя бота в мессенджере Telegram.
Нажмите кнопку Запустить. На экране должно появиться приветственное сообщение — это свидетельствует о правильности привязки канала.
Оформление карточки бота
Чтобы наполнить бота информацией необходимо выбрать раздел /mybots — edit your bots [beta] в сообщении с помощью или меню.
Выберите бота, которого хотите изменить и нажмите кнопку Edit Bot.
Далее выберите, что именно хотите изменить: название, описание или информацию о боте.
Команды тоже можно поставить, но данный функционал работает не во всех логических сценариях ботов, тут нужно продумывать дополнительные запросы в НЛП системы.
- Edit Name — меняет имя в главной строке. Введите новое имя и отправьте боту;
- Edit Description — меняет первое сообщение, приглашающее к диалогу. Введите текст и отправьте боту;
- Edit About — меняет описание бота в карточке аккаунта. Введите описание, объем 120 символов;
Команда Метабот очень просит своих клиентов указывать в описании сотрудничество, если это позволяет политика компании: Сделано вместе с @MetabotBot.
- Edit Botpic — меняет аватар аккаунта. Отправьте фото. Не файл, а именно фото через телефон любого формата, размером не менее 150х150 пикселей - замена моментальная. Какое-то время у бота может показываться галерея предыдущих аватаров, но через день галерея автоматически сбросится и останется только последнее отправленное фото;
- Edit Commands — меняет системные команды бота. Команды должны быть написаны латиницей, а описание можно написать кириллицей в формате:
command1 - Description command2 - Another description |
Если вы будете постепенно добавлять команды, то при создании новых, не забудьте написать старые. Порядок вашего написания будет напрямую влиять на отображение в боте.
Для того, чтобы команды работали с ботом в маршруте бота, который будет вызывать скрипт по команде регулярное выражение (код команды) должно быть написано с экранированием.
Также можно добавить маршрут рестарта, для корректного реагирования бота, в случае остановки-перезапуска бота в настройках Telegram.
Блокировка канала
На платформе реализована реакция на событие блокировки бота в Telegram, если приходит событие блокировки, то автоматически блокируется лид, включается параметр Отключение реакции боа на сообщения лида и сбрасывается беседа лида.
Также на платформе реализована реакция на событие разблокирования бота в Telegram (событие перезагрузки бота), Если приходит событие разблокировки, то автоматически у лида выключается параметр Отключение реакции боа на сообщения лида.
Далее после получения вебхука с разблокировкой приходит вебхук с текстом /start.
Jivochat
Интеграции сервиса Jivo с Metabot24 позволяет подключить бота в диалоги с клиентами в любых каналах связи. При этом, все новые диалоги вначале будут отправляться боту. По сценарию бот может переключить диалог на оператора.
Создание канала
Для подключения Jivo в меню Каналы создаем новый канал и из выпадающего списка в открывшемся окне Новая привязка к каналу выбираем Jivo.
После выбора канала в окне появятся дополнительные поля:
- Использовать inline-кнопки — по умолчанию выключено. При включении в чате пункты меню будут отображены в виде кнопок, а не текста;
- Коды виджетов — коды виджетов различных мессенджеров:
- Jivo Widget
- Telegram
- Viber
- ВКонтакте
- Авито
- Apple Business Chat
- Одноклассники
- Использовать inline-кнопки для мессенджеров — по умолчанию Определяется общей настройкой канала. При включении в чате пункты меню будут отображены в виде кнопок, а не текста:
- Jivo Widget
- Telegram
- Viber
- ВКонтакте
- Авито
- Apple Business Chat
- Одноклассники
- ID провайдера канала — ID провайдера канала.
После их заполнения сохраните введенные параметры настройки, нажав на кнопку Создать.
Все параметры кроме Использовать inline-кнопки пока можно оставить без изменений, по умолчанию и сохранить настройку.
После создания нажмите пункт Вебхук и скопируйте сгенерированный вебхук.
При копировании обратите внимание, чтобы не было вначале и в конце строки знаков «пробел».
Настройка Jivochat
После получения вебхука, вам необходимо будет зайти в приложение Jivo в раздел Управление, Каналы связи, добавить канал, например, Telegram.
После подключения канала проведите настройку раздела Настройки интеграции для разработчиков. Для этого необходимо включить опцию Включить Webhooks и заполнить поле URL для Webhooks вставить скопированный вебхук, полученный в Metabot.
Аналогично можно сделать настройку для виджета и всех подключенных каналов.
Перейдите по ссылке https://app.jivosite.com/settings/integrations/add-bot/31 и настройте расширение Metabot для подключения бота:
Здесь можно настроить внешний вид бота, который будут видеть пользователи. Загрузите логотип компании или специальную иконку бота, укажите имя и должность бота.
Токен бота можно найти на платформе в разделе Каналы:
После нажатия кнопки Сохранить, интеграция будет подключена и данный бот отобразится в подключенных системах.
Обратите внимание, что когда добавляются новые каналы и интегрируются с Metabot24, то необходимо не забывать включать в разделе Опции активность для новых каналов.
На этом всё. Бот подключен и готов к работе. Мы рекомендуем вам провести несколько тестовых диалогов, чтобы убедиться в правильности настройки сценариев. Увидеть активность пользователей при взаимодействии с ботом вы можете в разделе Лиды в личном кабинете Metabot24.
Настройка включения кнопок по каналам связи
Если по части каналов не поддерживаются или не корректно работают кнопки, то необходима настройка выборочного включения кнопок по каналам связи Jivo.
Данную настройку необходимо сделать вначале подключения канала Jivo. Для этого определить выбор в канале для каких мессенджеров используются кнопки.
Если мессенджер не определен, то параметр берется из глобальной настройки канала из параметра Использовать inline-кнопки.
Если мессенджер определен, по параметр берется из следующего перечисления:
- Определяется общей настройкой канала — установлен по умолчанию;
- Да — использовать в канале кнопки;
- Нет — не использовать в канале кнопки.
Проведем настройку кодов виджета и мессенджеров для определения наличия кнопок в мессенджере при обращении лида.
Канал | Кнопки | Использовать inline-кнопки | Регулярное выражение |
Jivo Widget | поддерживает | Да | ^https://metabot24.info/.*$ |
Telegram | поддерживает не более 7 | Да | telegram |
Viber |
поддерживает не более 7 | Да | ^metabotjivo$ |
ВКонтакте | не поддерживает | Нет | ^Metabot.*$ |
|
не поддерживает | Нет | ^Metabot.*$ |
|
не поддерживает | Нет | ^Metabot.*$ |
Avito |
не поддерживает | Нет | Avito |
Apple Business Chat |
не поддерживает | Нет | - |
Одноклассники |
не поддерживает | Нет | ^Metabot.*$ |
Поскольку код поиска — это регулярное выражение, то можно использовать любые корректные конструкции применимые к регулярным выражениям, а это значит не забываем экранировать спец символы. Если хотим ясно искать точку то пишем \. или вместо https:// нужно писать https:\/\/ — иначе регулярка будет некорректной и мессенджер не будет определен.
Если в Jivo настроена омниканальность, то могут возникнуть проблемы, поэтому рекомендуем подключать каждый мессенджер в Jivo как новый канал
Заполнение контактных данных по лиду
После общения Лида (пользователя) с ботом можно в дальнейшем просмотреть его контактные данные: мессенджер, с которого общались, имя, телефон, email.
На сервисе Jivo эти данные можно посмотреть на вкладке Диалоги, зайдя в диалог:
Для просмотра этих данных на платформе Metabot24 следует выполнить следующие действия:
1. В истории сообщений хранится параметр widget_id, который является уникальным для каждого канала. По тестовому лиду перейдите в историю сообщений.
2. Далее перейдите по ссылке в webhooks-log.
3. В строках с параметрами в поле Event Type = chat_accepted/chat_finished/chat_updated необходимо открыть ссылку Show Formatted Payload.
4. Cкопируйте код параметра widget_id.
5. Откройте на редактирование канал Jivo в настройках бота, вставьте скопированный код в соответствующее поле мессенджера и сохраните настройки.
После этого при получении последующих CRM-вебхуков из этого канала для лидов будет прописываться соответствующий мессенджер, а также и все контактные данные из карточки лида отредактированные в сервисе Jivo.
Дополнительные возможности
- Bot API сервиса Jivo не поддерживает вложения, поэтому изображения и прочие вложения отправляемые с платформы Metabot24 клиенту приходят в виде текста URL:
- Telegram автоматически делает такую ссылку активной и даже подгружает изображение;
- Чат-виджет ссылку передает просто текстом и не кликабельной, поэтому ее можно только выделить и скопировать текст, далее вставить в адресную строку браузера;
- Если в настройках канала включить параметр Использовать inline-кнопки, то кнопки прорисовываются и становятся кликабельны;
- При подключении оператора в чат с лидом сервис Jivo отправляет сообщение в мессенджер о присоединении оператора к чату. При выходе оператора из чата сервис Jivo не отправляет никаких сообщений и в боте также не отображается, что оператор вышел из чата с лидом;
- После завершения чата оператором или если это произошло автоматически через определённое время простоя, теряется возможность отправки ботом сообщений в этот чат. Возможность возобновляется после перезагрузки данного чата оператором или лидом;
- Имеется возможность переключения на оператора с помощью команд в боте, обратно переключение на бота может сделать только оператор — Выйти из чата, но лид должен заново начать диалог, написав сообщение, иначе бот не возобновит работу;
- Если операторов нет онлайн, то при отправке сообщения приходит вебхук соответствующего события и в боте можно использовать вызов скрипта с типом Нет доступных операторов;
- При перенаправлении чата от одного оператора другому оператору, никаких событий от сервиса Jivo не поступает в Metabot24 и этот момент не обрабатывается на платформе, в бота не отправляются уведомительные сообщения;
- Рекомендуемые настройки канала, для отображения чата:
- Можно настроить автоматические действия и поведение чат-бота при недоступности операторов, для этого в настройках канала в разделе Автоматические действия отключить все пункты и добавить новый пункт Показать чат-бот при самом первом посещении сайта, делается это с помощью кнопки Добавить действие;
-
В новом пункте указать следующие рекомендованные настройки по условиям:
- Время на сайте;
- Количество визитов;
- Время от последнего активного приглашения;
-
При таких настройках окно чата будет показываться пользователю при первом посещении через 20 сек;
-
В разделе Форма контактов необходимо отключить запрос формы контактов клиента;
-
В разделе Кнопки в чате можно настроить поведение чата при условии, что пользователь еще ничего не написал. Это рекомендуется настраивать, чтоб при повторном обращении в бота спустя время, пользователь мог нажать на кнопку и активировать бота или при первом посещении чата - окно чата не было пустым.
Работа с Jivochat из JS
С каналами Jivochat можно работать из JS следующими методами:
Отправить markdown текст
Описание:
Используйте когда вам необходимо отправить форматированное сообщение в канал, например, когда вам нужно отправить ссылку в окно чат-виджета в виде гипертекстовой ссылки сайт вместо https://metabot24.ru.
Markdown передается через указание дополнительных параметров apiAdditionalParams для JS функции bot.sendText(). Если интеграция Jivochat с каналом не поддерживает markdown, то будет отправлена plain версия.
Пример:
let markdown = `Ознакомьтесь с нашим [каталогом плагинов](https://metabot24.ru/plugins/)`;
let plain = `Ознакомьтесь с нашим каталогом плагинов: https://metabot24.ru/plugins/`;
bot.sendText(
plain,
{
"message": {
"type":"MARKDOWN",
"content": markdown,
"text": plain,
"timestamp": Date.now(),
}
}
);
VK
Интеграция канала VK с платформой Metabot24
Для интеграции канала VK с платформой необходимо иметь в сообществе VK роль — Администратор.
Входим в аккаунт VK. Затем переходим в раздел Сообщества, на вкладку Управление и выбираем нужное для настройки канала сообщество.
Переходим в раздел Управление.
Здесь выбираем раздел Работа с API и нажимаем кнопку Создать ключ.
В диалогом окне выбираем установить активность по всем пунктам и нажимаем кнопку Создать и далее подтверждаем все действия.
Копируем созданный ключ в буфер обмена.
Дальше следует перейти в административную панель платформы Metabot24. Для этого выполняем следующие действия:
- Переходим в Настройки бота в подраздел Каналы.
- Нажимаем кнопку Новая привязка и выбираем канал VK.
- Вставляем скопированный ключ в поле Токен.
- При необходимости включаем опцию Использовать inline-кнопки.
- Форму пока не закрываем.
При включении опции Использовать inline-кнопки стоит помнить об ограничениях VK: в меню должно быть не более 7 пунктов и наименование кнопок меню должно быль не более 20 символов с учетом пробелов между словами.
Переходим обратно в админ-панель VK в раздел Сообщения подраздел Настройки для бота. Опция Сообщения сообщества должна быть включена, остальные поля необязательны.
Далее переходим в раздел Настройки и копируем ID сообщества.
Возвращаемся в административную панель платформы Metabot24 и вставляем скопированное в поле ID сообщества. Сохраняем, нажав кнопку Создать.
Новая привязка создана и для завершения настройки необходимо нажать на кнопку Вебхук.
Не забудьте сгенерировать вебхук в поле Операции, иначе операция привязки бота к каналу не будет завершена.
Подтверждаем или отменяем выполняемую операцию. Версия формата вебхука по умолчанию = V3.
Подключение к каналу VK завершено.
Далее необходимо проверить работу бота, написав боту в VK сообщение.
Если в приложении появится новое сообщение от бота — это успех!
Umnico
Для интеграции сервиса Umnico с платформой Metabot24 необходимо в разделе Настройки -> API скопировать ваш API токен, нажав на кнопку Скопировать токен.
Далее на платформе Metabot24 в настройках своего бота выполнить следующие действия:
- Перейти в настройки бота в раздел Настройки бота подраздел Каналы;
- Нажать кнопку Новая привязка и выбрать канал Umnico;
- В поле Токен вставить скопированный токен;
- В поле Логин менеджера вставить логин пользователя из Umnico и сохранить настройку.
Найти Логин менеджера можно на сайте Umnico.
Новая привязка создана и для завершения настройки необходимо нажать ссылку Вебхук.
Далее необходимо подтвердить или отменить выполняемую операцию. Оставьте версию без изменений, как было предложено.
Подключение к сервису Umnico завершено!
Подключение распознавания файлов в различных каналах
Редактирование настроек канала Metabot Widget
В канале Metabot Widget через редактирование необходимо:
1. Поставить активность чекбокса Разрешить отправку файлов.
2. В поле Список поддерживаемых расширений файлов добавить список разрешенных форматов файлов:
pdf,doc,docx,xls,xlsx,csv,txt,png,jpe,jpg,jpeg,gif,bmp,ico,svg,svgz,tif,tiff,jfif,ai,drw,pct,psp,xcf,psd,raw,webp,xbm,dib,pgp,apng,pjpeg,avif,avi,divx,flv,m4v,mkv,mov,mp4,mpeg,mpg,ogm,ogv,ogx,rm,rmvb,smil,webm,wmv,xvid,3gp,3g2,qt,asx |
3. Выбрать Только меню в поле Реакция на файлы (документы).
4. Сохранить настройки.
Редактирование настроек скрипта с типом Fallback
В название скрипта Fallback рекомендуем добавить “+ ФАЙЛЫ” для оперативного поиска в списке скриптов. Необходимо проверить корректность настроек NLP в скрипте.
Затем наполните скрипт командами:
- Первой командой должна идти команда Выполнить JavaScript, которая получает из вебхука событие: есть ли в сообщении с распознанным текстом файл и добавляет переменную is_attachment, что файл есть;
let whJob = bot.getWebhookJob()
let eventType = whJob.event_type
memory.setAttr('is_attachment', false)
if (eventType === 'user_attachments') {
memory.setAttr('is_attachment', true)
bot.disableRepeatMessageText() // погасит вывод сообщения с повтором вопроса
bot.hideRepeatMessageButtons() // погасит вывод меню с повтором вопроса
}
- Второй командой должна идти команда Выполнить JavaScript, которая фиксирует сам файл в хранилище и формирует ссылку для передачи в последствии в сообщениях/в письме на почту;
// Библиотека с помощью которой можно записать в карочку лида данные не отправля их в тг
let TelegramMessage = require('Common.Integrations.Telegram')
let msg = new TelegramMessage()
// Все входящие файлы
let attachments = bot.getAllAttachments()
if(Boolean(attachments?.[0]?.url)){
uploadData = bot.downloadFileFromUrl(attachments[0].url)
msg.debug('Пользователь отправил файл: ' + uploadData.url)
lead.setAttr('file', uploadData.url)
// Запуск скрипта...
bot.runScriptByCodeForLead("recieveFile", lead.getData('id'))
bot.stop()
}
- Третьей командой должна идти команда Выполнить JavaScript, которая срабатывает в случае, когда файла в сообщениях нет (проверка в условии). JavaScript подбирает случайный ответ из списка, фиксирует дату сообщения, заносит в Google таблицу нераспознанный текст;
// Условие
return !(memory.getAttr('is_attachment')*1)
// JavaScript
var randomStrings = [
"Не совсем понимаю, о чём вы.",
"Извините, я вас не понял. Перефразируйте, пожалуйста.",
"Попробуйте воспользоваться разделами меню или сказать другими словами.",
"Простите, не понял вас, попробуйте снова."
];
randomIndex = Math.ceil((Math.random()*randomStrings.length-1));
lead.setAttr('randomAnswer', randomStrings[randomIndex]);
var ДатаСообщения = new Date(Date.now());
var ДатаСообщенияСтр =
ДатаСообщения.getFullYear() + "-" +
("0" + (ДатаСообщения.getMonth()+1)).slice(-2) + "-" +
("0" + ДатаСообщения.getDate()).slice(-2);
var GoogleSheetsService = require('Common.Integrations.GoogleSheets') // Плагин для работы с Google Sheets
GoogleSheetsService.sheetId = '1pLbxTJG2YI6LghJ4FMCCBkQ7ybTL0Y7ZGw4yvaGCsQo' // ID скопированный из таблицы
GoogleSheetsService.listName = 'Рехау.Про' // Название листа
// Параметры где ключ - название столбца, значение - данные которые занесутся в строку
let params = {
"Bot ID": botId,
"Лид ID": leadId,
"Время": ДатаСообщения,
"Сообщение": bot.getIncomingMessage(),
}
let result = GoogleSheetsService.addRow(params) // Функция для добавления строк в таблицу
debug(result)
- Четвертой командой должна идти команда Отправить текст с рандомным текстом, которая срабатывает в случае, когда файла в сообщениях нет (проверка в условии);
// Условие
return !(memory.getAttr('is_attachment')*1)
Текст команды |
{{ $randomAnswer }} |
- Пятой командой должна идти команда Отправить текст с текстом, которая срабатывает в случае, когда в сообщении есть файл (проверка в условии);
// Условие return (memory.getAttr('is_attachment')*1)
Текст команды Файл принят, передадим на изучения группе поддержки. С вами свяжутся либо через чат-бота, либо через имеющиеся контакты.
А пока что можете воспользоваться автоматическим функционалом чат-бота.
- При необходимости шестой командой должна идти команда Email, которая срабатывает в случае, когда в сообщении есть файл (проверка в условии). На почту отправляется письмо с файлом пользователя;
// Условие
return (memory.getAttr('is_attachment')*1)
Получатель | email, на который необходимо отправить письмо. ({{ $bot.botSupportMails }}) |
Тема | *Название бота поддержки*: лид отправил в бота файл |
Содержимое | В чат-боте пользователь прислал в бота файл <br> <br>ID клиента для поиска в диалогах на платформе Metabot: {{ &$leadId }} <br> <br>Ссылка на файл: {{ $is_attachment }} <br> <img src="{{ $is_attachment }}" alt="Отправленный файл" width="400" height="341" /> <br> С уважением, <br> Ваш Metabot |
При необходимости, можно создать системный атрибут с ключом botSupportMails, типом variable и значением равным всем почтам, на которые должно поступить письмо.
- Последней командой должна идти команда Повторить вопрос.