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
02
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;}
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:
- Size: <= 200Kb
- Dimension: 100 x 35 px
How to upload logo
#subiz_desktop .logo_company {top:10px; right:10px;}
06
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
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;
}
- avatar_supporter is big profile picture placed on the top left corner of the chat widget
- avatar_small is smaller picture that go along with the chat message on the body of chat widget.
08
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
#subiz_desktop .subiz_conversionin {
background: url(".../img/picture.png") no-repeat center center;
}
The image URL must be absolute