English

CUSTOMIZE CHAT WIDGET WITH CSS

Subiz is one of the few chat providers that user can easily customize everything on chat widget.

By using CSS code, you can touch to every single element on website’s chat widget. The term CSS refers to “Cascading Style Sheet”. This is a well-known phrase in web designing which used to adjust some web elements.

01
How can I customize css code ?

1. Log into Dashboard.subiz.com
2. Come to Settings > Chat widget > Themes
3. Right below some colorful squares, click on Customize

How can I customize css code ?
If you have any ideas or customization request, you can write us and send to [email protected] or chat with us at subiz.com
02
Customize font size and color of chat text
Customize font size and color of chat text
#subiz_desktop .supporter_content_chat, .visitor_content_chat {
color:red;font-size: 12px;
}
            

With this css code, you will change the color into Red - Font-size 12 px.

03
Change width of chat widget
#subiz_desktop .widget_body{width:160px;}
Change the height

160px is an example of width. You can adjust this number to fit your website

04
Change the height
#subiz_desktop .subiz_conversionin {height:300px!important;}
05
Align logo image

Before customizing, we recommend you to choose an image that:

How to upload logo

Align logo image
#subiz_desktop .logo_company {top:10px; right:10px;}
06
Add gradient style for chat widget color
Add gradient style for chat widget color

The basic color of chat widget is very boring. Some companies may want to make the widget more attractive and unique. In some case, they may have their logo in gradient style, so they painted the chat window to fit with this style.

#subiz_desktop .color_theme_default {
background-image:linear-gradient( to top right, #5d7dff, #3376ff);
}
            

#5d7dff, #3376ff are two colors you want to set for gradient style. Replace it by color code that you

07
Place a rounded avatar
Place a rounded avatar

The square frame of avatar is popular. You can differentiate your chat widget by rounding this picture.

You can round it with the css code in the follow:

#subiz_desktop .avatar_supporter {
border:0px;
}
#subiz_desktop .avatar_supporter img {
border-radius:27px;
}
#subiz_desktop .avatar_small {
border:0px;
border-radius:12px;
}
        

08
Hide the chat widget
Hide the chat widget
#subiz_desktop .button_chat_offline, .button_chat_online {opacity:0;}

You can keep online or offline button chat hidden

09
Insert background image appearing behind message
Thêm ảnh nền cho cửa sổ chat
#subiz_desktop  .subiz_conversionin {
background: url(".../img/picture.png") no-repeat center center;
}
            

The image URL must be absolute