Виджет на сайте: подключение и установка

«Виджет на сайте» — наш собственный чат: кнопка в углу страницы, по клику открывается окно переписки с агентом. Не требует ничего заранее — подключается в один клик, дальше остаётся вставить код на сайт.

Подключение

1. В «Каналах» нажмите «Подключить» на карточке «Виджет на сайте».
2. Виджет создастся сразу и откроется его редактор на вкладке «Установка на сайт».
3. Скопируйте код и вставьте его на сайт перед закрывающим тегом body — на всех страницах, где нужен чат. Если сайт на конструкторе (Tilda, WordPress и подобные), код вставляется в настройках сайта, в блок «код перед /body».

Как только посетители начнут заходить, на этой же вкладке появится блок «Загрузки на сайте»: сколько посетителей увидели виджет, когда последний раз и на каких страницах. Это самый простой способ убедиться, что код стоит правильно.

Редактор виджета

Клик по виджету в списке каналов открывает редактор с вкладками:

• Оформление — цвета, кнопка, оператор, тексты. Отдельная статья «Оформление виджета».
• Приглашение и Зацепки — как виджет сам заводит разговор. Статья «Автоприглашение и зацепки».
• Тестирование — публичная страница на нашем домене с вашим виджетом: удобно проверить или показать коллеге, не трогая сайт. Включается тумблером, ссылку можно копировать. Кнопка «Новый посетитель» на самой странице перезагружает её как первый заход нового человека — чтобы заново увидеть приглашение, зацепки и анимацию кнопки.
• А/Б-тест — сравнение двух оформлений на посетителях. Статья «А/Б-тест оформления виджета».
• Установка на сайт — код и статистика загрузок, а в блоке «Дополнительно» — «Своя кнопка вместо нашей» и «Цели в Яндекс Метрике».

Своя кнопка вместо нашей

Если на сайте уже есть своя кнопка или ссылка «Написать нам», чат можно открывать ею. На вкладке «Установка на сайт» раскройте блок «Своя кнопка вместо нашей» и скопируйте готовый код: в нём ваша кнопка по клику открывает окно чата.

Атрибут data-hide-launcher в коде виджета убирает нашу круглую кнопку в углу. Без него на странице работают обе кнопки. Посетитель закрывает окно крестиком в шапке.

Цели в Яндекс Метрике

Виджет может сам отправлять цели в Яндекс Метрику, которая стоит на вашем сайте, — так видно, с какой рекламы приходят те, кто пишет в чат и оставляет заявки. Код на сайте менять не нужно.

1. На вкладке «Установка на сайт» раскройте блок «Цели в Яндекс Метрике» и включите «Отправлять цели».
2. В «Номер счётчика» впишите номер из Метрики. Если оставить поле пустым, цели уйдут во все счётчики, которые найдутся на странице.
3. Отметьте нужные события. У каждого свой идентификатор цели, его можно поменять:
   • «Открыл чат» — посетитель открыл окно чата любым способом: кнопкой, приглашением, зацепкой или своей кнопкой сайта. Один раз за визит.
   • «Первое сообщение» — посетитель написал в чат.
   • «Агент принял заявку» — агент передал данные навыком, у которого включено «Отметить цель достигнутой». Если таких навыков нет, кабинет предупредит.
4. Нажмите «Сохранить».
5. В Метрике создайте цели: Цели → «Добавить цель», тип «JavaScript-событие», идентификатор — тот же, что в кабинете.

Каждая цель уходит один раз: открытие — за визит, первое сообщение и заявка — за диалог. Цель «Агент принял заявку» дойдёт, только пока посетитель на вашем сайте: Метрика считает события в браузере. Если вы сами отметили цель в «Диалогах», в Метрику она не отправляется.

Подробнее — в статье Цели в Яндекс Метрике.

Что видит агент

Страницу, с которой написал посетитель, и текст зацепки, по которой он открыл чат. Посетители анонимны — имя и телефон агент узнает только из разговора. Каждому посетителю кабинет даёт условное имя из двух слов (например «Тихий Агат»), чтобы отличать диалоги в списке до того, как человек представился.

Виджет корректно работает на телефонах: раскрывается на весь экран, не даёт странице «уезжать» под клавиатурой.