Подключение каналов

Metabot Widget

Создание канала

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

Первым делом, следует создать канал для общения с клиентами. Это место, где будут проходить все диалоги.

Для этого в меню Каналы создаем новый канал и из выпадающего списка в открывшемся окне Новая привязка к каналу выбираем Metabot Widget.

image.png

После выбора канала в окне появятся дополнительные поля:
  • Версия формата вебхука — по умолчанию V3, менять не рекомендуется;
  • Использовать Inline-кнопки — по умолчанию выключено. При включении в чате пункты меню будут отображены в виде кнопок, а не текста;
  • Отображать дату/время сообщений в виджете по умолчанию включено, отображает дату и время поступающих и отправленных сообщений в чате;
  • Отображать кнопки бота в одну колонку — по умолчанию выключено. При включении кнопки меню в виджете будет размещены в одну колонку, иначе на строке будет размещено столько кнопок, сколько поместятся по ширине виджета;
  • Автопрокрутка до последнего исходящего сообщения лида — по умолчанию выключено. При выключенном состоянии позиционирование производится в конец последней кнопки меню, если включить опцию, то позиционирование производится вначале последнего сообщения бота, что очень удобно при объемных текстовых сообщениях от бота;
  • Версия виджета  не редактируемое поле;
  • Заголовок — текстовое поле, которое будет отображаться в заголовке виджета. Не обязательно для заполнения;
  • Подзаголовок — текстовое поле, которое будет отображаться в подзаголовке виджета. Не обязательно для заполнения;
  • Подсказка для поля отправки текста — редактируемое текстовое поле. По умолчанию заполнено фразой "Введите сообщение...";
  • Всплывающая подсказка для поля отправки текста — редактируемое текстовое поле. По умолчанию заполнено фразой "Введите сообщение...";
  • Автогенерация списка диплинков — автоматическое заполнение списка диплинков, при этом, список диплинков, заполненный вручную не будет использоваться;
  • Список диплинков (JSON-массив) — список диплинков (массив в JSON-формате), указанные диплинки будут отображены при нажатии на значок чат-виджета. Нажатие на ссылку с диплинком запустит привязанный к диплинку маршрут. Привязка диплинка к маршруту устанавливается в "Настройках бота", на странице "Маршруты";
  • Разрешить отправку файлов — опция для включения или отключения отправки файлов в виджете;
  • Список поддерживаемых расширений файлов — список форматов файлов, которые могут быть отправлены в виджет. По умолчанию в поле указано: "png, jpg, gif, pdf, doc, docx, csv, xml, zip, 7zip, gzip, rar";
  • Реакция на файлы (документы) — выпадающий список с выбором реакции виджета на файлы;
  • Контекст NLP для файлов (документов) — NLP контекст для файлов в виджете;
  • Отключить Fallback для файлов (документов) — опция для включения или отключения Fallback для файлов в виджете.

Затем сохраните введенные параметры настройки, нажав на кнопку Создать.

image.png

image.png

Конфигурация виджета и брендирование

Для кастомизации цветов доступны следующие параметры:

Параметр Описание Пример:
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 ссылка на картинку.

Эти параметры добавляются в код инициализации виджета, который вы можете взять в поле Код виджета канала.   

image.png

Например, вот так выглядит код виджета для бренда 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.

Размещение кода виджета на сайте

После создания канала появится HTML-код для вставки на страницу. Используя любой подходящий редактор вставьте данный код перед закрывающим тэгом </body>.

image.png


Проверить работу чат-виджета можно нажав кнопку Предварительный просмотр.

image.png


В новом окне браузера откроется пустая страница с чат-виджетом в нижнем правом углу.

image.png


Нажмите на иконку чат-виджета и протестируйте вашего бота на ответы.

image.png


Асинхронное подключение чат-виджета

Для асинхронного подключения чат-виджета в настройках имеется поле Загрузчик. Оно становится доступным после первоначального сохранения настроек канала.

По команде Загрузить выполняется (пере-)генерация скрипта-загрузчика и загрузка его на CDN. Загружается скрипт, идентичный тому, что выведен в поле Код виджета выше. Соответственно при изменении настроек, влияющих на код виджета, следует перезагружать скрипт-загрузчик на CDN.

image.png


В Загрузчике выводится нужная одна строка-ссылка на CDN-скрипт. Выполняется автоматическая проверка доступности скрипта-загрузчика в CDN. Если всё работает правильно, то выводится зелёное "200", иначе - красное "404" или другой код ошибки.

image.png

Metabot Widget и GTM

Настройка чат-виджета через Google Tag Manager (GTM)

Чтобы настроить чат-виджет через GTM нужно выполнить следующие действия:

1. Войти в Google аккаунт по ссылке https://tagmanager.google.com/.

2. Далее создать аккаунт как показано на рисунке ниже.

изображение.png

3. Заполнить контейнер и создать запись как показано на рисунке ниже.

изображение.png

4. В остальных диалоговых окнах согласиться и нажать кнопку ОК.

Если аккаунт GTM уже был создан, то достаточно в аккаунте добавить новый контейнер.

5. Добавить новый тег.

изображение.png

6. Нажать на кнопку в блоке Конфигурация тега.

изображение.png

7. Выбрать пункт Пользовательский HTML.

изображение.png

8. В административной панели платформы Metabot, необходимо создать подключение канала Metabot Widget (если ещё нет) и загрузить в CDN скрипт-загрузчик.

Запись должна быть отмечена зеленым значком со значением “200”.

9. Скопировать тело скрипта в буфер.

изображение.png

10. Продолжить заполнение тега в GTM, для этого выполнить по пунктам:

   10.1. Придумать имя тега.

   10.2. Вставить из буфера обмена скопированный скрипт.

   10.3. Создать GTM-триггер.

изображение.png

   10.4. Выбрать пункт All Pages.

изображение.png 

   10.5. Нажать кнопку Сохранить.

изображение.png

11. В рабочей области нажать кнопку Отправить.

изображение.png

12. Заполнить форму указав название версии, например, ver1 и по желанию описание версии. Затем нажать кнопку Опубликовать.

изображение.png

13. После успешной публикации версии, вернуться в Рабочую область и открыть popup с кодами тег-менеджера.

изображение.png

14. Скопировать фрагменты кода в вставить в соответствующие разделы на сайте в head и body нужной html-страницы.

изображение.png

Ниже показан пример как это может выглядеть:

изображение.png

15. Открыть страницу сайта в браузере. Нужные скрипты подгружаются и виджет запускается.

изображение.png


Редактирование чат-виджета в GTM

При удалении и создании нового канала Metabot Widget на платформе, затем достаточно просто скопировать скрипт из блока Загрузчик и вставить его новой версией тега в контейнер GTM.

Для этого в аккаунте GTM открыть тег на редактирование.

изображение.png

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

изображение.png

Мы получим новую версию загруженного чат-виджета с платформы.

изображение.png

Таким образом без правки кода сайта мы можем переключать на различные версии чат-виджетов.

изображение.png

Metabot Widget с диплинками

Чат-виджет с диплинками

При создании и тестировании чат-бота в канале Metabot Widget необходимо провести первоначальные настройки виджета. Как это сделать подробно описано в статье Metabot Widget.

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

Настройка маршрутов с диплинками

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

Также можно настроить на странице сайта кнопку с запуском диплинка и переходом в чат-виджет в соответствующий сценарий.

Рассмотрим пример:

  1. Разместим на тестовой странице сайта 2 кнопки с диплинками:
  • Демо-бот;
  • Поддержка.
  1. Создадим 3 ссылки в разделе Ссылки с именем диплинков, например, Deeplink1, Deeplink2, Deeplink3.

Заполним следующие параметры:

  • Имя — указать имя ссылки, например "Deeplink1";
  • Текст — текстовое сообщение, которое будет отображено в чат-виджете;
  • Тип ссылки — выбираем пункт Ссылка на бот-скрипт (Deep Link).

Нажимаем кнопку Создать.


изображение.png

Аналогично создаем ссылки с именами: "Deeplink2" и "Deeplink3".

Результатом проделанных действий будут созданные 3 ссылки как на рисунке ниже.

изображение.png

  1. Создадим маршруты в разделе Маршруты с регулярными выражениями соответствующими именам созданных ссылок.

ДЕМО-БОТ

Должны быть активированы следующие свойства маршрута и заполнены соответствующие поля:

изображение.png

ПОДДЕРЖКА

Должны быть активированы следующие свойства маршрута и заполнены соответствующие поля:

изображение.png

Тестовый бот - СЕРВИС ОПРЕДЕЛЕН - ДЕМО-БОТ

Должны быть активированы следующие свойства маршрута и заполнены соответствующие поля, также необходимо указать условие JS:

изображение.png

изображение.png

Тестовый бот - СЕРВИС ОПРЕДЕЛЕН - ПОДДЕРЖКА

Должны быть активированы следующие свойства маршрута и заполнены соответствующие поля, также необходимо указать условие JS:

изображение.png

изображение.png


Контроль автоопределения текущего раздела сайта выполняется с помощью V8 условий в маршруте с диплинком.

Добавляются 2 диплинка для ТЕСТОВОГО БОТА с таким условие (условия немного отличаются):
// Запуск диплинка ДЕМО-БОТ

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;
}
Смысл данного условия в том, что при клике на кнопку с диплинком с фронта передается параметр service.

Далее в диплинке ТЕСТОВЫЙ БОТ мы определяем какой это сервис и запускаем необходимый скрипт.

Тестовый бот - СЕРВИС НЕ ОПРЕДЕЛЕН

Последним маршрутом с диплинком ТЕСТОВЫЙ БОТ и V8 условием идет маршрут, который запускает приветствие бота если сервис не распознан.

В нем условие можно и не писать, но в таком случае этот маршрут должен обязательно идти последним в списке.
На случай если кто-то случайно передвинет его выше в списке маршрутов, v8 просто не даст ему запуститься, если сервис ОПРЕДЕЛЕН.

изображение.png

изображение.png
// Запуск диплинка ТЕСТОВЫЙ БОТ, если сервис с сайта не передан или не определен

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ка диплинков.

Если данная опция включена, то список диплинков заполненный вручную ниже не будет задействован.

изображение.png

Эта опция позволяет не заполнять список диплинков, они будут генерироваться автоматически при формировании кода виджета.

При автогенерации списка диплинков ссылки с диплинками будут выстроены в той же последовательности, как и в разделе Ссылки, поэтому в данном разделе имеется сортировка ссылок.

Генерация списка диплинков для заполнения вручную

изображение.png

Диплинки могут быть настроены в виде кнопок со ссылками или кнопки объединены в папки.

Настройка виджета с диплинками в виде кнопок со ссылками.

При такой генерации учитывается порядок ссылок бота, которые описаны в предыдущем пункте.

изображение.png

Для того, чтобы отредактировать список диплинков, необходимо открыть канал на редактирование по кнопке Редактировать.

Можно убрать лишние диплинки, блок настройки одного диплинка выделен на рисунке.

изображение.png

При предварительном просмотре чат-виджет имеет 3 кликабельные кнопки с диплинками перехода в сценарные скрипты.

изображение.png

Настройка виджета с диплинками объединенными в папки.

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

Рассмотрим несколько примеров:

 {
        "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": <ссылка на загруженный файл иконки с икранирующими \/ символами, картинку можно загрузить на платформу в разделе Магазин- Медиагалерея>

изображение.png

  {
        "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"
            }
        ]
    },

 изображение.png

 изображение.png

{
        "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"
            }
        },

изображение.png

 "existConversation": {
            "title": {
                "color": "#1B1C1E",
                "text": "Продолжить диалог"
            },
            "subtitle": {
                "text": "Продолжить ранее начатый диалог"
            },
            "icon": {
                "type": "url",
                "value": "https:\/\/user43148.clients-cdnnow.ru\/img\/message_round.svg"
            }
        }

На виджете так изображение.png

  {
        "type": "actionOpen",
        "title": {
            "color": "#1B1C1E",
            "text": "Задать вопрос"
        },
        "event": {
            "dataset": {
                "deeplink": "E7tsR7VFWUGHKBgg"
            }
        },
        "icon": {
            "type": "url",
            "value": "https:\/\/user43148.clients-cdnnow.ru\/img\/message.svg"
        }
    },

 изображение.png

 {
        "type": "actionContinue",
        "title": {
            "color": "#1B1C1E",
            "text": "Задать новый вопрос"
        },
        "event": {
            "dataset": {
                "deeplink": "E7tsR7VFWUGHKBgg"
            }
        },
        "icon": {
            "type": "url",
            "value": "https:\/\/user43148.clients-cdnnow.ru\/img\/message.svg"
        }
    },
  

изображение.png

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

изображение.png


Настройка диплинков на сайте

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

Раздел Ссылки с типом ссылки Deep Link.

изображение.png

Например, на беке есть кнопки: Демо-бот, Поддержка и Старт общий, то для их настройки надо передать:

{"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

Для интеграции канала Telegram c платформой Metabot24 необходимо создать аккаунт и задать адрес бота в Telegram.

Настройки канала

Для настройки интеграции рекомендуется использовать ПК версию мессенджера Telergam.

В поиске по ID необходимо найти @BotFather.

В найденном боте следует открыть список команд и выбрать функцию /newbot.

image.png

Затем нужно ввести имя нового бота, имя может быть созвучно с вашим бизнесом. Например, primerbot.

image.png

Далее укажите ID для мессенджера, оно может совпадать с именем бота для удобства. Например, укажем со словом test test_rpimerbot.

image.png

Затем сохраните ID токена, который будет сгенерирован в Telegram, скопировать его полностью в буфер обмена.

image.png

Перейдите в Настройки бота в раздел подраздел Каналы.

Нажмите кнопку Новая привязка и выберите канал Telegram, вставьте токен и сохраните настройку.

image.png

Новая привязка создана и для завершения настройки необходимо нажать ссылку Вебхук.

Не забудьте сгенерировать Вебхук в поле Операции, иначе операция привязки бота к каналу не будет завершена.

image.png

Далее необходимо подтвердить или отменить выполняемую операцию. Оставьте версию без изменений, как было предложено.

image.png

Подключение к каналу Telegram завершено.

Теперь можно проверить запуск бота, набрав имя бота в мессенджере Telegram.

image.png

Нажмите кнопку Запустить. На экране должно появиться приветственное сообщение — это свидетельствует о правильности привязки канала.

image.png

Оформление карточки бота

Чтобы наполнить бота информацией необходимо выбрать раздел /mybotsedit your bots [beta] в сообщении с помощью или меню.

Выберите бота, которого хотите изменить и нажмите кнопку Edit Bot.

редактирование бота.png

Далее выберите, что именно хотите изменить: название, описание или информацию о боте.

Команды тоже можно поставить, но данный функционал работает не во всех логических сценариях ботов, тут нужно продумывать дополнительные запросы в НЛП системы.

Команда Метабот очень просит своих клиентов указывать в описании сотрудничество, если это позволяет политика компании: Сделано вместе с @MetabotBot.

command1 - Description

command2 - Another description

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

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

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

Блокировка канала

На платформе реализована реакция на событие блокировки бота в Telegram, если приходит событие блокировки, то автоматически блокируется лид, включается параметр Отключение реакции боа на сообщения лида и сбрасывается беседа лида.

Также на платформе реализована реакция на событие разблокирования бота в Telegram (событие перезагрузки бота), Если приходит событие разблокировки, то автоматически у лида выключается параметр Отключение реакции боа на сообщения лида.

Далее после получения вебхука с разблокировкой приходит вебхук с текстом /start.

Jivochat

Интеграции сервиса Jivo с Metabot24 позволяет подключить бота в диалоги с клиентами в любых каналах связи. При этом, все новые диалоги вначале будут отправляться боту. По сценарию бот может переключить диалог на оператора.

История диалогов с ботами автоматически сохраняется в архиве.

Создание канала

Для подключения Jivo в меню Каналы создаем новый канал и из выпадающего списка в открывшемся окне Новая привязка к каналу выбираем Jivo.

image.png

После выбора канала в окне появятся дополнительные поля:

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

Все параметры кроме Использовать inline-кнопки пока можно оставить без изменений, по умолчанию и сохранить настройку.

image.png

image.png

image.png

image.png

После создания нажмите пункт Вебхук и скопируйте сгенерированный вебхук.

При копировании обратите внимание, чтобы не было вначале и в конце строки знаков «пробел».

Настройка Jivochat

После получения вебхука, вам необходимо будет зайти в приложение Jivo в раздел Управление, Каналы связи, добавить канал, например, Telegram.

дживо.png

После подключения канала проведите настройку раздела Настройки интеграции для разработчиков. Для этого необходимо включить опцию Включить Webhooks и заполнить поле URL для Webhooks вставить скопированный вебхук, полученный в Metabot.

вебхук дживо.png

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

Перейдите по ссылке https://app.jivosite.com/settings/integrations/add-bot/31 и настройте расширение Metabot для подключения бота:

image.png

image.png

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

Токен бота можно найти на платформе в разделе Каналы:

вебхук дживо.png


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

Обратите внимание, что когда добавляются новые каналы и интегрируются с Metabot24, то необходимо не забывать включать в разделе Опции активность для новых каналов.

вебхук дживо.png

На этом всё. Бот подключен и готов к работе. Мы рекомендуем вам провести несколько тестовых диалогов, чтобы убедиться в правильности настройки сценариев. Увидеть активность пользователей при взаимодействии с ботом вы можете в разделе Лиды в личном кабинете Metabot24.

Настройка включения кнопок по каналам связи

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

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

Если мессенджер не определен, то параметр берется из глобальной настройки канала из параметра Использовать inline-кнопки.

Если мессенджер определен, по параметр берется из следующего перечисления:

Проведем настройку кодов виджета и мессенджеров для определения наличия кнопок в мессенджере при обращении лида.

Канал Кнопки Использовать inline-кнопки Регулярное выражение
Jivo Widget поддерживает Да ^https://metabot24.info/.*$
Telegram поддерживает не более 7 Да telegram

Viber

поддерживает не более 7 Да ^metabotjivo$
ВКонтакте не поддерживает Нет ^Metabot.*$

Instagram

не поддерживает Нет ^Metabot.*$

Facebook

не поддерживает Нет ^Metabot.*$

Avito

не поддерживает Нет Avito

Apple Business Chat

не поддерживает Нет -

Одноклассники

не поддерживает Нет ^Metabot.*$

Поскольку код поиска — это регулярное выражение, то можно использовать любые корректные конструкции применимые к регулярным выражениям, а это значит не забываем экранировать спец символы. Если хотим ясно искать точку то пишем \. или вместо https:// нужно писать https:\/\/ — иначе регулярка будет некорректной и мессенджер не будет определен.

Если в Jivo настроена омниканальность, то могут возникнуть проблемы, поэтому рекомендуем подключать каждый мессенджер в Jivo как новый канал

Заполнение контактных данных по лиду

После общения Лида (пользователя) с ботом можно в дальнейшем просмотреть его контактные данные: мессенджер, с которого общались, имя, телефон, email.

На сервисе Jivo эти данные можно посмотреть на вкладке Диалоги, зайдя в диалог:

диалог дживо.png

Для просмотра этих данных на платформе Metabot24 следует выполнить следующие действия:

1. В истории сообщений хранится параметр widget_id, который является уникальным для каждого канала. По тестовому лиду перейдите в историю сообщений.

диалог дживо.png

2. Далее перейдите по ссылке в webhooks-log.

диалог дживо.png

3. В строках с параметрами в поле Event Type = chat_accepted/chat_finished/chat_updated необходимо открыть ссылку Show Formatted Payload.

диалог дживо.png

4. Cкопируйте код параметра widget_id.

диалог дживо.png

5. Откройте на редактирование канал Jivo в настройках бота, вставьте скопированный код в соответствующее поле мессенджера и сохраните настройки.

диалог дживо.png

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

Дополнительные возможности

Работа с 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. Затем переходим в раздел Сообщества, на вкладку Управление и выбираем нужное для настройки канала сообщество.

изображение.png

Переходим в раздел Управление.

изображение.png

Здесь выбираем раздел Работа с API и нажимаем кнопку Создать ключ.

изображение.png

В диалогом окне выбираем установить активность по всем пунктам и нажимаем кнопку Создать и далее подтверждаем все действия.

изображение.png

Копируем созданный ключ в буфер обмена.

изображение.png

Дальше следует перейти в административную панель платформы Metabot24. Для этого выполняем следующие действия:

  1. Переходим в Настройки бота в подраздел Каналы.
  2. Нажимаем кнопку Новая привязка и выбираем канал VK.
  3. Вставляем скопированный ключ в поле Токен.
  4. При необходимости включаем опцию Использовать inline-кнопки.
  5. Форму пока не закрываем.

изображение.png

При включении опции Использовать inline-кнопки стоит помнить об ограничениях VK:  в меню должно быть не более 7 пунктов и наименование кнопок меню должно быль не более 20 символов с учетом пробелов между словами.

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

изображение.png

Далее переходим в раздел Настройки и копируем ID сообщества.

изображение.png

Возвращаемся в административную панель платформы Metabot24 и вставляем скопированное в поле ID сообщества. Сохраняем, нажав кнопку Создать.

изображение.png

Новая привязка создана и для завершения настройки необходимо нажать на кнопку Вебхук.

Не забудьте сгенерировать вебхук в поле Операции, иначе операция привязки бота к каналу не будет завершена.

изображение.png

Подтверждаем или отменяем выполняемую операцию. Версия формата вебхука по умолчанию = V3.

изображение.png

Подключение к каналу VK завершено.

изображение.png

Далее необходимо проверить работу бота, написав боту в VK сообщение.

изображение.png

Если в приложении появится новое сообщение от бота — это успех!

изображение.png


Umnico

Для интеграции сервиса Umnico с платформой Metabot24 необходимо в разделе Настройки -> API скопировать ваш API токен, нажав на кнопку Скопировать токен

image.png

Далее на платформе Metabot24 в настройках своего бота выполнить следующие действия:

image.png

Найти Логин менеджера можно на сайте Umnico.

image.png

Новая привязка создана и для завершения настройки необходимо нажать ссылку Вебхук.

меню.png

Далее необходимо подтвердить или отменить выполняемую операцию. Оставьте версию без изменений, как было предложено.

image.png

Подключение к сервису 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 в скрипте.

Затем наполните скрипт командами:

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() // погасит вывод меню с повтором вопроса
}
// Библиотека с помощью которой можно записать в карочку лида данные не отправля их в тг
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()
}
// Условие

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, на который необходимо отправить письмо. ({{ $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 и значением равным всем почтам, на которые должно поступить письмо.