Разделы документации

Открыть чат по клику на любой элемент, из ссылки или из нескольких мест на странице.

Своя кнопка и открытие по ссылке

Любая ссылка с хешем #svyazioChatExpanded открывает чат и ставит курсор в поле ввода. Работает и внутри страницы, и при переходе с другой страницы или из письма: чат откроется сразу после загрузки.

HTML
<a href="#svyazioChatExpanded">Написать в поддержку</a>

<!-- ссылка с другой страницы или из письма -->
<a href="https://example.ru/contacts#svyazioChatExpanded">Задать вопрос</a>
  • Когда посетитель закрывает чат, хеш убирается из адреса — ссылку можно нажать снова.
  • На телефоне при открытии чата хеш добавляется в адрес, поэтому системная кнопка «Назад» закрывает чат, а не уводит со страницы.
  • disableChatOpenHash: true выключает оба поведения. Страница, открытая сразу с этим хешем в адресе, всё равно откроет чат.

Своя кнопка: customWidgetButton

Укажите CSS-селектор своей кнопки — виджет спрячет стандартную кнопку, а клик по вашей откроет чат.

HTML
<button id="support-button" type="button">Чат с поддержкой</button>

<script>
  (function(d, w, c) {
    w.SvyazioConfig = {
      orgId: "ВАШ_ORG_ID",
      serverUrl: "https://app.svyazio.ru",
      customWidgetButton: "#support-button"
    };
    // … дальше код установки без изменений
  })(document, window, 'Svyazio');
</script>
  • Кнопка должна быть на странице к моменту запуска виджета. Если селектору подходят несколько элементов, сработает только первый.
  • Со своей кнопкой не показывается всплывающее приветствие — его некуда привязать.
  • Не сочетайте с startHidden и show — они вернут стандартную кнопку.

Несколько кнопок и кнопки, которые появляются позже

Если кнопок несколько или они рисуются позже (модальные окна, одностраничные приложения), повесьте один обработчик на документ. Стандартная кнопка виджета при этом остаётся на месте. Чтобы убрать и её, укажите в customWidgetButton одну из своих кнопок, которая есть на странице сразу, — остальные обслужит обработчик.

HTML
<button type="button" data-open-chat>Задать вопрос</button>
<a href="/help" data-open-chat>Помощь</a>

<script>
  // Один обработчик на всю страницу: работает и для кнопок,
  // которые появятся позже (модальные окна, SPA)
  document.addEventListener('click', function (event) {
    var trigger = event.target.closest('[data-open-chat]');
    if (!trigger) return;
    event.preventDefault();
    Svyazio('openChat', true);
  });
</script>

Обновлено 22 сентября 2026