# Customization

## Overview

Kommunicate chat widget is where your users will chat and interact with your team. You can customize the theme, look and feel of the chat widget to fit with your brand's theme. You can either do it through Kommunicate Dashboard or add your own customization code manually.

## Chat widget customization

You can change the primary color of your chat widget to your choice of color. The primary color of the elements inside the chat widget will also be changed to that color.

You can also change the chat launcher icon from our given list of multiple icons. You will find these settings in [Kommunicate Dashboard -> Chat widget](https://dashboard.kommunicate.io/settings/chat-widget-customization).

If you are in one of our paid plans, you can also upload your own image/icon and use as your customized chat launcher icon. Though, there are no hard restrictions of the shape of the image you want to use as the chat widget launcher icon, square images are preferred over others.

## Customize chat widget by using CSS

Alternatively, you can pass custom CSS to customize the chat widget. Pass the CSS in `Kommunicate.customizeWidgetCss()` method as a string like shown in the example below.

```
var kommunicateSettings = {
    ...
    "onInit": function() {
        var css = "";        
        Kommunicate.customizeWidgetCss(css);
    },
    ...
}
```

#### To change sent messages color

```
Example : 

var cssChanges = ".mck-msg-right .mck-msg-box{background-color: blue!important;color:yellow!important;}";
Kommunicate.customizeWidgetCss(cssChanges);

```

#### To change received messages color

```
Example :

var cssChanges = ".mck-msg-left .mck-msg-box{background-color: blue!important;color:yellow!important;}";
Kommunicate.customizeWidgetCss(cssChanges);

```

#### To show/hide the chat widget

To hide the chat widget on page load, pass the following code inside the onInit function as given below:

```
"onInit": function () {
    Kommunicate.displayKommunicateWidget(false);
}
```

#### To disable the chat widget textarea

To hide the chat widget input textarea, pass the following code inside the onInit function as given below:

```
KommunicateGlobal.document.querySelector(".mck-box-form.mck-row").style.visibility="hidden";
KommunicateGlobal.document.querySelector(".mck-box-form.mck-row").style.display="none";
```

Example: To disable the chat widget textarea

```
    (function(d, m){
        var kommunicateSettings = 
            {"appId":"APP_ID","popupWidget":true,"automaticChatOpenOnNavigation":true,
         "onInit": function (){
            KommunicateGlobal.document.querySelector(".mck-box-form.mck-row").style.visibility="hidden"
            KommunicateGlobal.document.querySelector(".mck-box-form.mck-row").style.display="none"
            }
          }
        var s = document.createElement("script")
        s.src = "https://widget.kommunicate.io/v2/kommunicate.app"
        var h = document.getElementsByTagName("head")[0]
        window.kommunicate = m; m._globals = kommunicateSettings;
    })(document, window.kommunicate || {})
```

#### Hide (online/offline) status of agents on the web plugin

Please add the following code under "onInit" function

```
Kommunicate.customizeWidgetCss("div#mck-agent-status-text { display: none !important; } span.mck-agent-status-indicator { display: none !important }");
```

Example: To hide status if agents

> NOTE: Replace "APP\_ID" with the application Id that you get from <https://dashboard.kommunicate.io/settings/install>

```
(function(d, m){
var kommunicateSettings = {"appId":"APP_ID","popupWidget":true,"automaticChatOpenOnNavigation":true,"onInit": function() { 
Kommunicate.customizeWidgetCss("div#mck-agent-status-text { display: none !important; } span.mck-agent-status-indicator { display: none !important }");
}};
var s = document.createElement("script"); s.type = "text/javascript"; s.async = true;
s.src = "https://widget.kommunicate.io/v2/kommunicate.app";
var h = document.getElementsByTagName("head")[0]; h.appendChild(s);
window.kommunicate = m; m._globals = kommunicateSettings;
})(document, window.kommunicate || {});
```

#### To change chat pop-up widget text

```
Example :

var css = ".chat-popup-widget-text{color:red!important;}"
Kommunicate.customizeWidgetCss(css);

```

#### To change chat pop-up background color

```
Example :

var css = ".chat-popup-widget-container{background-color: blue!important;}"
Kommunicate.customizeWidgetCss(css);

```

#### To change chatwidget top header color

```
Example :

var css = ".mck-box-top {background-color: red!important;}"
Kommunicate.customizeWidgetCss(css);

```

#### To add extra characters to the bot name

```
Example :

var css = ".mck-tab-title{max-width:170px!important}"
Kommunicate.customizeWidgetCss(css);

```

#### Show the chat widget on click of a button:

Use the below mentioned code to show the chat widget on click of a button

```
<script type="text/javascript">
function openChat() {
    Kommunicate.displayKommunicateWidget(true); 
}
script>


<input type="button" value="HELP" id="button" disabled="true" onclick="openChat()">

```

#### Example : To show the chat widget on click of a button

```
<html>
<body> 
<script type="text/javascript">  
function openChat() {
   Kommunicate.displayKommunicateWidget(true);
   Kommunicate.launchConversation();
}
(function(d, m){
        var kommunicateSettings = {"appId":"APP_ID","popupWidget":true,"automaticChatOpenOnNavigation":true,
        
        "onInit": function()
        {
            Kommunicate.displayKommunicateWidget(false);
            document.getElementById("button").disabled=false;
        }
       }
        var s = document.createElement("script"); s.type = "text/javascript"; s.async = true;
        s.src = "https://widget.kommunicate.io/v2/kommunicate.app";
        var h = document.getElementsByTagName("head")[0]; h.appendChild(s);
        window.kommunicate = m; m._globals = kommunicateSettings;
      })(document, window.kommunicate || {});
script>
<input type="button" style="background-color:#5553B7;color:white;width:250px;
height:70px;" value="CHAT SUPPORT" id="button" disabled="true" onclick="openChat()"/>
body>
html>
```

### Greeting message for different web pages

To override the message of the greeting pop up and to enable or disable it via code, use the following app options.

```
<script type="text/javascript">
  ...
    

     var kommunicateSettings = {
      "appId": "",  
      ...
      "appSettings": {
        "chatWidget": {
          "popup": false           
        },
        "chatPopupMessage": [{
          "message": "Overridden message", 
          "delay": 5000                    
        }]
      },
      ...
    };

    
  ...
script>
```

The limit for [Greeting message](https://dashboard.kommunicate.io/settings/greeting-message) for option 1 and option 2 are 35 characters and 150 characters respectively.

### Welcome message for different web pages

Following code snippet will help you in setting the welcome message for different web pages.

```
        var pagelist = {
            "PAGE URL1": "WELCOME MESSAGE FOR PAGE-1",
            "PAGE URL2": "WELCOME MESSAGE FOR PAGE-2"
        }

        

      
                var defaultSettings = {
                    "WELCOME_MESSAGE": pagelist[window.location.pathname]
            
                }

                if (pagelist[window.location.pathname]) {
                    Kommunicate.updateSettings(defaultSettings);
                }
            }
```

Check the complete sample code in our [repository](https://github.com/Kommunicate-io/Kommunicate-Web-SDK/blob/master/example/set-welcome-message.html), this will help you with placing the above code in the right section.

> NOTE: Do not forget to add your APP\_ID, page URL, and welcome message before using the sample code mentioned in the repository.

## Full screen chat widget

To make the chat widget full screen or to add it in a container, follow the instructions given in the readme of [Kommunicate-Live-Chat-Plugin](https://github.com/Kommunicate-io/Kommunicate-Live-Chat-Plugin/tree/master/kommunicate-script-example)

## Default metadata

You can pass on additional information as metadata with every message. Add `defaultMessageMetaData` parameter in `kommunicateSettings` variable. Below is the example of how you can send metadata:

```
var kommunicateSettings = {
    ...
    "defaultMessageMetaData":{"key1":"value1", "key2":"value2", ...}
    ...
};

```

> Note: You can also update metadata using [KM\_CHAT\_CONTEXT](https://docs.kommunicate.io/docs/web-botintegration#pass-custom-data-to-bot-platform).

## Events

To get real time updates regarding message sent and delivered you can subscribe to **onMessageSent** & **onMessageReceived** events.

1. **onMessageSent** : This event gets triggered when the message is sent by the user.
2. **onMessageReceived** : This event gets triggered when a new message is received by the user.

### Example on how to subscribe to events

To subscribe to events you need to call Kommunicate.subscribeToEvents(events) function and pass the events object in it.

```
var kommunicateSettings = {
    ...
    "onInit": function () {
        var events = {
            'onMessageReceived': function (resp) {
            console.log(resp);
            
            },
            'onMessageSent': function (resp) {
            console.log(resp);
            
            }
        };
        Kommunicate.subscribeToEvents(events);
    },
    ...
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.flexmoney.uk/documentation/docs/customization.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.