Виджет на сайте#

Виджет — единственное, что ставится на страницы вашего сайта. Всё остальное происходит на нашей стороне: сообщение уходит менеджерам в Telegram, ответ возвращается в панель чата.

Сниппет#

Готовая строка со всеми подставленными значениями лежит в кабинете: проект → «Код для сайта». Выглядит она так:

<script src="https://widget.globask.com/widget/widget.js" data-globask-key="pk_ваш_ключ"></script>

Вставьте её перед закрывающим </body> на всех страницах сайта — человек пишет с той страницы, на которой у него возник вопрос, а не с главной. Адрес страницы приходит менеджеру вместе с обращением.

Что нужно знать про этот скрипт:

• pk_… — публичный ключ проекта, а не секрет. Он и должен лежать в исходном коде страницы. От установки вашего чата на чужой сайт защищает не он, а список доменов.
• Он ничего не блокирует. Скрипт грузится асинхронно, весит меньше 5 КБ в gzip и рисует кнопку сам, не дожидаясь ответа сервера.
• Панель чата создаётся только по клику. До первого открытия на странице нет ни iframe, ни его содержимого. Исключение — посетитель, который уже писал вам: ему панель готовится заранее, иначе ответ пришёл бы в никуда.
• Двойная установка не удваивает чат. Сниппет нередко попадает на страницу дважды — через тему сайта и через диспетчер тегов разом. Второй запуск с тем же ключом мы игнорируем.

Домены сайта#

В кабинете (проект → «Настройки») перечислены домены, на которых виджету разрешено работать. Виджет заработает на них и на их поддоменах; на всех прочих — не заработает вовсе.

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

«https://» и путь вводить можно — мы оставим только домен.

Открывать чат своей кнопкой#

Клик по любому элементу с классом globask-open или атрибутом data-globask-open открывает чат. Это работает всегда, независимо от настроек, и не требует ни строчки JavaScript:

<a href="#" class="globask-open">Написать нам</a>

Клик по вложенному элементу — иконке или span внутри кнопки — тоже считается: мы ищем ближайшего родителя.

Если вместо нашей круглой кнопки на странице должна остаться только ваша, выберите в кабинете (проект → «Внешний вид») пункт «Своим элементом сайта». Тогда наша кнопка не прячется, а не появляется в документе вовсе.

Счётчик непрочитанных#

Когда менеджер отвечает закрытой панели, мы ставим на все элементы-лаунчеры атрибут data-globask-unread с числом непрочитанных. Нарисовать его — ваше дело; на нашей кнопке для этого есть свой кружок, у вашей — только атрибут:

.globask-open[data-globask-unread]::after {
    content: attr(data-globask-unread);
}

Без этого правила ответ менеджера дойдёт до посетителя молча — и, скорее всего, не дойдёт вовсе.

Управление из скриптов сайта#

Виджет выставляет наружу window.globask с тремя методами:

window.globask.open();
window.globask.close();
window.globask.toggle();

Объект появляется после загрузки скрипта, поэтому вызывать его из кода, который выполняется раньше, нельзя — проверьте, что он есть:

window.globask?.open();

Имена globask-open, data-globask-open, data-globask-unread и window.globask — часть публичного контракта: мы их не переименуем.

Внешний вид#

Настраивается в кабинете (проект → «Внешний вид») и применяется без правки сниппета:

Цвет текста на кнопке и в шапке мы считаем сами — светлый или почти-чёрный, смотря что читается поверх вашего.

Отдельно настраивается автоответ (проект → «Автоответ»): что написать посетителю в нерабочее время и что — если менеджеры молчат дольше заданного числа минут. Расписание и оба текста ваши.

Что дальше#

Обращения из виджета можно читать и продолжать со своего сервера: серверное API — выгрузка переписки и отправка сообщения посетителю, вебхуки — события диалогов в реальном времени.