JS API окна на сайте

Код вставки добавляет на страницу функцию Gratio(…). Через неё сайт открывает окно, подставляет текст, передаёт контакт и данные посетителя и слушает события окна. Вызовы до загрузки окна встают в очередь — вызывать можно сразу.

Окно и кнопка

Gratio("open");    // открыть окно
Gratio("close");   // закрыть
Gratio("toggle");  // открыть или закрыть
Gratio("show");    // показать кнопку
Gratio("hide");    // спрятать кнопку

Без JavaScript чат открывает любой элемент с атрибутом data-gratio-open; data-gratio-text — текст, который появится в поле ввода:

<button data-gratio-open data-gratio-text="Хочу записаться на пробное">Записаться</button>

Кнопку чата можно убрать совсем — настройка siteLauncher: "hidden" — и открывать окно только со страницы.

Данные посетителя

// текст в поле ввода; отправляет посетитель сам
Gratio("prefill", "Хочу записаться на пробное");

// контакт со слов сайта: подставится в формы, Gratio его не проверяет
Gratio("setContact", { name: "Мария", phone: "+79991234567", email: "maria@client.ru" });

// до 20 полей: придут в siteMessageData.attributes каждой реплики
Gratio("setAttributes", { plan: "pro", clientId: "48213" });

attributes приходят в уведомлениях Реплика с сайта и в getVisitor. Это данные со слов сайта: не храните в них секреты и не принимайте решений без проверки.

Страницы и согласие на cookie

Gratio("page");                       // SPA: страница сменилась — pushState окно замечает и само
Gratio("consent", { storage: false }); // до согласия на cookie сайта: окно работает в памяти, без хранилища
Gratio("reset");                      // завершить чат и очистить его на этом устройстве

После reset у посетителя будет новый chatId.

События

Gratio("on", "conversationStarted", (e) => console.log("начал разговор", e.ts));
Gratio("on", "unread", (e) => console.log("непрочитанных:", e.count));
Gratio("on", "messenger", (e) => console.log("ушёл в мессенджер:", e.channel));

ts — время в миллисекундах. В событиях нет текстов и полей форм — только вид события, время и счётчики.

Цели аналитики

Окно само отправляет цели в Яндекс Метрику — номер счётчика в настройке siteMetrika — и в dataLayer при siteDataLayer: "yes": gratio_chat_open, gratio_chat_started, gratio_handoff, gratio_contact, gratio_messenger. Персональных данных в целях нет. Подробно — Настройки окна.

Как окно ведёт себя на странице

• Кнопка живёт в Shadow DOM: стили сайта её не ломают, а её стили не трогают сайт.
• Окно открывается во фрейме с адреса chat.gratio.net и грузится, когда посетитель наводит на кнопку или касается её. Вернувшийся посетитель с живым диалогом получает окно заранее, в простое.
• На телефоне кнопка прячется при прокрутке вниз и на путях из siteHidePaths.
• Пока вкладка скрыта, в её заголовке — число непрочитанных: (2).

Что дальше

• Настройки окна — вид кнопки, тексты, часы работы.
• Реплика с сайта — где в уведомлении данные от сайта.
• Чат на сайте — код вставки и домены.