Открытие чата через свою ссылку или кнопку

Вместо облачка чата в углу посетители могут открыть чат ссылкой или кнопкой на сайте, например «Помощь и поддержка» в боковой панели или «Вопрос о тарифе» на странице цен. Окно чата открывается прямо рядом с этим элементом.

Дополнительный код не нужен: достаточно обычного кода из Встраивания виджета. Пример для копирования также есть в аккаунте в Проект → Встраивание → Открыть чат своей ссылкой.

Самый простой случай

Ссылка на #rc-open:

<a href="#rc-open">Help & support</a>

Или кнопка с атрибутом data-rc-open:

<button type="button" data-rc-open>Open chat</button>

data-rc-open работает на любом элементе, не только кнопках. Помимо #rc-open, виджет принимает и #reactive-chat как цель ссылки.

Нажатие учитывается, даже если виджет ещё не загрузился: окно откроется, как только будет готово.

Где появляется окно

• Справа от элемента, если достаточно места, иначе слева. Верх окна выравнивается по элементу.
• Всегда полностью видно: окно остаётся в видимой области и следует за элементом при прокрутке страницы или изменении размера браузера.
• На узких экранах (менее 480 пикселей, то есть большинство смартфонов) чат, как обычно, открывается на весь экран. Рядом с элементом места нет.
• Как боковая панель: если во Внешнем виде окно задано боковой панелью на всю высоту, оно открывается там, а не рядом с элементом.
• Если чат уже открыт, окно перемещается к последней нажатой ссылке.
• При закрытии чата (в том числе клавишей Escape) фокус клавиатуры возвращается на открывшую его ссылку или кнопку.

Чтобы открыть окно в обычном углу, задайте data-rc-open="corner". data-rc-anchor="none" делает то же:

<button type="button" data-rc-open="corner">Open chat</button>

Предварительное заполнение поля сообщения

С data-rc-message фраза уже находится в поле при открытии чата. Она не отправляется: посетитель может дополнить, изменить или удалить её и отправляет сам.

<button type="button" data-rc-open data-rc-message="I have a question about my plan">
  Question about my plan
</button>

Используется до 200 символов. Для этого чат переключается на вкладку разговора.

Выбор вкладки

Если в чате несколько вкладок, data-rc-tab определяет активную при открытии:

• msg — разговор;
• home — главный экран;
• help — справочные статьи.

<a href="#rc-open" data-rc-tab="help">Browse help articles</a>

Если указанной вкладки нет (например, help без справочных статей), чат просто открывается как обычно.

Открытие из собственного JavaScript

Те же параметры доступны в вызове. anchor — элемент, рядом с которым появляется окно; message и tab необязательны:

document.querySelector('#my-button').addEventListener('click', function (ev) {
  ReactiveChat('open', {
    anchor: ev.currentTarget,
    message: 'I have a question about my plan',
    tab: 'msg'
  });
});

Без anchor окно открывается в обычном положении. ReactiveChat('open') без параметров работает как прежде. Если сам элемент содержит data-rc-message или data-rc-tab, они действуют и для вызова; явно переданные значения имеют приоритет.

Если код может выполниться до загрузки кода встраивания, добавьте перед ним эту строку. Вызовы попадут в очередь и выполнятся, когда виджет будет готов:

window.ReactiveChat = window.ReactiveChat || function () { (window.ReactiveChat.q = window.ReactiveChat.q || []).push(arguments); };

Вообще без кнопки чата

Если чат должен быть доступен только через ваши ссылки, например «Помощь и поддержка» в боковой панели, есть два способа.

В аккаунте: в Проект → Внешний вид → Оформление задайте Показ как Только через собственные ссылки (без значка чата) и сохраните. Настройка действует без изменений сайта. Но затем всё же снова скопируйте код из Проект → Установка: новый больше не содержит фирменного цвета, поэтому значок не мелькнёт при загрузке страницы. Пока виджет не получил настройку с сервера, например без подключения или при первом визите до принятия cookie, значок всё же появляется как запасной вариант, чтобы чат оставался доступным.

В коде встраивания: если значок не должен появляться никогда, скройте его через data-rc-hide-launcher="true" в коде. Атрибут действует всегда, независимо от аккаунта:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-hide-launcher="true"
        async></script>

Убедитесь, что на каждой странице, где посетителям нужен доступ к чату, есть хотя бы одна такая ссылка.

Устранение неполадок

• Нажатие лишь добавляет #rc-open в адрес: виджет не встроен на этой странице или не загрузился (например, без согласия). Проверьте наличие кода встраивания.
• Окно открывается в углу, а не рядом со ссылкой: есть ли на элементе data-rc-open="corner" или data-rc-anchor="none"? Уже ли окно браузера 480 пикселей? Задано ли окно чата боковой панелью?
• Текст не появляется в поле: атрибут называется data-rc-message и должен быть на самом нажатом элементе.

Другие настройки кода описаны в Встраивании виджета. Показ карточки собственного предложения в чате объясняется в Промокарточке в чате.

Подробнее в документации

Подробное описание: Справочник по тегу скрипта и JavaScript API. Все главы собраны в документации.