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

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

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

Шаг 1. Откройте Widget Builder

После регистрации зайдите в дашборд и откройте SettingsWidget Builder. Это центральная панель настройки виджета — всё что вы здесь меняете моментально отображается в live preview справа.

Workspace_id виден в URL дашборда (/settings/widget-builder?ws=UUID) — пригодится дальше для встраивания.

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

В левой колонке откройте секцию Brand. Минимум что стоит изменить под ваш сайт:

  • Accent color — основной цвет FAB-кнопки и акцентов (по умолчанию индиго #6366f1). Hex.
  • Logo — кнопка «Загрузить» открывает file picker. Принимает PNG / JPEG / WebP / SVG до 256 КБ. Опции: форма (круг / закруглённый / квадрат) и прозрачный фон для PNG со своим бэкграундом.
  • Header title — что увидит посетитель в шапке виджета (например, «Поддержка ForestsNet»).

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

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

Изменения в Builder автоматически сохраняются как draft. Чтобы посетители увидели вашу настройку, нажмите Publish в верхнем правом углу. Версия конфига инкрементируется и кеш виджет-бандла инвалидируется (новые посетители получат свежий конфиг при следующем заходе).

На платных тарифах есть Schedule publish — можно запланировать публикацию на определённое время (например, в пятницу 18:00 после code freeze).

Шаг 4. Вставьте сниппет на сайт

Кнопка Embed в правом верхнем углу Builder'а даёт готовый сниппет с вашим workspace_id:

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> на каждой странице где должен быть чат. По умолчанию виджет подключается в анонимном режиме — никакого бэкенда у вас не нужно. Если хотите cross-device идентификацию залогиненного юзера — раскомментируйте блок fetch('/api/supporthub/token') и реализуйте endpoint у себя по одному из шаблонов. Подробнее про identify-flow — /docs/widget/identify.

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

  1. 1
    Откройте сайт в инкогнито
    В правом нижнем углу должна появиться круглая FAB-кнопка с иконкой чата (через ~100 мс после полной загрузки страницы).
  2. 2
    Кликните по FAB → панель открывается
    Посетитель видит главную: приветствие из секции Welcome + кнопка Задать вопрос.
  3. 3
    Отправьте тестовое «привет»
    В дашборде во вкладке Inbox моментально появится новый тикет — это значит виджет подключён правильно и WebSocket подключение работает.

Что дальше

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

  1. Главная и приветствие — настроить hero, CTA, bot menu, pinned banner.
  2. Pre-chat форма — собирать email / имя / телефон до начала чата.
  3. Часы работы — расписание и offline-сообщение когда команды нет онлайн.
  4. Identify посетителей — если ваш сайт уже знает пользователя (логин, CRM), привяжите тикеты к контакту автоматически.
  5. Cross-subdomain — если виджет на нескольких поддоменах одного сайта, настройте cookie_domain чтобы один визитор сохранял одну беседу.
  6. Дополнительно — custom CSS, звуки, mini app, email bridge.

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

Для интеграционных сценариев и кастомизации посмотрите:

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