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

Как настроить внешний вид чат-виджета с помощью 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-файле на сайте.