Документация Связио

Полное руководство по установке, настройке и использованию виджета онлайн-чата на вашем сайте.

⚡ Быстрый старт

Добавьте виджет на сайт за 30 секунд. Вставьте код перед закрывающим тегом </body>:

HTML<script>
    // Связио: установка виджета
    (function(d, w, c) {
        w.SvyazioConfig = { orgId: "ВАШ_ORG_ID" };
        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');
</script>
            

💡 Где взять orgId?

Войдите в панель управления → Настройки → Виджет. Ваш orgId отображается в блоке «Код для установки».

Это всё! Виджет автоматически определит адрес сервера из URL скрипта. Светлая тема включена по умолчанию.

📦 Установка на разные платформы

HTML-сайт

Вставьте код перед </body> — виджет появится автоматически. Скрипт загружается асинхронно и не влияет на скорость загрузки страницы.

WordPress

Используйте плагин «Insert Headers and Footers» или добавьте код в footer.php вашей темы.

React / Next.js

JSXimport Script from 'next/script';

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script strategy="lazyOnload" id="svyazio-config">
        {`window.SvyazioConfig = { orgId: "ВАШ_ORG_ID" };`}
      </Script>
      <Script
        src="https://app.svyazio.ru/widget/svyazio.js"
        strategy="lazyOnload"
      />
    </>
  );
}

Vue / Nuxt

HTML<!-- В nuxt.config.ts → app.head.script -->
{
  innerHTML: `window.SvyazioConfig = { orgId: "ВАШ_ORG_ID" };`,
  tagPosition: 'bodyClose'
},
{
  src: 'https://app.svyazio.ru/widget/svyazio.js',
  async: true,
  tagPosition: 'bodyClose'
}

⚙️ Все параметры SvyazioConfig

Объект window.SvyazioConfig поддерживает следующие параметры. Только orgId обязателен — остальные опциональны.

Параметр	Тип	По умолчанию	Описание
`orgId`	string	обязательный	ID вашей организации из панели управления
`theme`	string	`'light'`	Тема оформления: `'light'` или `'dark'`
`position`	string	`'right'`	Позиция кнопки: `'right'` или `'bottom-left'`
`welcomeText`	string	Из настроек	Приветствие при открытии чата
`offlineText`	string	Из настроек	Текст, когда все операторы офлайн
`groupID`	string	—	ID группы для маршрутизации обращений
`accentColor`	string	`'#6C5CE7'`	Акцентный цвет виджета (HEX). Переопределяет цвет из панели управления

✅ Приоритет настроек

Параметры из SvyazioConfig имеют высший приоритет и переопределяют настройки из панели управления. Это удобно, когда нужно на разных страницах использовать разное оформление.

Полный пример с кастомизацией

HTML<script>
    window.SvyazioConfig = {
        orgId: "ваш-org-id",
        theme: "dark",                  // тёмная тема
        position: "bottom-left",         // кнопка слева
        accentColor: "#E53935",           // красный акцентный цвет
        welcomeText: "Привет! 👋",       // кастомное приветствие
        groupID: "ваш-group-id"          // маршрутизация в группу
    };
</script>
<script src="https://app.svyazio.ru/widget/svyazio.js" async></script>
            

🎨 Тема оформления

Виджет поддерживает две темы — светлую и тёмную. По умолчанию используется светлая тема.

Светлая тема (по умолчанию)

Белый фон окна чата, тёмный текст. Подходит для большинства сайтов. Включена автоматически — ничего настраивать не нужно.

Тёмная тема

Тёмный фон, светлый текст. Отлично смотрится на тёмных сайтах. Для включения укажите theme: "dark":

HTMLwindow.SvyazioConfig = {
    orgId: "ваш-org-id",
    theme: "dark"
};

💡 Совет

Тему также можно переключить через параметр в панели управления → Настройки → Виджет. Но параметр theme из JS-конфигурации имеет высший приоритет.

🎯 Цвет виджета

Акцентный цвет (кнопка, заголовок, кнопка отправки) настраивается в панели управления → Настройки → Виджет → Цвет.

Пример	HEX	Стиль
🟣 Фиолетовый	`#6C5CE7`	По умолчанию
🔵 Синий	`#2196F3`	Деловой
🟢 Зелёный	`#4CAF50`	Дружелюбный
🔴 Красный	`#E53935`	Энергичный
🟠 Оранжевый	`#FF9800`	Тёплый
⚫ Чёрный	`#212121`	Строгий

Установка цвета через JS-конфигурацию

Вместо настройки в панели управления, вы можете задать акцентный цвет прямо в скрипте на сайте через параметр accentColor. Это удобно, когда нужен разный цвет виджета на разных сайтах одной организации.

HTML<script>
    window.SvyazioConfig = {
        orgId: "ваш-org-id",
        accentColor: "#E53935"   // красный акцентный цвет
    };
</script>
<script src="https://app.svyazio.ru/widget/svyazio.js" async></script>
            

💡 Приоритет цвета

accentColor из JS-конфигурации имеет высший приоритет и переопределяет цвет из панели управления. Если accentColor не указан — используется цвет из настроек виджета в админке.

📍 Позиция виджета

Кнопка виджета может быть в правом или левом нижнем углу.

Значение	Положение
`'right'` (по умолчанию)	Правый нижний угол
`'bottom-left'`	Левый нижний угол

HTMLwindow.SvyazioConfig = {
    orgId: "ваш-org-id",
    position: "bottom-left"   // кнопка слева
};

Позицию также можно задать в панели управления → Настройки → Виджет → Позиция. Параметр из JS имеет приоритет.

💬 Тексты и приветствия

Тексты можно настроить двумя способами: в панели управления или через JS.

Параметр	По умолчанию	Описание
`welcomeText`	Из настроек или «Привет! Чем можем помочь? 👋»	Приветствие в заголовке и теле чата
`offlineText`	Из настроек или «Мы сейчас офлайн. Оставьте сообщение!»	Текст, когда все операторы офлайн

Пример: разные приветствия на разных страницах

HTML<!-- На главной странице -->
window.SvyazioConfig = {
    orgId: "ваш-org-id",
    welcomeText: "Привет! Нужна помощь с заказом? 🛒"
};

<!-- На странице поддержки -->
window.SvyazioConfig = {
    orgId: "ваш-org-id",
    welcomeText: "Техподдержка — чем можем помочь? 🔧"
};

🏢 Группы

Группы создаются в панели управления → Настройки → Группы. Каждая группа имеет уникальный groupID.

Указав groupID в конфигурации виджета на конкретной странице, вы направите обращения посетителей в конкретную группу операторов:

HTML<!-- Страница магазина → обращения идут в группу продаж -->
window.SvyazioConfig = {
    orgId: "ваш-org-id",
    groupID: "id-группы-продаж"
};

<!-- Страница FAQ → обращения идут в техподдержку -->
window.SvyazioConfig = {
    orgId: "ваш-org-id",
    groupID: "id-группы-поддержки"
};

💡 Разные страницы — разные группы

На разных страницах сайта можно указать разные groupID. Например, на странице «Магазин» — отдел продаж, в личном кабинете — техподдержку. groupID берётся из настроек группы после её создания в панели управления.

🖥 Настройки в панели управления

Помимо JS-конфигурации, виджет можно настроить через панель управления → Настройки → Виджет:

Цвет — акцентный цвет кнопки и элементов (HEX)
Позиция — правый или левый нижний угол
Приветствие — текст при открытии чата
Офлайн-сообщение — текст когда операторы не в сети
Заголовок — текст в шапке окна чата
Группы — создание групп с уникальными ID

✅ Правило приоритета

Настройки из SvyazioConfig (JS на странице) всегда побеждают настройки из панели управления. Панель управления задаёт значения «по умолчанию», а JS-параметры — переопределяют их для конкретных страниц.

👤 Роли пользователей

В системе предусмотрено две роли:

Роль	Возможности
`Админ`	Полный доступ: управление организацией, операторами, настройками виджета, группами, аналитика
`Оператор`	Приём и ведение чатов с посетителями, просмотр информации о посетителях

🛠 JavaScript API

Виджет предоставляет глобальную функцию Svyazio() для управления из кода вашего сайта. Синтаксис совместим с Chatra — достаточно заменить Chatra на Svyazio.

💡 Очередь команд

Если виджет ещё не загрузился, все вызовы Svyazio() автоматически ставятся в очередь и выполняются после инициализации. Добавьте этот фрагмент до загрузки виджета:

HTML<script>
    window.Svyazio = window.Svyazio || function() {
        (window.Svyazio.q = window.Svyazio.q || []).push(arguments);
    };
</script>
            

SvyazioIntegration

Передайте данные посетителя до загрузки виджета. Данные отправятся на сервер при инициализации.

HTML<script>
    // Передаём данные посетителя до загрузки виджета
    window.SvyazioIntegration = {
        name: "Иван Петров",
        email: "ivan@example.com",
        phone: "+7 999 123-45-67",
        notes: "VIP клиент",
        // Также можно добавить произвольные поля:
        "Номер заказа": "#12345",
        "Тариф": "Про"
    };

    // Загрузка виджета
    (function(d, w, c) {
        w.SvyazioConfig = { orgId: "ВАШ_ORG_ID" };
        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');
</script>
            

Поле	Тип	Описание
`name`	string	Имя посетителя
`email`	string	Email посетителя
`phone`	string	Телефон посетителя
`notes`	string	Заметки — отобразятся в карточке оператора
любые	string / number / boolean	Произвольные поля — добавляются автоматически в заметки

setIntegrationData

Полная перезапись данных посетителя. Все предыдущие данные удаляются, устанавливаются новые.

JSSvyazio('setIntegrationData', {
    name: 'Мария Иванова',
    email: 'maria@example.com',
    phone: '+7 900 000-00-00'
});
            

updateIntegrationData

Частичное обновление данных. Обновляет только указанные поля, остальные остаются без изменений. Передайте null чтобы удалить поле.

JS// Обновить email, удалить телефон
Svyazio('updateIntegrationData', {
    email: 'new@example.com',   // обновится
    phone: null                   // удалится
});
            

⚠️ Важно

Любой пользователь может изменить данные, отправляемые через JS API. Поэтому эти данные следует рассматривать как вспомогательную информацию, а не как способ однозначной идентификации.

Управление виджетом

Методы для управления видимостью и состоянием виджета из кода сайта.

Метод	Описание
`Svyazio('openChat')`	Открыть окно чата
`Svyazio('closeChat')`	Свернуть окно чата
`Svyazio('hide')`	Скрыть виджет полностью (кнопка + окно)
`Svyazio('show')`	Показать кнопку виджета

Пример: открыть чат по клику на кнопку

HTML<button onclick="Svyazio('openChat')">Написать в поддержку</button>
            

Пример: интеграция с формой регистрации

JS// При успешной авторизации на вашем сайте
function onUserLogin(user) {
    Svyazio('setIntegrationData', {
        name: user.name,
        email: user.email,
        phone: user.phone,
        'ID клиента': user.id,
        'Тариф': user.plan
    });
}
            

🔄 Переезд с Chatra

Если вы ранее использовали Chatra, переход на Связио максимально прост — JS API полностью совместим. Достаточно заменить несколько слов в коде:

Было (Chatra)	Стало (Связио)
`window.ChatraIntegration`	`window.SvyazioIntegration`
`Chatra('setIntegrationData', ...)`	`Svyazio('setIntegrationData', ...)`
`Chatra('updateIntegrationData', ...)`	`Svyazio('updateIntegrationData', ...)`
`Chatra('expandWidget')`	`Svyazio('openChat')`
`Chatra('hide')`	`Svyazio('hide')`
`Chatra('show')`	`Svyazio('show')`

Пошаговая миграция

Шаг 1. Замените объект интеграции и скрипт загрузки:

DIFF// 1. Данные посетителя
- window.ChatraIntegration = {
+ window.SvyazioIntegration = {
      name: user.name,
      email: user.email,
      phone: user.phone
  };

// 2. Скрипт виджета (такая же IIFE-обёртка)
- (function(d, w, c) { ... })(document, window, 'Chatra');
+ (function(d, w, c) {
+     w.SvyazioConfig = { orgId: "ваш-org-id" };
+     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');
            

Шаг 2. Замените вызовы методов (если используете):

DIFF- Chatra('updateIntegrationData', { email: 'new@mail.ru' });
+ Svyazio('updateIntegrationData', { email: 'new@mail.ru' });

- Chatra('expandWidget');
+ Svyazio('openChat');
            

✅ Всё остальное — без изменений

Структура данных (name, email, phone, notes, произвольные поля) — точно такая же. Методы setIntegrationData и updateIntegrationData работают идентично: полная перезапись и частичное обновление. Даже очередь команд (вызовы до загрузки) поддерживается.

🔌 REST API и Webhooks

🚧 В разработке

REST API и Webhooks находятся в активной разработке и появятся в ближайшее время. Они будут доступны на тарифе Ультра.

Планируется:

REST API — управление организацией, операторами, чатами, настройками
Webhooks — уведомления о новых сообщениях, подключении посетителей, закрытии чатов
Интеграции — готовые модули для CRM, Telegram, Email

🔒 Безопасность

SSL/TLS — все данные передаются через зашифрованное HTTPS-соединение
Изоляция данных — каждая организация видит только свои чаты и посетителей
Shadow DOM — виджет изолирован от вашего сайта и не влияет на его стили
JWT-авторизация — все запросы операторов защищены токенами
ФЗ-152 — данные хранятся на серверах в Российской Федерации
Автоактивация — виджет не запускается, если организация не существует или тариф истёк