Customize chat button

1. What is a chat button?

Chat button is the call-to-action image, it’s easy to let users know you’re available to help and chat online on Subiz widget. When users click on the chat button, the chat widget will open and start a new conversation.

Every business can actively design their owner chat button images to convey their own messages and give users exciting experience when visiting websites.

2. How to customize chat button

How to set up chat button: Login Subiz via App.subiz.com> Setting > Account > Widget > Customize chat button

Setting of Subiz widget

You can select to use a chat button from the button library, or upload your own custom button.

2.1. Use the button library

You select a button from the library and Save changes to finalize.

Customize chat button

2.2. Upload your custom button

To use your own custom button, you need a button image of your desire. The standard size of the button image is 240 x 120 px, type image is PNG or GIF.

How to upload your own button as followings:

  • Select Customize chat button

  • Upload custom button

  • Browse file or Drag file to upload > Click "X" to exit

  • Save changes to finalize

Upload your custom button

For some example buttons: button 1 - button 2 - button 3 - button 4

3. CSS code for button customization

To modify the look of custom button as your desire, copy the CSS styles from below and feel free to use it on your own as well.

Function of CSS

Widget type: Standard

Widget type: Full height

Button position to the foot of screen

(Maximum 150px)

.widget-button {bottom:0;}

.widget-button {bottom:0;}

Message preview position

(Maximum 110 px)

.button-chat .bubble-chat {

bottom: 75px;

}

.button-chat .bubble-chat {

bottom: 75px;

}

Widget position

(Maximum 140px)

.widget_mini .widget_body {bottom:0;}

.widget_full .widget_body {bottom:0;}

We are here for your help. Let us know if you have questions or concern!