SupportHubSupportHub/ docs
Назад
Quickstart за 5 минут
Виджет / Quickstart

Запустить виджет за 5 минут

От пустого проекта до работающего чата на сайте — 5 шагов. Никакого кода с вашей стороны, кроме одного <script>-тега.

Шаг 1. Откройте конструктор виджета

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

Шаг 2. Минимально настройте брендинг

Откройте раздел «Брендинг». Минимум, что стоит поменять под ваш сайт:

  • «Акцентный цвет» — цвет кнопки виджета и акцентов (по умолчанию индиго #6366f1), в формате #RRGGBB.
  • «Логотип» — кнопка «Загрузить» открывает выбор файла. Принимает PNG / JPEG / WebP / SVG до 256 КБ; растровую картинку можно обрезать перед загрузкой. Рядом — «Форма» («Скруглённый» / «Круг» / «Квадрат») и «Прозрачный фон» для логотипов со своим фоном.
  • «Заголовок шапки» — что увидит посетитель в шапке виджета (например, «Поддержка ForestsNet»).

Всё остальное — потом. Превью справа сразу покажет результат.

Шаг 3. Опубликуйте конфиг

Изменения в конструкторе сами сохраняются в черновик. Чтобы их увидели посетители, нажмите «Опубликовать» в правом верхнем углу. Браузер посетителя кеширует виджет вместе с конфигом, поэтому изменения доходят до посетителей в течение нескольких минут.

Шаг 4. Вставьте код на сайт

Кнопка «Код для вставки» внизу левой панели конструктора открывает готовый код с ID вашего проекта и кнопкой «Скопировать». Тот же код есть в НастройкиКаналы, в карточке Web Widget:

index.htmlhtml
<script>
(function(w, d){
  function loadWidget(token){
    var s = d.createElement('script');
    s.async = 1;
    s.src = 'https://support.forestsnet.com/widget-bundle?ws=YOUR_WORKSPACE_UUID';
    if (token) s.setAttribute('data-visitor-token', token);
    d.head.appendChild(s);
  }
  // ── Optional: cross-device HMAC visitor token ─────────────────
  // Uncomment + implement /api/supporthub/token on your backend to
  // bind the same visitor across devices. Recipes per stack:
  //   https://support.forestsnet.com/docs/widget/hmac-examples
  //
  // fetch('/api/supporthub/token', { credentials: 'include' })
  //   .then(function(r){ return r.ok ? r.json() : null; })
  //   .then(function(data){ loadWidget(data && data.token); })
  //   .catch(function(){ loadWidget(); });
  //
  // Default — anonymous (no token):
  loadWidget();
})(window, document);
</script>

Вставьте его перед закрывающим </body> на каждой странице, где должен быть чат. По умолчанию виджет подключается в анонимном режиме — никакого бэкенда у вас не нужно. Если хотите узнавать залогиненного посетителя на разных устройствах — раскомментируйте блок fetch('/api/supporthub/token') и реализуйте endpoint у себя по одному из шаблонов. Подробнее про идентификацию — /docs/widget/identify.

ID проекта — это UUID в параметре ?ws= кода. Он же показан в НастройкиКаналы строкой «Workspace ID» в карточке REST API.

Шаг 5. Проверьте

  1. 1
    Откройте сайт в инкогнито
    В правом нижнем углу должна появиться кнопка виджета — по умолчанию с иконкой чата и текстом из поля «Текст CTA-кнопки» раздела «Приветствие».
  2. 2
    Нажмите кнопку — откроется панель
    Посетитель видит главную: приветствие из раздела «Приветствие» и кнопку «Задать вопрос».
  3. 3
    Отправьте тестовое «привет»
    В дашборде во «Входящих» сразу появится новое обращение — значит, виджет подключён правильно. Ответьте на него: ответ придёт в открытый виджет без перезагрузки.

Что дальше

Базовая установка готова. Дальнейшая настройка — итеративная, по мере того как пойдут вопросы:

  1. Главная и приветствие — тексты главной, закреплённый баннер, авто-открытие.
  2. Pre-chat форма — собирать email / имя / телефон до начала чата.
  3. Часы работы — что видят посетители, когда команды нет на месте.
  4. Идентификация посетителей — если ваш сайт уже знает пользователя (логин, CRM), привяжите обращения к контакту автоматически.
  5. Несколько поддоменов — если виджет стоит на нескольких поддоменах одного сайта, задайте cookie-домен, чтобы у посетителя была одна переписка.
  6. Дополнительно — свой CSS, звук уведомлений, email-мост.

Углублённая документация

Для интеграций и тонкой настройки посмотрите:

Была ли страница полезной?