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.

Widget title​

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

Widget size and location​

Widget size​

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

Widget offset​

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

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

Minimized widget icon​

Icon image​

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

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

Icon background​

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

Icon size​

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

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

Avatars​

Avatar size​

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

Bot avatar​

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

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

Bot avatar background​

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

User avatar​

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

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

User avatar background​

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

Names and message text​

Message text​

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

Bot and user names​

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

Bot name and messages​

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

User name and messages​

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

Message input and display​

Message input field​

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

Message bubble color​

.justwidget--asst-bubble {
    background-color: red !important;    /* background color */
    background-image: none !important;   /* remove gradient */
}

.justwidget--bubble-arrow:before {
    border-bottom-color: red !important;  /* arrow color */
}

Message width​

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

Buttons​

Button background and border​

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

Button size​

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

Modify send button​

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