Начать бесплатно
Разделы документации

Готовые фрагменты для типовых задач: показать чат с задержкой, скрыть на странице, привязать отдел, GTM.

Рецепты

Готовые решения частых задач. Везде, где написано «в коде установки», фрагмент заменяет строку w.SvyazioConfig = {…} внутри кода из раздела «Установка».

Открыть чат через 30 секунд на странице тарифов

JavaScript
// Страница тарифов: открыть чат через 30 секунд, один раз за визит
if (location.pathname.startsWith('/pricing') && !sessionStorage.getItem('chatOffered')) {
  setTimeout(function () {
    sessionStorage.setItem('chatOffered', '1');
    Svyazio('openChat');
  }, 30000);
}

Показать кнопку, когда посетитель долистал до середины

JavaScript
// В коде установки: startHidden: true
function revealChat() {
  var scrolled = window.scrollY + window.innerHeight;
  if (scrolled >= document.documentElement.scrollHeight / 2) {
    Svyazio('show');
    window.removeEventListener('scroll', revealChat);
  }
}
window.addEventListener('scroll', revealChat, { passive: true });

Скрыть чат на странице оплаты

JavaScript
var HIDDEN_ON = ['/checkout', '/payment'];

function syncChatVisibility() {
  var hidden = HIDDEN_ON.some(function (path) {
    return location.pathname.startsWith(path);
  });
  Svyazio(hidden ? 'hide' : 'show');
}

syncChatVisibility();
// в SPA — ещё и при каждой смене маршрута, например router.afterEach(syncChatVisibility)

Разные отделы для разных разделов сайта

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

JavaScript
// В коде установки: отдел по разделу сайта
var DEPARTMENTS = {
  '/b2b':     'ID_ОТДЕЛА_ОПТОВЫХ_ПРОДАЖ',
  '/support': 'ID_ОТДЕЛА_ПОДДЕРЖКИ'
};
var section = Object.keys(DEPARTMENTS).find(function (prefix) {
  return location.pathname.startsWith(prefix);
});

w.SvyazioConfig = {
  orgId: "ВАШ_ORG_ID",
  serverUrl: "https://app.svyazio.ru",
  groupId: section ? DEPARTMENTS[section] : undefined
};

Сменить отдел на уже открытой странице — перезапуском с новой конфигурацией:

JavaScript
// Посетитель выбрал «Вопрос по оплате» — сменить отдел без перезагрузки
function switchDepartment(departmentId) {
  window.SvyazioConfig = {
    orgId: "ВАШ_ORG_ID",
    serverUrl: "https://app.svyazio.ru",
    groupId: departmentId
  };
  Svyazio('restart');
}

Новый отдел получат следующие обращения. Диалог, который уже идёт, останется в прежнем отделе.

Кнопка «Спросить о товаре» с контекстом

Оператор увидит в карточке посетителя, о каком товаре вопрос.

HTML
<button type="button" class="ask" data-product="Кресло «Орион»" data-sku="OR-2041">
  Спросить о товаре
</button>

<script>
  document.addEventListener('click', function (event) {
    var button = event.target.closest('.ask');
    if (!button) return;
    Svyazio('updateIntegrationData', {
      product: button.dataset.product,
      sku: button.dataset.sku,
      productUrl: location.href
    });
    Svyazio('openChat', true);
  });
</script>

Выход из аккаунта

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

JavaScript
// Вызовите при выходе — до перехода на страницу входа
function forgetSvyazioVisitor() {
  var orgId = "ВАШ_ORG_ID";
  [
    'svyazio_visitor_id_' + orgId,
    'svyazio_conv_id_' + orgId,
    'svyazio_visitor_token_' + orgId,
    'svyazio_visitor_id',      // ключи старых версий виджета
    'svyazio_conv_id'
  ].forEach(function (key) {
    try { localStorage.removeItem(key); } catch (e) {}
  });
}

function logout() {
  forgetSvyazioVisitor();
  location.href = '/login';   // или location.reload() в одностраничном приложении
}

Виджет не ставит cookie, но хранит в браузере анонимный ID посетителя и передаёт на сервер адрес страницы и UTM-метки (подробнее — что хранит виджет). Если ваша политика требует согласия заранее, загружайте код по кнопке баннера:

HTML
<script>
  // Вызовите, когда посетитель согласился на обработку персональных данных
  function loadSvyazio() {
    if (window.SvyazioWidget) {         // уже загружался — вернуть после kill
      Svyazio('restart');
      return;
    }
    (function(d, w, c) {
      w.SvyazioConfig = { orgId: "ВАШ_ORG_ID", serverUrl: "https://app.svyazio.ru" };
      w[c] = w[c] || function() { (w[c].q = w[c].q || []).push(arguments); };
      var s = d.createElement('script');
      s.async = true;
      s.src = 'https://app.svyazio.ru/widget/svyazio.js';
      if (d.head) d.head.appendChild(s);
    })(document, window, 'Svyazio');
  }

  // Согласие отозвано — убрать виджет со страницы
  function unloadSvyazio() {
    if (window.Svyazio) Svyazio('kill');
  }
</script>

Цвет виджета из фирменных цветов сайта

JavaScript
// Цвет берётся из CSS-переменной сайта. Нужен HEX из шести цифр: #0F8770
var brand = getComputedStyle(document.documentElement)
  .getPropertyValue('--brand-color').trim();

if (/^#[0-9a-f]{6}$/i.test(brand)) {
  Svyazio('setColors', { buttonBg: brand });
}

Кнопка слева на телефоне и справа на компьютере

JavaScript
// В коде установки: на телефоне кнопка слева, чтобы не закрывать корзину
var isNarrow = window.matchMedia('(max-width: 600px)').matches;

w.SvyazioConfig = {
  orgId: "ВАШ_ORG_ID",
  serverUrl: "https://app.svyazio.ru",
  buttonPosition: isNarrow ? 'bl' : 'br'
};

Установка через Google Tag Manager

  1. Создайте тег типа «Пользовательский HTML».
  2. Вставьте в него код установки целиком, вместе с тегами <script>.
  3. Триггер — «All Pages» (все страницы). Сохраните и опубликуйте контейнер.

Вызовы Svyazio(…) из других тегов работают, если эти теги срабатывают после тега виджета — задайте порядок в настройке «Упорядочивание тегов».

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