It is possible to customize the text, color and positioning of the chat button, the button used to initiate a chat on your website.

The default design of the button is white text and a white icon on a black background. When a website visitor moves the mouse over the button, the text and background colors switch places to highlight that the button can be interacted with.

To customize the button, the script included on your website must be updated. This script is copied from "Copy and paste this code", found on the Settings page for your Chat flow.

Code example

Example button with a blue background and turquoise text

The color of the icon will be the same as the text color, unless a specific color for the icon is specified.

<script>
  (function(w){
    w.$kundo_chat=w.$kundo_chat||{};
    w.$kundo_chat.widget_styles = {
      background_color: "blue",
      text_color: "#40e0d0"
   };
  }(this));
</script>

The available chat button settings are:

{
  // Background color for the button (Kundo-blue)
  background_color: "#25bfda",
  // Text color for the button (white) - will also affect the color of the icon
  text_color: "#ffffff",
  // Where to display the button ("left" or "right" side of the website)
  align_side: "left",
  // Set the distance from the browser window border to the chat
  // button (only valid for web browser windows wider than 600px)
  offset: "50px",
  vertical_offset: "50px",
}

Change button texts

You can change the text written on the button. START_TEXT is the text displayed before a user clicks the button. LOADING_TEXT is the text displayed after a user has clicked the button and before the chat window has opened.

<script>
  (function(w){
    w.$kundo_chat=w.$kundo_chat||{};
    w.$kundo_chat.custom_texts = {
      START_TEXT: "Click To Chat,
      LOADING_TEXT: "Loading Chat",
    }
  }(this));
</script>

If you do not wish to display any text at all on the button, it is possible to achieve by entering a space as the value; START_TEXT: " "