Установка и JavaScript API виджета

Скопируйте embed-код из карточки Widget-канала. Loader создаёт кнопку чата и подгружает основной bundle после загрузки страницы, при первом действии посетителя или при вызове JavaScript API.

1. Подготовьте канал

• Откройте «Каналы» → «Виджеты сайта» и выберите нужный канал
• Настройте приветствие, внешний вид, форму перед чатом и режим ответов
• Добавьте каждый production-домен в «Доменную защиту»: например, betlens.ru и www.betlens.ru
• Скопируйте код из блока «Код для вставки»

2. Обычный HTML

Вставьте loader перед закрывающим тегом </body>. Замените YOUR_CHANNEL_ID на ID из карточки канала.

<script async src="https://novalead.ru/widget/YOUR_CHANNEL_ID"></script>

3. Next.js App Router

Используйте next/script. Разместите Script в layout, который оборачивает только нужные маршруты. Для публичной части сайта удобно создать route group app/(public) и положить loader в app/(public)/layout.tsx. Next.js загрузит скрипт при первом открытии маршрута внутри этого layout и не будет загружать его повторно при переходах между вложенными страницами.

import Script from "next/script"

export default function PublicLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      {children}
      <Script
        src="https://novalead.ru/widget/YOUR_CHANNEL_ID"
        strategy="afterInteractive"
      />
    </>
  )
}

4. WordPress, Tilda и Bitrix

• WordPress — вставьте код в Footer через плагин для header/footer scripts или в footer.php дочерней темы перед </body>
• Tilda — добавьте блок T123 «HTML-код» из раздела «Другое», вставьте loader и опубликуйте страницу
• Bitrix — откройте footer.php активного шаблона и вставьте loader перед </body>
• Не добавляйте один и тот же loader дважды: на странице должен быть один Widget-канал NovaLead

5. JavaScript API

Loader создаёт window.NovaLead сразу после выполнения embed-скрипта. Команды, вызванные до загрузки основного bundle, попадают в очередь и выполняются после инициализации.

• open() — открыть окно чата
• close() — закрыть окно, сохранив текущую сессию
• sendMessage(text) — отправить непустое текстовое сообщение; если чат должен быть виден, сначала вызовите open()
• setTheme(theme) — переключить тему: "light", "dark" или "auto"
• identify(identityToken) — связать чат с авторизованным пользователем; вызывайте только до первого open()
• grantConsent() — выдать consent после согласия посетителя, если в настройках канала включено его требование
• destroy() — полностью удалить текущий экземпляр виджета со страницы

window.NovaLead.open()
window.NovaLead.close()
window.NovaLead.sendMessage("Хочу уточнить тариф")
window.NovaLead.setTheme("dark")
window.NovaLead.identify(identityToken)
window.NovaLead.grantConsent()
window.NovaLead.destroy()

6. Своя кнопка открытия

Системную кнопку можно дополнить CTA в любом месте сайта. Optional chaining не даст ошибку, если пользователь нажмёт до выполнения loader.

<button type="button" onclick="window.NovaLead?.open()">
  Задать вопрос
</button>

7. Авторизованные пользователи

Identity token создаётся на сервере вашего сайта и подписывается signing secret из настроек Widget-канала. Не добавляйте secret во frontend bundle и не подписывайте произвольные claims из request body.

Получите токен через защищённый endpoint своей системы и передайте его виджету до первого открытия.

const response = await fetch("/api/novalead-identity")
const { token } = await response.json()

window.NovaLead.identify(token)
window.NovaLead.open()

8. Consent

Если в настройках канала включено «Требовать согласие», виджет может открыться визуально, но не создаёт chat-сессию до grantConsent(). Вызовите команду из обработчика принятия cookies.

cookieBanner.onAccept(() => {
  window.NovaLead?.grantConsent()
})

9. События

Виджет отправляет CustomEvent в window. Подпишитесь на них для аналитики и логики интерфейса.

• novalead:opened — окно чата открыто
• novalead:closed — окно чата закрыто
• novalead:message-sent — посетитель отправил сообщение; detail.length содержит длину текста
• novalead:message-received — получено новое сообщение
• novalead:rated — отправлена оценка; detail.rating и detail.aiUnderstood содержат выбранные значения

window.addEventListener("novalead:opened", () => {
  console.info("Widget opened")
})

window.addEventListener("novalead:message-sent", (event) => {
  console.info(event.detail.length)
})

10. Content Security Policy

Если сайт использует CSP, добавьте источники NovaLead в существующие директивы. Не заменяйте ими текущую политику сайта.

• unsafe-eval, unsafe-hashes, worker-src и frame-src виджету не нужны
• Если используется внешний аватар или attachment storage, добавьте его origin в img-src или media-src

script-src  https://novalead.ru
connect-src https://api.novalead.ru wss://api.novalead.ru
img-src     https://novalead.ru https://api.novalead.ru data: blob:
style-src   'unsafe-inline'
font-src    data:
media-src   https://novalead.ru

11. Проверка установки

• Откройте production-сайт в режиме инкогнито и дождитесь кнопки виджета
• В DevTools → Network проверьте ответы 200 для /widget/YOUR_CHANNEL_ID и /widget-assets/...
• В DevTools → Console проверьте ошибки CSP, blocked origin и сообщения NovaLead Loader
• Сверьте origin страницы с доменами в «Доменной защите», включая вариант с www
• Отключите content blocker на время проверки и отправьте тестовое сообщение

Частые вопросы