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

Изменение стиля чат-виджета

Чтобы изменить стиль виджета, переопределите некоторые CSS классы на вашем сайте.

Ниже мы приводим примеры для некоторых компонентов виджета, стиль которых можно переопределить.

Фон иконки свернутого виджета​

.justwidget--asst-pic svg path {
    fill: pink !important;
}

Иконка свернутого виджета​

.justwidget--asst-pic {
    background-image: url('https://...jpg') !important;
}

.justwidget--asst-pic svg {
    display: none;
}

Фон аватара бота​

.justwidget--message_asst .justwidget--image svg path {
    fill: red !important;
}

Аватар бота​

.justwidget--message_asst .justwidget--image {
    background-image: url('https://...jpg') !important;
}

.justwidget--message_asst .justwidget--image svg {
    display: none;
}

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

.justwidget--message_user .justwidget--image svg path {
    fill: blue !important;
}

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

.justwidget--message_user .justwidget--image {
    background-image: url('https://...jpg') !important;
}

.justwidget--message_user .justwidget--image svg {
    display: none;
}

Размер виджета​

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

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

Пузырь​

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

.justwidget--bubble-arrow:before {
    border-bottom-color: red !important;  /*цвет стрелки пузыря*/
}
.justwidget--message a.quicklink {
    color: red !important;
    border-bottom: 1px dashed red !important;
}
.justwidget--message a {
    color: violet !important;
}

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

.justwidget--asst-pic {
    width: 100px !important;
    height: 100px !important;
}

.justwidget--asst-pic-waves {
    bottom: -105px !important;
    border-width: 55px !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 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;
}