Перейти к содержанию

Как открыть страницу сайта сразу с развёрнутым чатом

Иногда требуется, чтобы посетитель, попав на определённую страницу сайта, сразу видел развёрнутое окно чата — без клика по кнопке виджета. Типичные ситуации: страница «Поддержка», посадочная страница рекламной кампании, ссылка из письма или QR-кода, ведущая сразу в диалог с оператором.

Настройками сервиса Webim это не делается: в панели управления нет опции «открывать чат автоматически». Задача решается небольшим JavaScript-кодом на стороне сайта, который после инициализации виджета вызывает метод webim.api.chat.start() из JavaScript API виджета.

В статье разобраны два сценария:

  • чат разворачивается у всех, кто открыл определённую страницу;

  • чат разворачивается только при переходе по специальной ссылке — с дополнительным параметром в query string.

Внимание!

Код из этой статьи добавляется на страницу отдельным блоком <script> рядом со стандартным кодом кнопки. Сам код кнопки, полученный в панели управления, изменять нельзя: любые изменения в нём, кроме указанных в документации Webim или сделанных сотрудниками компании-разработчика, являются нарушением правил использования продукта.

Перед началом

  1. Виджет должен быть установлен на страницу по инструкции из этой статьи.

  2. Учтите, что в стандартной схеме виджет раскрывается в миниатюрном окне в углу страницы. Если в настройках размещения включена опция Открывать чат в отдельном окне (или для мобильных устройств задан параметр open_chat_in_new_tab_for_mobile), браузер может расценить автоматический вызов как всплывающее окно и заблокировать его, поскольку открытие не связано с действием пользователя. Для страниц с автоматическим открытием используйте стандартный миниатюрный режим. Подробнее — в статье Логика открытия виджета.

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

Когда можно вызывать метод

Объект webim.api появляется на странице не мгновенно: код кнопки подгружает скрипт button.js асинхронно. Поэтому вызов webim.api.chat.start() по событию DOMContentLoaded или сразу после вставки кода кнопки может сработать раньше, чем виджет будет готов, и ничего не произойдёт.

Надёжная точка входа — обработчик onInit: виджет вызывает его после своей инициализации. Обработчики объявляются в глобальном объекте webimHandlers, и объявить его нужно до кода кнопки, иначе виджет его не увидит.

Автоматическое открытие чата на странице

Разместите перед кодом кнопки следующий блок:

<script type="text/javascript">
    window.webimHandlers = {
        onInit: function (event) {
            webim.api.chat.start();
        }
    };
</script>
<!-- ниже — стандартный код кнопки Webim -->

Объект event содержит поле status со статусом операторов (online, busy_online, offline, busy_offline). Если чат нужно разворачивать только при доступных операторах, добавьте проверку:

onInit: function (event) {
    if (event.status === 'online' || event.status === 'busy_online') {
        webim.api.chat.start();
    }
}

N.B.

Если на сайте уже используются другие обработчики (например, onTeleport или onChatReadChanged), не перезаписывайте объект webimHandlers целиком — добавьте onInit в существующий объект.

Открытие чата по ссылке с параметром

Готовой ссылки, которая открывала бы обычную страницу сайта с уже развёрнутым виджетом, в сервисе Webim нет. Есть только адрес вида https://<account_name>.webim.ru/visitor/chat — это отдельная полноэкранная страница чата на домене аккаунта, без содержимого вашего сайта.

Чтобы открывать именно свою страницу с развёрнутым чатом, добавьте в её адрес собственный параметр и научите страницу его читать. Имя и значение параметра выбираете вы сами — главное, чтобы они не конфликтовали с уже используемыми на сайте. В примере ниже используется webim_chat=open:

<script type="text/javascript">
    window.webimHandlers = {
        onInit: function (event) {
            var params = new URLSearchParams(window.location.search);
            if (params.get('webim_chat') === 'open') {
                webim.api.chat.start();
            }
        }
    };
</script>
<!-- ниже — стандартный код кнопки Webim -->

После этого обычный адрес страницы работает как раньше, а ссылка с параметром открывает её сразу с развёрнутым чатом:

https://example.local/support?webim_chat=open

Такую ссылку удобно размещать в письмах, рассылках, QR-кодах и рекламных объявлениях.

Как убрать параметр из адресной строки

Если параметр не должен оставаться в адресе (чтобы посетитель не сохранил такую ссылку в закладки и чтобы перезагрузка страницы не открывала чат заново), удалите его после вызова метода:

onInit: function (event) {
    var url = new URL(window.location.href);
    if (url.searchParams.get('webim_chat') !== 'open') {
        return;
    }
    webim.api.chat.start();

    url.searchParams.delete('webim_chat');
    history.replaceState(null, '', url.toString());
    webim.api.onUrlChange();
}

Вызов webim.api.onUrlChange() нужен, чтобы виджет узнал об изменении адреса страницы: иначе в сервисе сохранится адрес с параметром. Метод не принимает аргументов и сам считывает текущий адрес, поэтому вызывайте его после history.replaceState().

Как не открывать чат повторно

Чат будет разворачиваться при каждой загрузке страницы. Чтобы ограничить это одним разом за сессию браузера, запоминайте факт открытия в sessionStorage:

onInit: function (event) {
    if (sessionStorage.getItem('webim_chat_opened')) {
        return;
    }
    sessionStorage.setItem('webim_chat_opened', '1');
    webim.api.chat.start();
}

Другой вариант — не разворачивать виджет, если у посетителя уже есть незавершённый диалог. Для этого используйте метод webim.api.chat.isActive():

onInit: function (event) {
    if (!webim.api.chat.isActive()) {
        webim.api.chat.start();
    }
}

Сайты с клиентской маршрутизацией (SPA)

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

  1. Вызывайте webim.api.onUrlChange() после каждой смены маршрута — это нужно для корректной работы автоприглашений и маршрутизации.

  2. Решение о вызове webim.api.chat.start() принимайте в своём коде маршрутизации, проверяя новый адрес так же, как в примерах выше.

Виджет в iframe

В схеме с iframe автоматическое открытие не рекомендуется: метод webim.api.chat.start() показывает контейнер с iframe и должен быть привязан к действию пользователя, а видимость контейнера синхронизируется через обработчик onChatShownStateChanged.

Если автоматическое открытие в этой схеме всё же необходимо, вызывайте webim.api.chat.start() после webim.api.init() и убедитесь, что обработчик onChatShownStateChanged корректно показывает контейнер.