Metabot Widget

Чат-виджет от Metabot

Настройка чат-виджета

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

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

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

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

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

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

Кастомизация виджета под бренд компании

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

Параметр	Описание	Пример:
mainColor	Основной цвет	"#F69B1D"
userTextColor	Цвет текста на кнопках	"#FFF"
userBackgroundColor	Цвет кнопок	"#F69B1D"

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

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

Настройка чат-виджета через 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, для этого выполнить по пунктам:

придумать имя тега; вставить из буфера обмена скопированный скрипт; создать GTM-триггер;

выбрать пункт All Pages;

 

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

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

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

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

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

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

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

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

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

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

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

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

 

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