JS API виджета

HTMLcopy<script>
  // Конфигурация — задаётся до загрузки скрипта
  window.SvyazioConfig = {
    orgId: "ВАШ_ORG_ID"
  };
  window.Svyazio = window.Svyazio || function() {
    (window.Svyazio.q = window.Svyazio.q || []).push(arguments);
  };
</script>
<script async src="https://app.svyazio.ru/widget/svyazio.js"></script>

Объект window.SvyazioConfig (или алиас window.SvyazioSetup) должен быть задан до загрузки скрипта. Параметры переопределяют настройки из панели администратора.

Внешний вид

Параметр	Тип	По умолч.	Описание
buttonStyle	'round' | 'tab'	'round'	Стиль кнопки чата.
buttonPosition	string	'br'	Позиция кнопки: bl, bc, br, lt, lm, lb, rt, rm, rb.
buttonSize	number	60	Размер круглой кнопки (px).
chatWidth	number	400	Ширина окна чата (мин. 280px).
chatHeight	number	600	Высота окна чата (мин. 300px).
zIndex	number	999999	z-index виджета.
accentColor	string	из настроек	Цвет акцента, например '#6C63FF'.
colors	object	—	Цветовая схема (см. setColors).

Поведение

Параметр	Тип	По умолч.	Описание
startHidden	boolean	false	Скрыть виджет при загрузке. Показать через Svyazio('show').
disabledOnMobile	boolean	false	Не показывать на мобильных.
mobileOnly	boolean	false	Показывать только на мобильных.
disableChatOpenHash	boolean	false	Отключить управление URL-хэшем #svyazioChatExpanded.
deferredLoading	boolean	false	Загружать виджет после полной загрузки страницы.
customWidgetButton	string	—	CSS-селектор кастомной кнопки. Стандартная кнопка скрывается.

Текст виджета

Параметр	Тип	Описание
headerText	string	Заголовок окна чата.
welcomeText	string	Приветственный текст при первом открытии.
onlineTitle	string	Подзаголовок, когда агенты онлайн.
offlineTitle	string	Подзаголовок, когда агенты офлайн.
offlineText	string	Текст, когда никого нет в сети.

Язык и локаль

Параметр	Тип	Описание
locale	string | object	Код языка ('ru', 'en', 'es', 'pt') или объект с оверрайдами строк интерфейса.
language	string	Алиас для locale.

Данные посетителя

Параметр	Тип	Описание
clientId	string	Уникальный ID пользователя из вашей системы — объединяет историю между устройствами и сессиями.
groupId	string	ID отдела для маршрутизации обращений (Настройки → Отделы).

Коллбэки

Параметр	Тип	Описание
onNewMessage	function(msg)	При каждом новом сообщении. msg: { id, text, createdAt, type }
onAnalyticEvent	function(eventName)	При аналитических событиях виджета.

Пример расширенной конфигурации:

JScopywindow.SvyazioConfig = {
  orgId: "ВАШ_ORG_ID",
  buttonPosition: "br",
  chatWidth: 380,
  startHidden: true,
  language: "ru",
  groupId: "abc123",
  clientId: "user_42",
  headerText: "Служба поддержки",
  colors: { buttonBg: "#6C63FF", buttonText: "#fff" },
  onNewMessage: function(msg) {
    console.log("Новое:", msg.text, "от", msg.type);
  }
};

Альтернатива методу setIntegrationData — передайте данные о пользователе до загрузки виджета.

HTMLcopy<script>
  window.SvyazioIntegration = {
    name: "Иван Иванов",
    email: "ivan@example.com",
    phone: "+7 999 123 45 67",
    plan: "pro",    // произвольные поля
    userId: "12345"
  };
</script>
<script async src="https://app.svyazio.ru/widget/svyazio.js"></script>

Добавьте хэш #svyazioChatExpanded к любой ссылке — при клике автоматически откроется чат:

HTMLcopy<a href="#svyazioChatExpanded">Написать нам</a>

<button onclick="location.hash='#svyazioChatExpanded'">Задать вопрос</button>

JScopySvyazio('openChat');
Svyazio('openChat', true); // с фокусом

JScopySvyazio('expandWidget', true);

JScopySvyazio('minimizeWidget');
Svyazio('closeChat'); // алиас

JScopySvyazio('hide');

JScopySvyazio('show');

JScopySvyazio('setIntegrationData', {
  name: "Иван Иванов",
  email: "ivan@example.com",
  phone: "+7 999 123 45 67",
  plan: "pro",
  userId: "12345"
});

JScopySvyazio('updateIntegrationData', { email: "new@example.com" });
Svyazio('updateIntegrationData', { phone: null }); // удалить

JScopySvyazio('setButtonPosition', 'bl');  // снизу слева
Svyazio('resetButtonPosition');        // вернуть из конфига

JScopySvyazio('setButtonSize', 72);

JScopySvyazio('setChatWidth', 350);

JScopySvyazio('setChatHeight', 500);

JScopySvyazio('setZIndex', 99999);

JScopySvyazio('setColors', {
  buttonBg: '#6C63FF',
  buttonText: '#fff',
  clientBubbleBg: '#7C74FF'
});

JScopySvyazio('resetColors');

JScopySvyazio('setLanguage', 'en');
Svyazio('setLanguage', 'es');

JScopySvyazio('setLocale', 'ru');

// Переопределить строки
Svyazio('setLocale', {
  chat: { input: { placeholder: "Напишите сообщение..." } }
});

JScopySvyazio('sendAutoMessage', 'Привет! Чем могу помочь? 👋');

// Через 30 секунд после загрузки
setTimeout(function() {
  Svyazio('sendAutoMessage', 'Нужна помощь? Мы онлайн!');
}, 30000);

JScopy// React Router
useEffect(() => { Svyazio('pageView'); }, [location.pathname]);

// Vue Router
router.afterEach(() => { Svyazio('pageView'); });

JScopySvyazio('setGroupId', 'abc123ef');
Svyazio('setGroupId', null); // сброс

JScopywindow.SvyazioConfig.clientId = 'new_user_id';
Svyazio('restart');

JScopySvyazio('kill');

onNewMessage

JScopywindow.SvyazioConfig = {
  orgId: "ВАШ_ORG_ID",
  onNewMessage: function(msg) {
    // msg.id, msg.text, msg.createdAt (ms), msg.type: "agent"|"client"|"bot"
    console.log(msg);
  }
};

// Пример: счётчик непрочитанных в title
let unread = 0;
window.SvyazioConfig.onNewMessage = function(msg) {
  if (msg.type === 'agent' || msg.type === 'bot') {
    document.title = '(' + (++unread) + ') ' + document.title;
  }
};

onAnalyticEvent

JScopywindow.SvyazioConfig = {
  orgId: "ВАШ_ORG_ID",
  onAnalyticEvent: function(eventName) {
    // Google Analytics 4
    gtag('event', eventName, { event_category: 'Live Chat' });

    // Яндекс.Метрика
    if (window.ym) {
      ym(XXXXXX, 'reachGoal', 'CHAT_' + eventName.toUpperCase());
    }
  }
};

Показать чат через N секунд

JScopysetTimeout(function() {
  Svyazio('show');
  Svyazio('openChat');
}, 15000);

Передать данные после авторизации

JScopyfunction onUserLogin(user) {
  Svyazio('setIntegrationData', {
    name: user.name,
    email: user.email,
    plan: user.plan,
    clientId: 'user_' + user.id
  });
}

VIP-клиентов — в приоритетный отдел

JScopyif (currentUser.plan === 'enterprise') {
  Svyazio('setGroupId', 'vip_dept_id');
}

Скрыть на определённых страницах

JScopyif (window.location.pathname === '/checkout') {
  Svyazio('hide');
} else {
  Svyazio('show');
}

Кастомная кнопка

HTMLcopy<button id="my-chat-btn">Написать в поддержку</button>

<script>
  window.SvyazioConfig = {
    orgId: "ВАШ_ORG_ID",
    customWidgetButton: "#my-chat-btn"
  };
</script>

clientId — история между устройствами

JScopywindow.SvyazioConfig = {
  orgId: "ВАШ_ORG_ID",
  clientId: "user_" + currentUser.id
};

Большинство методов Chatra JS API поддерживаются в Связио. Для переноса кода достаточно переименовать объекты и вызовы:

1. Замените ChatraSetup → SvyazioSetup
2. Замените ChatraIntegration → SvyazioIntegration
3. Замените все вызовы Chatra('метод') → Svyazio('метод')

Метод	Аргументы	Описание
openChat	focus?	Открыть чат
expandWidget	focus?	Открыть (только десктоп)
minimizeWidget	—	Свернуть чат
closeChat	—	Алиас minimizeWidget
hide	—	Скрыть виджет
show	—	Показать виджет
setIntegrationData	data	Установить данные (перезапись)
updateIntegrationData	data	Обновить данные (merge)
setButtonPosition	code	Переместить кнопку
resetButtonPosition	—	Вернуть позицию из конфига
setButtonSize	size	Размер кнопки (px)
setChatWidth	width	Ширина окна (px)
setChatHeight	height	Высота окна (px)
setZIndex	value	z-index виджета
setColors	colors	Изменить цвета
resetColors	—	Сбросить цвета
setLanguage	code	Переключить язык
setLocale	code | object	Язык или оверрайд строк
sendAutoMessage	text	Автосообщение от агента
pageView	—	Трекинг страницы (SPA)
setGroupId	id | null	Направить в отдел
restart	—	Перезапустить виджет
kill	—	Уничтожить виджет