Skip to main content

How to customize chat widget using CSS

Aimylogic 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.

Logo size​

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

Dialog window size​

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

Messages​

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

Buttons​

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

Button sizes​

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

Change the Send button​

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

Names of the bot and the client​

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

Bot’s name and messages​

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

Client’s name and messages​

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

Avatars​

.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(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAEFCu8CAAAAAXNSR…Kzs7MPBaQPFJJ3RBoRrYU9rUHKjNZ/ytgvejO9FO3+RIv5X7Vtp94iw6RcAAAAAElFTkSuQmCC) !important;
}

User avatar​

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

User avatar background​

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

Widget title​

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

Message entry field​

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

Move widget​

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

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