Изменение стиля чат-виджета
Чтобы изменить стиль виджета, переопределите некоторые CSS классы на вашем сайте.
Ниже мы приводим примеры для некоторых компонентов виджета, стиль которых можно переопределить.
Заголовок виджета
.justwidget .justwidget--headline h2 {
font-size: 1em !important;
background-color: yellow !important;
color: black !important;
}
Размер и позиция виджета
Размер виджета
.justwidget {
width: 500px !important;
max-height: 300px !important;
}
Сместить виджет
.justwidget .justwidget_hidden {
right: auto !important;
left: 140px !important;
}
.justwidget {
left: 20px !important;
right: auto !important;
}
Иконка свернутого виджета
Изображение для иконки
.justwidget--asst-pic {
background-image: url('https://...jpg') !important;
}
.justwidget--asst-pic svg {
display: none;
}
Фон иконки свернутого виджета
.justwidget--asst-pic svg path {
fill: pink !important;
}
Размер иконки
.justwidget--asst-pic {
width: 100px !important;
height: 100px !important;
}
.justwidget--asst-pic-waves {
bottom: -105px !important;
border-width: 55px !important;
}
Аватары
Размер аватаров
.justwidget--message_cell .justwidget--image {
width: 20px !important;
height: 20px !important;
border-radius: 10px !important;
}
Аватар бота
.justwidget--message_asst .justwidget--image {
background-image: url('https://...jpg') !important;
}
.justwidget--message_asst .justwidget--image svg {
display: none;
}
Фон аватара бота
.justwidget--message_asst .justwidget--image svg path {
fill: red !important;
}
Аватар пользователя
.justwidget--message_user .justwidget--image {
background-image: url('https://...jpg') !important;
}
.justwidget--message_user .justwidget--image svg {
display: none;
}
Фон аватара пользователя
.justwidget--message_user .justwidget--image svg path {
fill: blue !important;
}
Имена и текст сообщений
Текст сообщений
.justwidget--message_content div {
font-style: italic !important;
}
Имена клиента и бота
.justwidget--message_content .justwidget--username {
text-transform: uppercase !important;
}
Имя и сообщения бота
.justwidget--message_asst .justwidget--message_content {
font-style: italic !important;
}
Имя и сообщения пользователя
.justwidget--message_user .justwidget--message_content {
font-style: italic !important;
}
Ввод и отображение сообщений
Поле ввода сообщения
.justwidget--text {
color: #000000 !important;
background: pink !important;
font-size: 1em !important;
}