Metabot Widget

Чат-виджет от 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>

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

Войти в Google аккаунт, перейти на https://tagmanager.google.com/.

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

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

В остальных диалоговых окнах соглашаемся и нажимаем ОК.

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

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

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

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

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

Загрузить в CDN скрипт-загрузчик, цвет записи должен быть по цвету зелёное “200”.

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

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

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

  

• выбрать пункт All Pages;
• нажать кнопку Сохранить.

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

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

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

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

Вот так для примера:

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