Перейти к основному содержимому
Версия: 6.19.0

Настройка темы оформления

Структура раздела webchat.theme файла конфигурации settings.json

Настройки темизации находятся в секции theme конфигурационного файла settings.json. Структура секции выглядит следующим образом:

{
"skin": {
"name": "mfms",
"colorMain": "#008aff",
"colorSecond": "#05b8ff",
"colorLines": "#dee4e9",
"colorSubText": "#6e6e6e",
"colorText": "#000",
"colorBackground": "#fff",
"width": "366px",
"height": "420px"
},
"fonts": ["/font1.css", "https://example.com/font2.css"],
"desktop": {
"Global": {},
"component1": {},
"component2": {},
"componentN": {}
},
"mobile": {
"Global": {},
"component1": {},
"component2": {},
"componentN": {}
},
"tablet": {
"Global": {},
"component1": {},
"component2": {},
"componentN": {}
}
}

Внимание!

Если не стоит задача детальной настройки внешнего вида Чата и будет достаточно изменить цвета и размер виджета, чтобы он соответствовал внешнему виду сайта, то рекоммендуется воспользоваться упрощенным способом темизации.

Структура секции theme

  • skin - настройки упрощенной темизации. Секция позволяет выбрать одну из предустановленных тем и переопределить базовые настройки отображения темы. Не является обязательной. См. Простой способ темизации
  • fonts - массив ссылок на CSS-файлы веб-шрифтов. Это могут быть ссылки на внешние источники (например, Google Fonts), ссылки на файлы на том же домене (абсолютные или отнросительные) или внедренные данные в формате data: URI. Не является обязательной.
  • desktop - секция служит для стилизации виджета для отображения в настольных браузерах. Наследует стили секции skin и позволяет переопределить их. Не является обязательной.
  • mobile - стили этой секции будут применяться для устройств на операционной системе IOS (не iPad) и Android c шириной экрана меньше 768px. Наследует стили секции desktop и позволяет переопределить их. Не является обязательной.
  • tablet - стили этой секции будут применяться для iPad или устройств на операционной системой Android с шириной экрана от 768px. Наследует стили секции mobile и позволяет переопределить их. Не является обязательной.

Внимание!

Для удобного использования виджета на мобильных устройствах в секции mobile включена кнопка отправки, по умолчанию - белого цвета. Рекомендуем настроить кнопку для соответствия вашему гайдлайну (компонент ChatInput).

Простой способ темизации

Настройки темизации находятся в секции theme в подсекции skin. Пример секции выглядит следующим образом:

{
"skin": {
"name": "mfms",
"colorMain": "#008aff",
"colorSecond": "#05b8ff",
"colorLines": "#dee4e9",
"colorSubText": "#6e6e6e",
"colorText": "#000",
"colorBackground": "#fff",
"width": "366px",
"height": "420px"
}
}

Секция skin содержит следующие поля (любое из этих полей не является обязательным, более детальное описание полей доступно ниже для каждой темы):

ПолеОписаниеЗначение по умолчанию
nameНазвание темы оформления. Список доступных тем:
mfms, threadsim, halcyon, adaptive
"threadsim"
widthШирина виджета"366px"
heightВысота виджета"420px"
colorMainОсновной базовый цвет"#008aff"
colorSecondДополнительный базовый цвет"#05b8ff"
colorLinesЦвет линий и сообщений оператора"#dee4e9"
colorSubTextЦвет дополнительного текста"#6e6e6e"
colorTextЦвет текста"#000000"
colorBackgroundФон виджета"#ffffff"

Тема "mfms"

Тема mfms

ЦветЭлементы
colorMainФон стартовой кнопки, фон сообщений клиента, фон поля ввода сообщения, границы и цвет текста кнопок
colorSecondФон области предпросмотра вложений и цитируемых сообщений, границы и цвет текста кнопок при наведении
colorLinesЦвет линий, фон сообщений оператора, границы текстовых полей
colorSubTextЦвет кнопки скрытия чата, цвет замещающего текста текстовых полей, цвет системных сообщений
colorTextЦвет текста, цвет текста в шапке
colorBackgroundФон виджета, цвет текста области предпросмотра вложений и цитируемых сообщений, цвет текста поля ввода сообщения, фон шапки

Тема "threadsim"

Тема threadsim

ЦветЭлементы
colorMainФон стартовой кнопки, фон сообщений клиента, фон кнопок, цвет текста области предпросмотра вложений и цитируемых сообщений
colorSecondФон области предпросмотра вложений и цитируемых сообщений, фон кнопок при наведении
colorLinesЦвет линий, фон сообщений оператора, границы текстовых полей
colorSubTextЦвет кнопки скрытия чата, цвет замещающего текста текстовых полей, цвет системных сообщений
colorTextЦвет текста, цвет текста поля ввода сообщения, цвет текста в шапке
colorBackgroundФон виджета, фон поля ввода сообщения, фон шапки

Тема "halcyon"

Тема halcyon

ЦветЭлементы
colorMainФон стартовой кнопки, фон сообщений клиента, фон поля ввода сообщения, границы и цвет текста кнопок
colorSecondФон области предпросмотра вложений и цитируемых сообщений, границы и цвет текста кнопок при наведении
colorLinesЦвет линий, фон сообщений оператора, границы текстовых полей
colorSubTextЦвет кнопки скрытия чата, цвет замещающего текста текстовых полей, цвет системных сообщений
colorTextЦвет текста, цвет текста в шапке
colorBackgroundФон виджета, цвет текста области предпросмотра вложений и цитируемых сообщений, цвет текста поля ввода сообщения, фон шапки

Тема "adaptive"

Особенностью данной темы является то, что окно Чата по высоте соответствует высоте области просмотра браузера.

Тема adaptive

ЦветЭлементы
colorMainФон стартовой кнопки, фон сообщений клиента, фон кнопок, цвет текста области предпросмотра вложений и цитируемых сообщений, фон шапки
colorSecondФон области предпросмотра вложений и цитируемых сообщений, фон кнопок при наведении
colorLinesЦвет линий, фон сообщений оператора, границы текстовых полей
colorSubTextЦвет замещающего текста текстовых полей, цвет системных сообщений
colorTextЦвет текста, цвет текста поля ввода сообщения
colorBackgroundЦвет кнопки скрытия чата, фон виджета, фон поля ввода сообщения, цвет текста в шапке

Настройка внешнего вида компонентов

Для тонкой настройки внешнего вида компонентов секция theme имеет три дочерние секции с настройками отображения компонентов Чата для различных типов устройств:

  • desktop - настольные браузеры.
  • mobile - браузеры устройств на операционной системе IOS и Android.
  • tablet - браузеры iPad или устройства на операционной системой Android с шириной экрана от 768px.

Каждая из этих секций может включать раздел Global, содержащий стили, которые будут наследоваться в стилях компонентов этой секции (и могут быть переопределены в стилях компонентов). Другими словами, если, например, в секции desktop/Global задать цвет текста (свойство color), то этот цвет будет использоваться всеми компонентами секции desktop, если в стилях компонента не задан другой цвет. Если установить значение свойства color, например у компонента desktop/ChatInput, то компонент будет использовать это переопределенное значение. Цепочка наследования и переопределения стилей в общем виде выглядит так:

Наследование стилей

Большинство настроек представляют собой обычные CSS-свойства. Ниже приведены:

  • список компонентов для редактирования
  • соответствие свойств настроек компонентов с CSS-свойствами

Обратите внимание: настройки которые не описаны ниже будут проигнорированы.

Global

Свойство в настройкахCSS-свойствоОписание
fontFamilyfont-familyСемейство шрифта
fontSizefont-sizeРазмер шрифта
colorcolorЦвет текста

AttachmentButton

AttachmentButton

Свойство в настройкахCSS-свойствоОписание
opacityopacityНепрозрачность
borderWidthborder-widthТолщина границы
borderStyleborder-styleСтиль границы
borderColorborder-colorЦвет границы
backgroundSizebackground-sizeРазмер изображения на кнопке
backgroundImagebackground-imageПуть к изображению
borderColorHoverborder-colorЦвет границы (при наведении)
backgroundImageHoverbackground-imageПуть к изображению (при наведении)

AudioPlayerClient

Свойство в настройкахCSS-свойствоОписание
errorColorcolorЦвет текста
timeColorcolorЦвет текста
speechTextColorcolorЦвет развернутого текста
speechButtonBackgroundColorbackground-colorЦвет фона кнопки разворачивания
speechButtonColorcolorЦвет текста кнопки разворачивания
speechPreloaderIconbackground-imageПуть к изображению иконки загрузки текста
preloaderColorcolorЦвет фона
progressThumbBackgroundbackgroundЦвет фона
progressTrackBackgroundbackgroundЦвет фона
progressFilledBackgroundbackgroundЦвет фона
playBackgroundColorbackground-colorЦвет фона
pauseBackgroundColorbackground-colorЦвет фона
playIconbackground-imageПуть к изображению
pauseIconbackground-imageПуть к изображению

AudioPlayerOperator

Свойство в настройкахCSS-свойствоОписание
errorColorcolorЦвет текста
timeColorcolorЦвет текста
speechTextColorcolorЦвет развернутого текста
speechButtonBackgroundColorbackground-colorЦвет фона кнопки разворачивания
speechButtonColorcolorЦвет текста кнопки разворачивания
speechPreloaderIconbackground-imageПуть к изображению иконки загрузки текста
preloaderColorcolorЦвет фона
progressThumbBackgroundbackgroundЦвет фона
progressTrackBackgroundbackgroundЦвет фона
progressFilledBackgroundbackgroundЦвет фона
playBackgroundColorbackground-colorЦвет фона
pauseBackgroundColorbackground-colorЦвет фона
playIconbackground-imageПуть к изображению
pauseIconbackground-imageПуть к изображению

BackButton

BackButton

Свойство в настройкахCSS-свойствоОписание
backgroundSizebackground-sizeРазмер изображения
backgroundImagebackground-imageПуть к изображению
backgroundImageHoverbackground-imageПуть к изображению (при наведении)

BadBrowser

BadBrowser

Свойство в настройкахCSS-свойствоОписание
paddingpaddingВнутренние отступы
backgroundColorbackground-colorЦвет фона
colorcolorЦвет текста
openBackgroundImagebackground-imageИзображение для открытого переключателя
closeBackgroundImagebackground-imageИзображение для закрытого переключателя

Button

Button

Свойство в настройкахCSS-свойствоОписание
paddingpaddingВнутренние отступы
maxHeightmax-heightМаксимальная высота
maxWidthmax-widthМаксимальная ширина
backgroundColorbackground-colorЦвет фона
backgroundImagebackground-imageПуть к изображению
backgroundPositionbackground-positionПозиционирование изображения
colorcolorЦвет текста
fontWeightfont-weightНасыщенность шрифта
fontSizefont-sizeРазмер шрифта
fontFamilyfont-familyСемейство шрифта
borderRadiusborder-radiusСкругление углов
borderWidthborder-widthТолщина границы
borderColorborder-colorЦвет границы
borderStyleborder-styleСтиль границы
marginmarginВнешние отступы
backgroundImageHoverbackground-imageПуть к изображению (при наведении)
borderColorHoverborder-colorЦвет границы (при наведении)
fontSizeHoverfont-sizeРазмер шрифта (при наведении)
colorHovercolorЦвет текста (при наведении)
backgroundColorHoverbackground-colorЦвет фона (при наведении)

ButtonsSurvey

Свойство в настройкахCSS-свойствоОписание
containerBackgroundbackgroundФон контейнера
buttonFontWeightfont-weightНасыщенность шрифта элемента
buttonFontSizefont-sizeРазмер шрифта элемента
buttonFontFamilyfont-familyСемейство шрифта элемента
buttonBorderRadiusborder-radiusСкругление углов элемента
buttonMarginmarginВнешние отступы элемента
buttonPaddingpaddingВнутренние отступы элемента
buttonBorderborderГраница элемента
buttonBackgroundbackgroundФон элемента
buttonColorcolorЦвет текста элемента
buttonBorderHoverborderГраница элемента (при наведении)
buttonBackgroundHoverbackgroundФон элемента (при наведении)
buttonColorHovercolorЦвет текста элемента (при наведении)
buttonBorderActiveborderГраница элемента (при нажатии)
buttonBackgroundActivebackgroundФон элемента (при нажатии)
buttonColorActivecolorЦвет текста элемента (при нажатии)
textMarginmarginВнешние отступы текста вопроса
textColorcolorЦвет текста вопроса
textFontSizefont-sizeРазмер шрифта текста вопроса
textFontFamilyfont-familyСемейство шрифта текста вопроса
textFontWeightfont-weightНасыщеность шрифта текста вопроса
thanksFontWeightfont-weightНасыщеность шрифта текста благодарности
thanksColorcolorЦвет текста благодарности
thanksFontSizefont-sizeРазмер шрифта текста благодарности
thanksFontFamilyfont-familyСемейство шрифта текста благодарности

Chat

Chat

Свойство в настройкахCSS-свойствоОписание
transitionType-Тип анимации (целое число от 0 до 8, по умолчанию - 0, без анимации)
borderRadiusborder-radiusСкругление углов
boxShadowbox-shadowТень
heightheightВысота
widthwidthШирина
rightrightОтступ от правого края экрана
bottombottomОтступ от нижнего края экрана
scrollbarWidthwidthШирина полосы прокрутки
scrollbarBackgroundColorbackground-colorЦвет полосы прокрутки
scrollbarBorderRadiusborder-radiusСкругление углов полосы прокрутки

ChatBody

ChatBody

Свойство в настройкахCSS-свойствоОписание
backgroundColorbackground-colorЦвет фона
boxShadowbox-shadowТень

ChatButton

ChatButton

Свойство в настройкахCSS-свойствоОписание
backgroundSizebackground-sizeРазмер изображения на кнопке
backgroundImagebackground-imageПуть к изображению на кнопке
backgroundColorbackground-colorФон кнопки
borderRadiusborder-radiusСкругление углов кнопки
boxShadowbox-shadowТень кнопки
heightheightВысота кнопки
widthwidthШирина кнопки
rightrightОтступ от правого края экрана
bottombottomОтступ от нижнего края экрана

ChatHeader

ChatHeader

Свойство в настройкахCSS-свойствоОписание
welcomeFontSizefont-sizeРазмер шрифта "Добро пожаловать в чат!"
welcomeFontWeightfont-weightНасыщенность шрифта "Добро пожаловать в чат!"
welcomeFontColorcolorЦвет шрифта "Добро пожаловать в чат!"
borderBottomborder-bottomНижняя граница компонента
paddingpaddingВнутренние отступы
heightheightВысота
backgroundColorbackground-colorЦвет фона
backgroundImagebackground-imageИзображение или градиент для фона
backgroundSizebackground-sizeРазмер изображения для фона
backgroundPositionbackground-positionПозиционирование изображения фона
fontFamilyfont-familyСемейство шрифта
fontSizefont-sizeРазмер шрифта
colorcolorЦвет текста
contentPaddingpaddingВнутренние отступы блока Content
contentCentered-Центрирование
avatarWidthwidthШирина аватара
avatarHeightheightВысота аватара
searchingFontSizefont-sizeРазмер шрифта "Поиск оператора"
searchingFontWeightfont-weightНасыщенность шрифта "Поиск оператора"
searchingColorcolorЦвет шрифта "Поиск оператора"
spinnerBackgroundImagebackground-imageИзображение для прелоадера
agentNameColorcolorЦвет имени агента
agentNameFontSizefont-sizeРазмер шрифта имени агента
agentNameFontWeightfont-weightНасыщенность шрифта имени агента
agentNameMaxWidthmax-widthМаксимальная ширина имени агента
agentInfoColorcolorЦвет дополнительной информации
agentInfoFontSizefont-sizeРазмер шрифта дополнительной информации
agentInfoFontWeightfont-weightНасыщенность шрифта дополнительной информации
agentInfoMaxWidthmax-widthМаксимальная ширина дополнительной информации

ChatInput

ChatInput

Свойство в настройкахCSS-свойствоОписание
wrapperHeightheightВысота компонента
wrapperBorderTopborder-topВерхняя граница компонента
wrapperBorderborderГраница компонента
wrapperPaddingpaddingВнутренние отступы компонента
wrapperBackgroundColorbackground-colorЦвет фона компонента
buttonsPlacement-Вариация размещения кнопок в компоненте, наименование кнопок: "attach", "send", "emoji", конфигурация buttonsPlacement: [[кнопки с левой стороны], [кнопки с правой стороны]]. В массиве укажите только те кнопки, которые должны быть доступны клиенту. Поддерживаемые конфигурации: нет кнопок; одна справа; одна справа, одна слева; две справа; одна слева, две справа. Также смотрите примеры настройки кнопки "attach" в [[Частые вопросы]]
placeholderColorcolorЦвет замещающего текста
backgroundColorbackground-colorЦвет фона поля ввода
colorcolorЦвет текста в поле ввода
fontSizefont-sizeРазмер шрифта
fontWeightfont-weightНасыщенность шрифта
paddingToppadding-topВнутренний верхний отступ поля ввода
paddingBottompadding-bottomВнутренний нижний отступ поля ввода
paddingLeftpadding-leftВнутренний левый отступ поля ввода
paddingRightpadding-rightВнутренний правый отступ поля ввода
borderRadiusborder-radiusСкругление углов поля ввода
deleteRecordButtonBackgroundImagebackground-imageПуть к изображению на кнопке удаления голосового сообщения
playRecordButtonBackgroundImagebackground-imageПуть к изображению на кнопке воспроизведения голосового сообщения
pauseRecordButtonBackgroundImagebackground-imageПуть к изображению на кнопке паузы голосового сообщения
recordPlayerMarginmarginВнешние отступы проигрывателя голосового сообщения
recordingTimeColorcolorЦвет текста продолжительности голосового сообщения во время записи
playbackTimeColorcolorЦвет текста продолжительности голосового сообщения во время проигрывания
progressSliderBarColorbackground-colorЦвет трека слайдера голосового сообщения
progressSliderThumbColorbackground-colorЦвет ползунка слайдера голосового сообщения
progressSliderFilledColorbackground-colorЦвет прослушанной части трека слайдера голосового сообщения
recordingLedColorbackground-colorЦвет индикатора записи
buttonsContainerToptopПозиционирование кнопок относительно верхнего края
circleButtonBackgroundColorbackground-colorЦвет фона круга

ChatInvite

ChatInvite

Свойство в настройкахCSS-свойствоОписание
transitionType-Тип анимации (целое число от 0 до 4, по умолчанию - 0)
colorcolorЦвет текста
fontFamilyfont-familyСемейство шрифта
fontSizefont-sizeРазмер шрифта
paddingpaddingВнутренние отступы
maxWidthmax-widthМаксимальная ширина
backgroundColorbackground-colorЦвет фона пузыря
filterfilterФильтр
heightheightВысота
widthwidthШирина
rightrightОтступ от правого края экрана
bottombottomОтступ от нижнего края экрана
buttonColorcolorЦвет крестика кнопки "Закрыть"
buttonBackgroundColorbackground-colorЦвет фона кнопки "Закрыть"

ChatMessagesBadge

ChatMessagesBadge

Свойство в настройкахCSS-свойствоОписание
colorcolorЦвет текста
fontFamilyfont-familyСемейство шрифта
fontSizefont-sizeРазмер шрифта
lineHeightline-heightВысота строки
backgroundColorbackground-colorЦвет фона пузыря
heightheightВысота
widthwidthШирина для счетчика не превышающего 1 разряд (от 1 до 9)
rightrightОтступ от правого края экрана
bottombottomОтступ от нижнего края экрана
borderRadiusborder-radiusСкругление углов

ChatPoll

ChatPoll

Свойство в настройкахCSS-свойствоОписание
starDisabledOutlineImagebackground-imageПуть к изображению "пустой недоступной" звездочки
starOutlineImagebackground-imageПуть к изображению "пустой" звездочки
starFilledImagebackground-imageПуть к изображению "заполненной" звездочки
starFilledRatedImagebackground-imageПуть к изображению "заполненной" звездочки для вывода результата
starWidthwidthШирина звездочки
starHeightheightВысота звездочки
textMarginmarginВнешние отступы текста вопроса
colorcolorЦвет текста вопроса
fontSizefont-sizeРазмер шрифта текста вопроса
fontFamilyfont-familyСемейство шрифта текста вопроса
fontWeightfont-weightНасыщеность шрифта текста вопроса
thanksFontWeightfont-weightНасыщеность шрифта текста благодарности
thanksColorcolorЦвет текста благодарности
thanksFontSizefont-sizeРазмер шрифта текста благодарности
thanksFontFamilyfont-familyСемейство шрифта текста благодарности
marginmarginВнешние отступы
backgroundColorbackground-colorЦвет фона

ChatWelcome

ChatWelcome

Свойство в настройкахCSS-свойствоОписание
widthwidthШирина
maxWidthmax-widthМаксимальная ширина
textAligntext-alignВыравнивание текста
marginmarginВнешние отступы блока формы
headerMarginmarginВнешние отступы заголовка формы
buttonMarginmarginВнешние отступы кнопки
buttonFontSizefont-sizeРазмер шрифта текста кнопки
textColorcolorЦвет основного текста
textFontSizefont-sizeРазмер шрифта основного текста
textFontFamilyfont-familyСемейство шрифта основного текста
textTextAligntext-alignВыравнивание текста у основного текста
textMarginBottommargin-bottomОтступ снизу у основного текста
subtextColorcolorЦвет дополнительного текста
subtextFontSizefont-sizeРазмер шрифта дополнительного текста
subtextFontFamilyfont-familyСемейство шрифта дополнительного текста
subtextTextAligntext-alignВыравнивание текста у дополнительного текста
subtextMarginBottommargin-bottomОтступ снизу у дополнительного текста
greetTextColorcolorЦвет основного текста приветственного сообщения
greetTextFontSizefont-sizeРазмер шрифта основного текста приветственного сообщения
greetTextFontFamilyfont-familyСемейство шрифта основного текста приветственного сообщения
greetTextTextAligntext-alignВыравнивание текста у основного текста приветственного сообщения
greetTextMarginBottommargin-bottomОтступ снизу у основного текста приветственного сообщения
greetSubtextColorcolorЦвет дополнительного текста приветственного сообщения
greetSubtextFontSizefont-sizeРазмер шрифта дополнительного текста приветственного сообщения
greetSubtextFontFamilyfont-familyСемейство шрифта дополнительного текста приветственного сообщения
greetSubtextTextAligntext-alignВыравнивание текста у дополнительного текста приветственного сообщения
greetSubtextMarginBottommargin-bottomОтступ снизу у дополнительного текста приветственного сообщения
greetImageDisplaydisplayСпособ отобращения изображения приветственного сообщения
greetImageMarginmarginВнешние отступы изображения приветственного сообщения
greetImageBackgroundImagebackground-imageПуть к изображению проветственного сообщения
greetImageWidthwidthШирина изображения приветственного сообщения
greetImageHeightheightВысота изображения приветственного сообщения
feedbackBackgroundColorbackground-colorЦвет фона текста сообщения
feedbackBorderRadiusborder-radiusСкругление углов текста сообщения
feedbackBorderTopWidthborder-top-widthТолщина границы сверху текста сообщения
feedbackBorderRightWidthborder-right-widthТолщина границы справа текста сообщения
feedbackBorderBottomWidthborder-bottom-widthТолщина границы снизу текста сообщения
feedbackBorderLeftWidthborder-left-widthТолщина границы слева текста сообщения
feedbackBorderColorborder-colorЦвет границы текста сообщения
feedbackMarginmarginВнешние отступы текста сообщения
feedbackWidthmin-widthШирина текста сообщения
feedbackPaddingpaddingВнутренние отступы текста сообщения
feedbackTextAligntext-alignВыравнивание текста сообщения
feedbackFontWeightfont-weightНасыщенность шрифта текста сообщения
feedbackColorcolorЦвет текста сообщения
feedbackFontSizefont-sizeРазмер шрифта текста сообщения
feedbackFontFamilyfont-familyСемейство шрифта текста сообщения
feedbackPlaceholderColorcolorЦвет замещающего текста сообщения
feedbackLimiterColorcolorВнешние отступы текста сообщения
feedbackLimiterMarginmarginВнешние отступы текста сообщения

CloseButton

CloseButton

Свойство в настройкахCSS-свойствоОписание
backgroundSizebackground-sizeРазмер изображения
backgroundImagebackground-imageПуть к изображению
displaydisplayСпособ отображения кнопки
backgroundImageHoverbackground-imageПуть к изображению (при наведении)

DateBar

Свойство в настройкахCSS-свойствоОписание
colorcolorЦвет текста
fontWeightfont-weightНасыщенность шрифта
fontFamilyfont-familyГарнитура
fontSizefont-sizeРазмер шрифта
paddingpaddingВнутренние отступы
borderRadiusborder-radiusСкругление углов
boxShadowbox-shadowТень
backgroundColorbackground-colorЦвет фона

Emoji

Emoji

Свойство в настройкахCSS-свойствоОписание
backgroundColorbackground-colorЦвет фона

EmojiButton

EmojiButton

Свойство в настройкахCSS-свойствоОписание
opacityopacityНепрозрачность
borderWidthborder-widthТолщина границы
borderStyleborder-styleСтиль границы
borderColorborder-colorЦвет границы
backgroundSizebackground-sizeРазмер изображения на кнопке
backgroundImagebackground-imageПуть к изображению
borderColorHoverborder-colorЦвет границы (при наведении)
backgroundImageHoverbackground-imageПуть к изображению (при наведении)

InputText

InputText

Свойство в настройкахCSS-свойствоОписание
placeholderColorcolorЦвет замещающего текста
marginmarginВнешние отступы
paddingpaddingВнутренние отступы
textAligntext-alignВыравнивание текста
fontWeightfont-weightНасыщенность шрифта
backgroundColorbackground-colorЦвет фона
colorcolorЦвет текста
fontSizefont-sizeРазмер шрифта
fontFamilyfont-familyСемейство шрифта
borderRadiusborder-radiusСкругление углов
borderTopWidthborder-top-widthТолщина границы сверху
borderRightWidthborder-right-widthТолщина границы справа
borderBottomWidthborder-bottom-widthТолщина границы снизу
borderLeftWidthborder-left-widthТолщина границы слева
borderColorborder-colorЦвет границы
errorBackgroundbackground-colorЦвет фона при ошибке
errorBorderColorborder-colorЦвет границы при ошибке

Link

Свойство в настройкахCSS-свойствоОписание
containerType-Тип представления превью ссылки. Варианты: "full" (по умолчанию), "compact".
containerBorderborderГраница превью ссылки
outMarginRightmargin-rightОтступ справа для превью у исходящего сообщения
inMarginLeftmargin-leftОтступ слева для превью у входящего сообщения
titleFontWeightfont-weightНасыщенность шрифта заголовка страницы
titleFontSizefont-sizeРазмер шрифта заголовка страницы
titleColorcolorЦвет шрифта заголовка страницы
urlFontSizefont-sizeРазмер шрифта ссылки
urlColorcolorЦвет шрифта ссылки
descriptionFontSizefont-sizeРазмер шрифта описания
descriptionColorcolorЦвет шрифта описания

MessageClient

MessageClient

Свойство в настройкахCSS-свойствоОписание
marginmarginВнешние отступы сообщения
colorcolorЦвет текста
fontFamilyfont-familyСемейство шрифта
fontSizefont-sizeРазмер шрифта
backgroundColorbackground-colorЦвет фона
borderTopLeftRadiusborder-top-left-radiusСкругление верхнего левого угла
borderBottomLeftRadiusborder-bottom-left-radiusСкругление нижнего левого угла
borderTopRightRadiusborder-top-right-radiusСкругление верхнего правого угла
borderBottomRightRadiusborder-bottom-right-radiusСкругление нижнего правого угла
blinkBackgroundColorbackground-colorЦвет фона при подсвечивании сообщения
pointerType-Форма указателя, допустимые значения: "1", "2"
pointerDisplaydisplayСпособ отображения указателя
marginTopmargin-topВерхнее поле отступа
quoteColorcolorЦвет текста цитируемого сообщения
quoteFontSizefont-sizeРазмер шрифта текста цитируемого сообщения
quoteBorderColorborder-colorЦвет границы цитируемого сообщения
addQuoteImagebackground-imageПуть к изображению кнопки цитирования
addQuoteImageSizebackground-sizeМасштабирование изображения кнопки цитирования
attachmentImageWidthwidthШирина прикрепленного изображения
attachmentImageHeightheightВысота прикрепленного изображения
attachmentImagePaddingpaddingВнешние отступы сообщения c прикрепленным изображением
attachmentImagePendingIconbackground-imageПиктограмма загрузки вложения
attachmentImagePendingIconSizebackground-sizeРазмер пиктограммы загрузки вложения
attachmentImageErrorIconbackground-imageПиктограмма ошибки загрузки вложения
attachmentImageErrorIconSizebackground-sizeРазмер пиктограммы ошибки загрузки вложения
attachmentImageInfoColorcolorЦвет описания прикрепленного изображения
attachmentImageInfoFontSizefont-sizeРазмер шрифта описания прикрепленного изображения
attachmentErrorMessageColorcolorЦвет текста ошибки загрузки вложения
attachmentErrorMessageMarginmarginВнешние отступы текста ошибки загрузки вложения
statusIconWidthwidthШирина иконки статуса прочитанности сообщения
statusIconHeightheightВысота иконки статуса прочитанности сообщения
statusIconColor-Цвет иконки статуса прочитанности сообщения
linkFontFamilyfont-familyГарнитура ссылки
linkFontSizefont-sizeРазмер шрифта ссылки
linkColorcolorЦвет текста ссылки
linkFontWeightfont-weightНасыщенность шрифта ссылки
attachmentIconbackground-imageПиктограмма вложения
attachmentIconSizebackground-sizeРазмер пиктограммы вложения
attachmentIconHoverbackground-imageПиктограмма вложения (при наведении)
attachmentPendingIconbackground-imageПиктограмма загрузки вложения
attachmentPendingIconSizebackground-sizeРазмер пиктограммы загрузки вложения
attachmentErrorIconbackground-imageПиктограмма ошибки загрузки вложения
attachmentErrorIconSizebackground-sizeРазмер пиктограммы ошибки загрузки вложения

MessageOperator

MessageOperator

Свойство в настройкахCSS-свойствоОписание
marginmarginВнешние отступы сообщения
avatarDisplaydisplayСпособ отображения аватара
avatarImagebackground-imageПуть к изображению аватара по умолчанию
avatarWidthwidthШирина аватара
avatarHeightheightВысота аватара
avatarBottombottomОтступ аватара снизу
maxWidthmax-widthМаксимальная ширина
colorcolorЦвет текста
fontFamilyfont-familyСемейство шрифта
fontSizefont-sizeРазмер шрифта
backgroundColorbackground-colorЦвет фона
borderTopLeftRadiusborder-top-left-radiusСкругление верхнего левого угла
borderBottomLeftRadiusborder-bottom-left-radiusСкругление нижнего левого угла
borderTopRightRadiusborder-top-right-radiusСкругление верхнего правого угла
borderBottomRightRadiusborder-bottom-right-radiusСкругление нижнего правого угла
blinkBackgroundColorbackground-colorЦвет фона при подсвечивании сообщения
pointerType-Форма указателя, допустимые значения: "1", "2"
pointerDisplaydisplayСпособ отображения указателя
marginTopmargin-topВерхнее поле отступа
quoteColorcolorЦвет текста цитируемого сообщения
quoteFontSizefont-sizeРазмер шрифта текста цитируемого сообщения
quoteBorderColorborder-colorЦвет границы цитируемого сообщения
addQuoteImagebackground-imageПуть к изображению кнопки цитирования
addQuoteImageSizebackground-sizeМасштабирование изображения кнопки цитирования
attachmentImageType-Тип представления прикрепленного изображения. Варианты: "compact" (по умолчанию), "full".
attachmentImageWidthwidthШирина прикрепленного изображения
attachmentImageHeightheightВысота прикрепленного изображения
attachmentImagePaddingpaddingВнешние отступы сообщения c прикрепленным изображением
attachmentImagePendingIconbackground-imageПиктограмма загрузки вложения
attachmentImagePendingIconSizebackground-sizeРазмер пиктограммы загрузки вложения
attachmentImageErrorIconbackground-imageПиктограмма ошибки загрузки вложения
attachmentImageErrorIconSizebackground-sizeРазмер пиктограммы ошибки загрузки вложения
attachmentImageInfoColorcolorЦвет описания прикрепленного изображения
attachmentImageInfoFontSizefont-sizeРазмер шрифта описания прикрепленного изображения
attachmentErrorMessageColorcolorЦвет текста ошибки загрузки вложения
attachmentErrorMessageMarginmarginВнешние отступы текста ошибки загрузки вложения
linkFontFamilyfont-familyГарнитура ссылки
linkFontSizefont-sizeРазмер шрифта ссылки
linkColorcolorЦвет текста ссылки
linkFontWeightfont-weightНасыщенность шрифта ссылки
attachmentIconbackground-imageПиктограмма вложения
attachmentIconSizebackground-sizeРазмер пиктограммы вложения
attachmentIconHoverbackground-imageПиктограмма вложения (при наведении)
attachmentPendingIconbackground-imageПиктограмма загрузки вложения
attachmentPendingIconSizebackground-sizeРазмер пиктограммы загрузки вложения
attachmentErrorIconbackground-imageПиктограмма ошибки загрузки вложения
attachmentErrorIconSizebackground-sizeРазмер пиктограммы ошибки загрузки вложения
deletedMessageFontFamilyfont-familyГарнитура удаленного сообщения
deletedMessageFontSizefont-sizeРазмер шрифта удаленного сообщения
deletedMessageColorcolorЦвет текста удаленного сообщения
deletedMessageFontWeightfont-weightНасыщенность шрифта удаленного сообщения
editedMessageFontFamilyfont-familyГарнитура метки редактирования сообщения
editedMessageFontSizefont-sizeРазмер шрифта метки редактирования сообщения
editedMessageColorcolorЦвет текста метки редактирования сообщения
editedMessageFontWeightfont-weightНасыщенность шрифта метки редактирования сообщения

MessageTime

Свойство в настройкахCSS-свойствоОписание
colorcolorЦвет текста
fontWeightfont-weightНасыщенность шрифта
fontFamilyfont-familyГарнитура
fontSizefont-sizeРазмер шрифта
marginTopmargin-topОтступ сверху относительно сообщения

MicrophoneButton

Свойство в настройкахCSS-свойствоОписание
opacityopacityНепрозрачность
borderWidthborder-widthТолщина границы
borderStyleborder-styleСтиль границы
borderColorborder-colorЦвет границы
backgroundSizebackground-sizeРазмер изображения на кнопке
backgroundImagebackground-imageПуть к изображению
circleOpacityopacityНепрозрачность в круге
circleBackgroundImagebackground-imageПуть к изображению в круге
circleBackgroundSizebackground-sizeРазмер изображения на кнопке в круге
circleBackgroundPositionbackground-positionПозиционирование изображения в круге
borderColorHoverborder-colorЦвет границы (при наведении)
backgroundImageHoverbackground-imageПуть к изображению (при наведении)

MicrophonePauseButton

Свойство в настройкахCSS-свойствоОписание
opacityopacityНепрозрачность
borderWidthborder-widthТолщина границы
borderStyleborder-styleСтиль границы
borderColorborder-colorЦвет границы
backgroundSizebackground-sizeРазмер изображения на кнопке
backgroundImagebackground-imageПуть к изображению
circleOpacityopacityНепрозрачность в круге
circleBackgroundImagebackground-imageПуть к изображению в круге
circleBackgroundSizebackground-sizeРазмер изображения на кнопке в круге
circleBackgroundPositionbackground-positionПозиционирование изображения в круге
borderColorHoverborder-colorЦвет границы (при наведении)
backgroundImageHoverbackground-imageПуть к изображению (при наведении)

Notification

Notification

Свойство в настройкахCSS-свойствоОписание
linkColorcolorЦвет текста ссылки
fontFamilyfont-familyСемейство шрифта
fontSizefont-sizeРазмер шрифта
fontStylefont-styleНачертание шрифта
colorcolorЦвет текста
marginmarginВнешние отступы
textAligntext-alignВыравнивание текста

NotificationsAllow

Свойство в настройкахCSS-свойствоОписание
backgroundColorbackgroundФон кнопки
colorcolorЦвет текста
paddingpaddingОтступ

Offline

Offline

Свойство в настройкахCSS-свойствоОписание
backgroundColorbackground-colorЦвет фона
maxWidthmax-widthМаксимальная ширина
textAligntext-alignВыравнивание текста
textColorcolorЦвет основного текста
textFontSizefont-sizeРазмер шрифта основного текста
textFontFamilyfont-familyСемейство шрифта основного текста
textFontWeightfont-weightНасыщенность шрифта основного текста
subtextColorcolorЦвет дополнительного текста
subtextFontSizefont-sizeРазмер шрифта дополнительного текста
subtextFontFamilyfont-familyСемейство шрифта дополнительного текста
subtextFontWeightfont-weightНасыщенность шрифта дополнительного текста
buttonMarginmarginВнешние отступы кнопки

Preloader

Preloader

Свойство в настройкахCSS-свойствоОписание
backgroundColorbackground-colorЦвет фона
spinnerBackgroundImagebackground-imageИзображение для прелоадера

Preview

Preview

Свойство в настройкахCSS-свойствоОписание
paddingpaddingВнутренние отступы
backgroundColorbackground-colorЦвет фона
colorcolorЦвет текста
fontSizefont-sizeРазмер шрифта
fontFamilyfont-familyСемейство шрифта
attachmentIconbackground-imageПиктограмма вложения-документа
buttonBackgroundImagebackground-imageИзображение для кнопки "Закрыть"
buttonWidthwidthШирина кнопки "Закрыть"
buttonHeightheightВысота кнопки "Закрыть"
quotedMessageBorderLeftborder-leftГраница слева для цитируемого сообщения
quotedMessageBorderRightborder-rightГраница справа для цитируемого сообщения
quotedMessageBorderTopborder-topГраница сверху для цитируемого сообщения
quotedMessageBorderBottomborder-bottomГраница снизу для цитируемого сообщения
quotedMessagePaddingpaddingВнутренние отступы цитируемого сообщения
quotedMessageWidthwidthШирина блока цитируемого сообщения
quotedMessageMarginmarginВнешние отступы цитируемого сообщения
quotedMessageFontFamilyfont-familyГарнитура текста цитируемого сообщения
quotedMessageColorcolorЦвет текста цитируемого сообщения
quotedMessageFontSizefont-sizeРазмер шрифта текста цитируемого сообщения
quotedMessageFontWeightfont-weightНасыщенность шрифта текста цитируемого сообщения
linkFontFamilyfont-familyГарнитура ссылки
linkFontSizefont-sizeРазмер шрифта ссылки
linkColorcolorЦвет текста ссылки
linkFontWeightfont-weightНасыщенность шрифта ссылки

QuickQuestions

QuickQuestions

Свойство в настройкахCSS-свойствоОписание
directiondirectionРасположение элементов. "row" (по умолчанию) - в ряд, "column" - колонкой
containerBackgroundbackgroundФон контейнера
buttonFontWeightfont-weightНасыщенность шрифта элемента
buttonFontSizefont-sizeРазмер шрифта элемента
buttonFontFamilyfont-familyСемейство шрифта элемента
buttonBorderRadiusborder-radiusСкругление углов элемента
buttonMarginmarginВнешние отступы элемента
buttonBorderborderГраница элемента
buttonBackgroundbackgroundФон элемента
buttonColorcolorЦвет текста элемента
buttonBorderHoverborderГраница элемента (при наведении)
buttonBackgroundHoverbackgroundФон элемента (при наведении)
buttonColorHovercolorЦвет текста элемента (при наведении)
buttonBorderActiveborderГраница элемента (при нажатии)
buttonBackgroundActivebackgroundФон элемента (при нажатии)
buttonColorActivecolorЦвет текста элемента (при нажатии)

ScrollButton

ScrollButton

Свойство в настройкахCSS-свойствоОписание
widthwidthШирина кнопки
heightheightВысота кнопки
backgroundSizebackground-sizeРазмер изображения на кнопке
backgroundImagebackground-imageПуть к изображению на кнопке
backgroundColorbackground-colorЦвет фона кнопки

ScrollButtonBadge

Свойство в настройкахCSS-свойствоОписание
colorcolorЦвет текста
fontFamilyfont-familyСемейство шрифта
fontSizefont-sizeРазмер шрифта
backgroundColorbackground-colorЦвет фона пузыря
heightheightВысота
widthwidthШирина для счетчика
toptopПозиционирование относительно верхнего края кнопки скролла

SendButton

Свойство в настройкахCSS-свойствоОписание
opacityopacityНепрозрачность
borderWidthborder-widthТолщина границы
borderStyleborder-styleСтиль границы
borderColorborder-colorЦвет границы
backgroundSizebackground-sizeРазмер изображения на кнопке
backgroundImagebackground-imageПуть к изображению
circleOpacityopacityНепрозрачность в круге
circleBackgroundImagebackground-imageПуть к изображению в круге
circleBackgroundSizebackground-sizeРазмер изображения на кнопке в круге
circleBackgroundPositionbackground-positionПозиционирование изображения в круге
borderColorHoverborder-colorЦвет границы (при наведении)
backgroundImageHoverbackground-imageПуть к изображению (при наведении)

SocialLinks

Свойство в настройкахCSS-свойствоОписание
paddingpaddingВнутренние отступы секции
backgroundColorbackground-colorЦвет фона секции
fontFamilyfont-familyСемейство шрифта
fontSizefont-sizeРазмер шрифта
colorcolorЦвет текста
cellWidthwidthШирина выделенного места под кнопку
buttonSizewidthРазмер кнопки (высота и ширина)
buttonBackgroundColorbackground-colorЦвет фона кнопки
buttonImageSizebackground-sizeРазмер изображения на кнопке

Typing

Typing

Свойство в настройкахCSS-свойствоОписание
avatarDisplaydisplayСпособ отображения аватара
colorcolorЦвет текста
opacityopacityНепрозрачность текста
fontSizefont-sizeРазмер шрифта
containerPaddingpaddingВнутренние отступы блока
containerBackgroundbackgroundЦвет фона блока
containerWidthwidthШирина блока
borderTopLeftRadiusborder-top-left-radiusСкругление верхнего левого угла
borderBottomLeftRadiusborder-bottom-left-radiusСкругление нижнего левого угла
borderTopRightRadiusborder-top-right-radiusСкругление верхнего правого угла
borderBottomRightRadiusborder-bottom-right-radiusСкругление нижнего правого угла
animationPreset-Тип анимации, целое число от 1 до 2

WebView

WebView

Свойство в настройкахCSS-свойствоОписание
backgroundColorbackground-colorЦвет фона
errorTextColorcolorЦвет сообщения об ошибке
errorTextFontSizefont-sizeРазмер шрифта сообщения об ошибке
errorTextFontFamilyfont-familyСемейство шрифта сообщения об ошибке
errorTextTextAligntext-alignВыравнивание текста сообщения об ошибке

WebWidget

Свойство в настройкахCSS-свойствоОписание
paddingpaddingВнутренние отступы
widthwidthImage width
heightheightImage height