Skip to main content

How to customize chat widget using CSS

Tovie DialogStudio has a visual editor for chat widget. You can use it to manage how the chat widget will look and behave. All settings are described here.

Still, if you prefer to build your design by hand or if maybe we’ve missed some settings when creating the visual editor, you can use CSS for the same purpose.

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

All these styles can be specified in the CSS file on your website.