Оформление из кода

Передайте нужные поля theme при инициализации. Явные значения переопределяют соответствующие настройки канала; остальные поля наследуются из них. Приоритет настроек.

Оформление

theme поддерживает:

Ключ	Что видит посетитель
`chat_title`	Заголовок чата.
`default_dialog_title`	Название нового диалога.
`theme_mode`	Светлая, тёмная или системная тема: `light`, `dark`, `auto`.
`position`	Положение popup-окна: `bottom-right`, `bottom-left`, `top-right`, `top-left`.
`width`, `height`	Размер окна: ширина `200–800`, высота `300–1000` пикселей.
`border_radius`	Скругление от `0` до `50` пикселей.
`shadow_enabled`	Тень окна.
`welcome_message`	Текст-подсказка в поле ввода.
`empty_state_message`	Приветственный текст в пустом новом диалоге.
`welcome_buttons`	Быстрые вопросы до начала переписки.
`welcome_icon_url`	Адрес картинки над приветствием: абсолютный HTTP(S) URL до 2048 символов. Пустая строка возвращает стандартную иконку.
`welcome_icon_shape`	Форма картинки: `circle` (круг, по умолчанию) или `square` (квадрат без скругления).
`button`	Положение и цвета плавающей кнопки.
`colors`	Цвета окна отдельно для `light` и `dark`: в каждой теме необязательные `background` (фон) и `accent` (акцент) в формате `#RRGGBB`. Отсутствующие значения наследуются из настроек канала; без переопределений используется стандартное оформление.

Локализованные тексты принимают объект { ru?: string, en?: string }. В каждом массиве welcome_buttons может быть до 8 непустых уникальных строк длиной до 120 символов. Нажатие сразу отправляет текст кнопки.

SenlerWidget.init({
  channel_id: "xxx",
  theme: {
    empty_state_message: {
      ru: "Здравствуйте! Чем помочь?",
      en: "Hello! How can I help?",
    },
    welcome_buttons: {
      ru: ["Узнать цену", "Связаться с оператором"],
      en: ["Check the price", "Contact an operator"],
    },
  },
});

theme.button.position принимает те же четыре позиции и hidden. Чтобы скрыть плавающую кнопку, задайте theme.button.position: "hidden"; значение theme.position: "hidden" недопустимо. Цвета theme.button.light.background, theme.button.light.icon, theme.button.dark.background и theme.button.dark.icon задаются в формате #RRGGBB.

welcome_buttons нельзя изменить через updateRuntime. Сохраните их в кабинете или задайте переопределение в init, затем заново инициализируйте виджет.

Картинка над приветствием

Свой логотип или иллюстрацию можно загрузить в настройках канала. Чтобы задать картинку из кода сайта, передайте адрес изображения в theme.welcome_icon_url:

SenlerWidget.init({
  channel_id: "xxx",
  theme: {
    welcome_icon_url: "https://example.com/support.png",
    welcome_icon_shape: "circle",
  },
});

Картинка используется в режиме centered_text до выбора диалога и в пустом диалоге, а не вместо аватара в сообщениях или иконки плавающей кнопки. Изображение заполняет квадратную область с обрезкой по краям; для circle эта область становится круглой. Если файл не загрузился, виджет показывает стандартную иконку. Для HTTPS-сайта используйте HTTPS-адрес изображения.

Чтобы вернуть стандартную иконку, задайте welcome_icon_url: "". Простое удаление параметра из init оставляет значение из настроек канала. Оба параметра иконки задаются при инициализации и не входят в updateRuntime: для их замены заново инициализируйте виджет с нужным theme.

Выбор приветственного сообщения описан в «Динамических сообщениях». Тему и скругление работающего экземпляра можно изменить через updateRuntime; это не меняет настройки канала.