Демо сайта с виджетом-консультантом

Про застройщика

Это шаблон страницы клиента. Виджет встраивается одной строкой в HTML и работает с тем же бэкендом, что и сайт консультанта — отвечает по всем жилым комплексам застройщика (например, ЖК Pride Park).

Жилые комплексы

несколько ЖК в продаже

Квартиры и апартаменты

наличие и цены — из фида

Кладовые и машиноместа

по каждому ЖК

Ипотека и рассрочка

условия и акции

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

Перед закрывающим </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-footer — подпись под полем ввода (пусто — футер скрыт).
data-teaser — текст всплывающей подсказки у кнопки (пусто — нет).
data-lead — true (по умолчанию) показывать кнопку «заказать звонок» в шапке, false скрыть.
SSE-стриминг используется всегда; блокирующий ответ — только fallback для старых браузеров без Web Streams API.
data-restore-history — true (по умолчанию) подгружать историю диалога.
data-user-id — ID авторизованного пользователя с host-сайта; позволяет администратору получить все его сессии.
data-auto-open — true чтобы окно открывалось сразу.

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

<script>
  window.ConsultantConfig = {
    api: "https://consultant.example.com",
    userId: "42", // ID из авторизации host-сайта
    title: "Помощник",
    accent: "#22c55e",
    autoOpen: false,
    stream: true
  };
</script>
<script src="https://consultant.example.com/static/widget.js" defer></script>