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

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

Настройками сервиса **Webim** это не делается: в панели управления нет опции «открывать чат автоматически». Задача решается небольшим JavaScript-кодом на стороне сайта, который после инициализации виджета вызывает метод [`webim.api.chat.start()`](https://webim.ru/kb/dev/api/webim-js-api.html#chat-start) из [JavaScript API виджета](https://webim.ru/kb/dev/api/webim-js-api.html).

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

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

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

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

## Перед началом { #prerequisites }

  1. Виджет должен быть установлен на страницу по инструкции из [этой статьи](https://webim.ru/kb/getting-started/install-button.html).

  1. Учтите, что в стандартной схеме виджет раскрывается в миниатюрном окне в углу страницы. Если в настройках размещения включена опция **Открывать чат в отдельном окне** (или для мобильных устройств задан параметр `open_chat_in_new_tab_for_mobile`), браузер может расценить автоматический вызов как всплывающее окно и заблокировать его, поскольку открытие не связано с действием пользователя. Для страниц с автоматическим открытием используйте стандартный миниатюрный режим. Подробнее — в статье [Логика открытия виджета](https://webim.ru/kb/dev/widget-open-logic.html).

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

## Когда можно вызывать метод { #when-to-call }

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

Надёжная точка входа — обработчик [`onInit`](https://webim.ru/kb/dev/api/webim-js-api.html#on-init): виджет вызывает его после своей инициализации. Обработчики объявляются в глобальном объекте `webimHandlers`, и объявить его нужно **до** кода кнопки, иначе виджет его не увидит.

## Автоматическое открытие чата на странице { #open-on-page-load }

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

```
<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();
    }
}
```

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

## Открытие чата по ссылке с параметром { #open-by-url-parameter }

Готовой ссылки, которая открывала бы обычную страницу сайта с уже развёрнутым виджетом, в сервисе **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-кодах и рекламных объявлениях.

### Как убрать параметр из адресной строки { #remove-url-parameter }

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

```
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()`](https://webim.ru/kb/dev/api/webim-js-api.html#webim-api-on-url-change) нужен, чтобы виджет узнал об изменении адреса страницы: иначе в сервисе сохранится адрес с параметром. Метод не принимает аргументов и сам считывает текущий адрес, поэтому вызывайте его **после** `history.replaceState()`.

## Как не открывать чат повторно { #avoid-reopening }

Чат будет разворачиваться при каждой загрузке страницы. Чтобы ограничить это одним разом за сессию браузера, запоминайте факт открытия в `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()`](https://webim.ru/kb/dev/api/webim-js-api.html#chat-is-active):

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

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

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

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

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

## Виджет в iframe { #iframe-scheme }

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

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

---

Источник: https://webim.ru/kb/dev/open-chat-on-page-load.html