Customize Subiz chat widget on mobile

On mobile devices, Subiz chat widget is responsively designed to enhances the customer experience while chatting and surfing web.

1. Some notes about Subiz widget on mobile devices

  • Chat button displays on mobile device the same on PC devices.
  • You can customize the chat button on your phone with the CSS code.
  • When you click the chat button, the chat windown will open full.
  • The chat window will display about 90% of the mobile screen, not full of screen.
  • You can customize the appearance settings of the chat window with CSS
  • New message will be noticed by red number on chat button, not open full chat window.
Subiz widget on mobile

2. How to customize mobile widget with CSS

To customize mobile widget with CSS, Sign in to > Setting > Account > Subiz Widget > Customize CSS > Copy below CSS code and paste it on box of CSS customize:
Box of CSS customize
> Save Changes at box of CSS customize > Save Changes at Widget Setting

2.1 CSS for chat widget appearance on mobile

  • To change color of widget and chat button, copy the following code and paste on box of CSS customize:
    .widget_mobile .color_theme_default {
    background-color: #0000;
  • You can change only color of widget header with CSS code below:
    .widget_mobile .widget-header {
    background-color: #0000;
  • If you wish to personalize your chat widget with your custom color of message body, you can use this CSS code:
    .widget_mobile .message-body {
    background-color: #0000;
  • You can change color of button of Start a conversation with the following CSS code:
    .widget_mobile .add-new-conversation {
    background-color: #0000;
  • Adjust the height of chat widget according to the height of mobile screen .widget_mobile .widget_body {height: 90%;}
  • Hide chat widget on mobile devices .widget_mobile {display: none; }

2.2 CSS for chat button on mobile

  • You want your mobile chat button more eye-catching, use this CSS code: You can change image URL, size of chat button
    .widget_mobile .button-chat {
    background-image: url(;
    .widget_mobile .widget-button {
    width: 60px; height: 60px;
  • To make your chat widget taller or shorter according to screen bottom, you can use this CSS code: + If chat widget is on the right of website: .widget_mobile .widget-button {bottom:40px;right:40px;}
+ If chat widget is on the left of website: widget_mobile .widget-button { bottom:0; left:0; }
  • Hide chat button on mobile devices .widget_mobile .button-chat {
    display: none; }
You have any questions or concerns, please send us email via [email protected]!