Перейти к основному содержимому

Как настроить внешний вид чат-виджета с помощью CSS

В Aimylogic есть удобный графический конструктор, в котором вы можете настроить внешний вид вашего виджета, не прибегая к программированию. Мы написали отдельную статью о том, как им пользоваться.

Но также вы можете использовать CSS для настройки внешнего вида чат-виджета. Далее мы приводим примеры того, как можно изменить разные элементы с помощью 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;
}

Цвет пузыря сообщения

.justwidget--asst-bubble {
background-color: red !important; /* цвет фона */
background-image: none !important; /* убрать градиент */
}

.justwidget--bubble-arrow:before {
border-bottom-color: red !important; /* цвет стрелки */
}

Ширина сообщения

.justwidget--message_content {
max-width: 350px !important;
}

Кнопки

Фон и контур кнопок

.justwidget--button {
border-radius: 20px !important;
background-color: aqua !important;
}

Размер кнопок

.justwidget--button {
width: 30% !important;
padding: 2px !important;
}
.justwidget--buttons {
justify-content: flex-start !important;
}
.justwidget--button {
margin-right: 10px !important;
}

Изменить кнопку отправки

.justwidget--send a {
background-image: url(http:....jpg);
background-size: contain;
}
.justwidget--message a {
color: violet !important;
}
.justwidget--message a.quicklink {
color: red !important;
border-bottom: 1px dashed red !important;
}

Все или часть этих стилей вы можете описать в своем CSS-файле на сайте.