Skip to main content

Changing chat widget style

To change the widget style, redefine some CSS classes on your site.

Below we provide examples for some of the components of the widget, style of which you can override.

The icon background of the minimized widget​

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

The icon of the minimized widget​

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

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

The bot’s avatar background​

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

Bot’s avatar​

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

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

The user’s avatar background​

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

User’s avatar​

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

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

The size of the widget​

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

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

The bubble​

.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;
}

Size of the logo​

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

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

Messages text style​

.justwidget--message_content p {
    font-style: italic !important;
}

Buttons​

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

Size of the buttons​

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

Change submit button​

.justwidget--send a {
    background-image: url(http:....jpg);
    background-size: contain;
}

User’s and bot’s name​

.justwidget--message_content .justwidget--username {
    text-transform: uppercase !important;
}

Bot’s name and messages​

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

User’s name and messages​

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

Title of widget​

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

Message input field​

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

Widget offset​

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

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