Оформление виджета

Настройте окно, тексты и кнопку виджета в настройках канала. Эти значения используются на сайтах, где установлен этот виджет.

Основной раздел: Виджет.

Окно и оформление

Режим отображения определяет, как виджет появляется на сайте:

«Всплывающее окно» - виджет открывается по плавающей кнопке и показывает окно поверх страницы;
«Встроенный» - виджет встраивается в контейнер страницы без плавающей кнопки.

Для всплывающего окна выберите положение: сверху слева, сверху справа, снизу слева или снизу справа. Ширина ограничена диапазоном 200-800 px, высота - 300-1000 px. Точное значение можно ввести в числовом поле, а ползунок ширины и ползунок высоты удобны для визуальной настройки. Скругление углов работает для всплывающего и встроенного режима; его также можно менять ползунком. Переключатель «Тень» включает или выключает тень вокруг окна.

Окно и оформление. Отмеченные элементы: 1. сверху слева; 2. сверху справа; 3. снизу слева; 4. снизу справа; 5. Ширина; 6. высота; 7. ползунок ширины; 8. ползунок высоты; 9. Скругление углов; 10. ползунком — 1 / 2
1. сверху слева · 2. сверху справа · 3. снизу слева · 4. снизу справа · 5. Ширина · 6. высота · 7. ползунок ширины · 8. ползунок высоты · 9. Скругление углов · 10. ползунком

Цветовая схема задаёт светлый, тёмный или автоматический режим. В автоматическом режиме виджет ориентируется на настройки браузера пользователя. Язык можно выбрать явно: русский, английский или «Авто».

Нажмите шестерёнку справа от вариантов цветовой схемы, чтобы открыть «Цвета виджета». Для каждой темы доступны два цвета:

Тема	Фон окна	Акцентный цвет
Светлая	HEX-код фона или палитра фона	HEX-код акцента или палитра акцента
Тёмная	HEX-код фона или палитра фона	HEX-код акцента или палитра акцента

Введите цвет в формате #RRGGBB или выберите его в палитре. Акцент используется для активных элементов, кнопок и выделений. Оттенки поверхностей, границ и текста подбираются автоматически. Пустое поле сохраняет стандартный цвет; без собственных цветов стандартное оформление остаётся неизменным. В режиме «Авто» виджет использует цвета соответствующей темы браузера.

Кнопка «Стандартные цвета» отдельно сбрасывает светлую или тёмную тему. Нажмите «Применить», чтобы увидеть цвета в предпросмотре, затем сохраните настройки виджета общей кнопкой сохранения. «Отмена» закрывает окно без применения изменений. Цвета плавающей кнопки на сайте настраиваются отдельно.

Окно и оформление. Отмеченные элементы: 1. «Всплывающее окно»; 2. «Встроенный»; 3. светлый; 4. тёмный; 5. автоматический режим; 6. русский; 7. английский; 8. «Авто» — 1. «Всплывающее окно» · 2. «Встроенный» · 3. светлый · 4. тёмный · 5. автоматический режим · 6. русский · 7. английский · 8. «Авто»

Скругление в предпросмотре меняется сразу, но сохраняется только после нажатия кнопки сохранения. Сохранённый border_radius применяется при следующей инициализации виджета, если сайт не переопределяет его через init. Для временного изменения уже работающего экземпляра разработчик может вызвать SenlerWidget.updateRuntime({ border_radius: 18 }); это значение не записывается в настройки канала.

Иконка приветственного экрана

Для такого оформления выберите «Текст по центру» в настройках приветствия.

В блоке «Иконка приветственного экрана» можно заменить стандартную иконку над приветствием своим логотипом или картинкой:

Нажмите «Загрузить» и выберите PNG, JPEG или WebP до 10 МБ, не более 8000 пикселей по каждой стороне.
В окне «Настройка иконки приветствия» переместите и масштабируйте изображение, чтобы выбрать нужную область. Выберите форму: «Круг» или «Квадрат».
Нажмите «Применить», затем сохраните настройки виджета. «Отмена» закрывает окно без замены картинки.

Картинка используется в режиме «Текст по центру» до выбора диалога и в пустом чате. Она не меняет иконку канала, аватары в сообщениях или плавающую кнопку. Форму уже загруженной картинки можно переключить между кругом и квадратом без повторной загрузки. Чтобы вернуть исходный вариант, нажмите «Стандартная иконка» и сохраните настройки.

Для настройки из кода сайта используйте параметры картинки приветствия. Явно заданные в init адрес и форма имеют приоритет над настройками канала.

Подключение виджета сайта. Отмеченные элементы: 1. «Текст по центру»; 2. «Иконка приветственного экрана»; 3. приветственное сообщение; 4. русском поле — 1 / 3
1. «Текст по центру» · 2. «Иконка приветственного экрана» · 3. приветственное сообщение · 4. русском поле

Тексты виджета

Тексты настраиваются отдельно на вкладках русского и английского языков. Вкладка меняет только редактируемую версию текста, а не общий язык виджета.

На русской вкладке заполните название чата, название диалога по умолчанию и подсказку в поле ввода. На английской вкладке доступны те же поля: название чата, название диалога по умолчанию и подсказка в поле ввода.

Название чата показывается в шапке окна виджета. Название диалога по умолчанию используется, пока у диалога нет собственного названия. Подсказку пользователь видит до начала набора.

Подключение виджета сайта. Отмеченные элементы: 1. русского; 2. английского; 3. название чата; 4. название диалога по умолчанию; 5. подсказку в поле ввода — 1 / 2
1. русского · 2. английского · 3. название чата · 4. название диалога по умолчанию · 5. подсказку в поле ввода

Приветствие редактируется отдельно: в блоке «Приветствие» выберите «Текст по центру». На вкладке RU заполните приветственное сообщение, а в русском поле ниже добавьте кнопки с вариантами первого вопроса. На вкладке EN задайте приветствие и кнопки в английском поле.

Подключение виджета сайта. 1. RU — 1. RU

Для каждого языка можно сохранить до 8 уникальных кнопок длиной не более 120 символов каждая. В виджете показывается только набор текущего языка; если для него список пуст, кнопок не будет.

Посетитель видит эти варианты под приветствием до начала переписки. Нажатие сразу отправляет текст кнопки как сообщение пользователя. Пока оно отправляется, остальные варианты временно недоступны, чтобы не создать два одинаковых обращения.

Кнопка виджета

Положение кнопки

Кнопка виджета есть только в режиме «Всплывающее окно». Её можно поставить сверху слева, сверху справа, снизу слева, снизу справа или скрыть. Если кнопка скрыта, виджет можно открыть только программно с сайта.

Цвета кнопки

Для светлой темы выберите фон в палитре и при необходимости уточните его в поле HEX, затем так же задайте цвет иконки в палитре и в поле HEX. Для тёмной темы используйте палитру фона, поле фона, палитру иконки и поле иконки.

Закрытие и сворачивание

Во всплывающем режиме крестик закрытия уже есть в шапке виджета, отдельно добавлять его не нужно. SenlerWidget.close() скрывает окно, а SenlerWidget.open() показывает его снова.

Во встроенном режиме обычный крестик скрыт. Разработчик может включить крестик сворачивания внутри шапки через shell.collapse_button: true. Нажатие вызывает onCollapse(detail) и событие senler-widget:collapse-request, но не скрывает виджет автоматически. Сайт выбирает один обработчик и вызывает SenlerWidget.close() либо закрывает свою внешнюю панель. SenlerWidget.open() снова показывает скрытый виджет. Готовый пример приведён в инструкции по Public API.

SenlerWidget.destroy() нужен не для сворачивания: он полностью удаляет экземпляр, после чего требуется повторная инициализация.