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

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

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

Но также вы можете использовать CSS для настройки внешнего вида чат-виджета. Далее мы приводим примеры того, как можно изменить разные элементы с помощью CSS.

Размер логотипа​

.justwidget--asst-pic {
    width: 100px !important;
    height: 100px !important;
}
.justwidget--asst-pic-waves {
    bottom: -105px !important;
    border-width: 55px !important;
}

Размер диалогового окна​

.justwidget.sided .justwidget--inner {
   width: 500px !important;
}
.justwidget.sided {
   max-height: 300px !important;
}

Текст сообщений​

.justwidget--message_content p
{
    font-style: italic !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_content .justwidget--username {
    text-transform: uppercase !important;
}

Имя и сообщения бота​

.justwidget--message_asst .justwidget--message_content {
    color: red !important;
}

Имя и сообщения пользователя​

.justwidget--message_user .justwidget--message_content {
    color: blue !important;
}

Аватары​

.justwidget--message_cell .justwidget--image {
    width: 20px !important;
    height: 20px !important;
    border-radius: 10px !important;
}

Аватар бота​

.justwidget--message_asst .justwidget--image {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAEFCu8CAAAAAXNSR…Kzs7MPBaQPFJJ3RBoRrYU9rUHKjNZ/ytgvejO9FO3+RIv5X7Vtp94iw6RcAAAAAElFTkSuQmCC) !important;
}

Аватар пользователя​

.justwidget--message_user .justwidget--image {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIW…fbhyVJ6hBFsR3g/v7+o2EYR3d3d+8KhUJwbm6uZjn+HQA9sYxA5bR6kwAAAABJRU5ErkJggg==) !important;
}
.justwidget--message_asst .justwidget--image svg {
            display: none;
}

Аватар пользователя фон​

.justwidget--message_user .justwidget--image svg path {
   fill: blue !important;
}
.justwidget--message a.quicklink {
   color: red !important;
   border-bottom: 1px dashed red !important;
}
justwidget--message a {
  color: violet !important;
}

Заголовок виджета​

.justwidget h1.justwidget--headline {
    font-size: 1em !important;
    background-color: yellow !important;
    color: black !important;
}

Поле ввода сообщения​

.justwidget--text {
    color: #000000 !important;
    background: pink !important;
    font-size: 1em !important;
}

Сместить виджет​

.justwidget.sided.justwidget_hidden {
right: auto !important;
left: 140px !important;
}
.justwidget.sided {
left: 20px !important;
right: auto !important;
}

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