Pride Park

Про объект

Это шаблон страницы клиента. Виджет встраивается одной строкой в HTML и работает с тем же бэкендом, что и сайт консультанта.

Как встроить виджет на свой сайт

Перед закрывающим </body> вставьте:

<script src="http://localhost:8001/static/widget.js"
        data-api="http://localhost:8001"
        data-title="Консультант Pride Park"
        data-position="right"
        data-accent="#009640"
        data-accent2="#01978c"
        data-theme="auto"
        defer></script>

Виджет рендерится в Shadow DOM — его стили полностью изолированы от CSS вашего сайта (и наоборот), ничего не сломается.

Параметры

• data-api — URL бэкенда (по умолчанию берётся из origin скрипта).
• data-title / data-subtitle — заголовок и подзаголовок шапки.
• data-placeholder — placeholder поля ввода.
• data-greeting — приветственное сообщение.
• data-position — right (по умолчанию) или left.
• data-accent — основной цвет (любой CSS color).
• data-accent2 — второй цвет градиента (по умолчанию = accent, т.е. сплошной).
• data-theme — auto (по системе), light или dark.
• data-font — семейство шрифта (напр. Inter, sans-serif).
• data-radius — скругление панели в px.
• data-z-index — z-index (если на сайте есть перекрывающие элементы).
• data-header-logo — URL логотипа в шапке чата.
• data-launcher-icon — URL иконки кнопки-открывашки.
• data-stream — true (по умолчанию) SSE-стриминг, false блокирующий ответ.
• data-restore-history — true (по умолчанию) подгружать историю диалога.
• data-auto-open — true чтобы окно открывалось сразу.

Программная настройка

<script>
  window.ConsultantConfig = {
    api: "https://consultant.example.com",
    title: "Помощник",
    accent: "#22c55e",
    autoOpen: false,
    stream: true
  };
</script>
<script src="https://consultant.example.com/static/widget.js" defer></script>