Чтобы виджет чата выглядел органично на сайте и соответствовал фирменному стилю, его можно настроить с помощью стилей. Это позволяет:
В этой статье описано, как добавить расширенные стили с помощью параметра injectStyles
, и приведены примеры настройки. Для добавления расширенных настроек виджета выполните следующие действия:
injectStyles
. Примеры настроек:Позволяет настроить цвет фона и форму кнопки виджета. Пример виджета с настраиваемой кнопкой, где:
background-color
— цвет фона кнопки, например tomato
.border-radius
— форма кнопки, например border-radius: 16px
— скругленный квадрат на 16px вместо круга.Позволяет настроить высоту и ширину виджета. Пример виджета с настраиваемой высотой и шириной, где:
height
— высота виджета, например 75vh !important
.width
— ширина виджета, например 50vw !important
.Позволяет настроить шрифт виджета. Пример виджета с настраиваемым шрифтом, где:
font-family
— шрифт, например "Pacifico", sans-serif
— шрифт Pacifico, без засечек.Позволяет настроить положение виджета на странице. Пример виджета с изменением положения на странице, где:
left
— сдвиг от левой границы, например 8px
— сдвиг виджета от левой границы на 8 пикселей.right
— сдвиг от правой границы, например unset
— отмена сдвига от правой границы, установленного по умолчанию.align-items
— выравнивание элементов виджета, например start
— выравнивание элементов виджета по верхему краю.Отображение заданных настроек виджета смотрите в правом нижнем углу.
Виджет поддерживает расширенную кастомизацию, включая подключение аналитики и обработку пользовательских событий. Подробнее — в примерах настройки.