---
title: "Customization of a bot"
url: https://docs.catalyst.zoho.com/en/convokraft/sdk/js/customization-of-a-bot/
description: "Learn about the JS SDK package provided by the Catalyst ConvoKraft service that has the abilities to integrate powerful chat bot assistants in your Catalyst application."
last_updated: 2026-08-28T06:26:16Z
service: ConvoKraft
type: general
---

# Customization of the bot

The ConvoKraft JS SDK supports customizing several elements of the chat window to suit your application's specific requirements. The following attributes should be used in the **<convokraft-chat-bot>** tag within the `index.html` file of your  web application's source code :

* `lt-prop-convokraft-title`
* `show-convokraft-header`
* `bot-name`
* `lt-prop-conversation`
* `show-help`
* `show-typing-suggestions`
* `show-action-suggestions`
* `lt-prop-styles`

### lt-prop-convokraft-title

This attribute helps to set the title of the chat window UI. 

**Sample code :** 

```javascript
<convokraft-chat-bot lt-prop-bot-title="Ask convokraft">
</convokraft-chat-bot>

```

### show-convokraft-header

This attribute is used to let the ConvoKraft bot know whether the header of the chat window should be displayed or not. The value of this attribute can be `true` or `false` as per your requirement. By default, it is set to `true`. And if the value is set to `false`, the header of the chat window will not be displayed.

**Sample code :** 

```javascript
<convokraft-chat-bot lt-prop-convokraft-title="Ask convokraft" show-convokraft-header="false">
</convokraft-chat-bot>

```

### bot-name

By providing any specific bot name (bot namespace) as the value of this attribute, ConvoKraft will converse only with that particular bot.

**Sample code :** 

```javascript
<convokraft-chat-bot lt-prop-convokraft-title="Ask convokraft" bot-name = "ecommercebot" ></convokraft-chat-bot>

```

### lt-prop-conversation

This attribute helps to set the alignment of the messages in the bot conversation. The value of this attribute can be set to either `true` or `false`. 

* If `true`, all message conversations within the chat window would get converted to the conversation view (user messages are aligned to the right and ConvoKraft responses are aligned to the left of the chat window).

**Sample code :** 

```javascript
<convokraft-chat-bot lt-prop-convokraft-title="Ask convokraft" bot-name = "aqualordappointmentbooker" lt-prop-conversation="true">
</convokraft-chat-bot>

```

* If `false`, all message conversations within the chat window will be aligned to the left.

**Sample code :** 

```javascript
<convokraft-chat-bot lt-prop-convokraft-title="Ask convokraft" bot-name = "aqualordappointmentbooker" 
lt-prop-conversation="false">
</convokraft-chat-bot>

```

### show-help

This attribute can be used to enable a help icon to be adjacent to the typing area in the chat window. On clicking the help icon, an onboarding screen will be displayed.

The on-boarding screen contains the sample sentences or action suggestions configured for that ConvoKraft bot. The  value for this attribute can be `true` or `false`. By default, it is set as`false`. 

**Sample code :** 

```javascript
<convokraft-chat-bot lt-prop-convokraft-title="Ask convokraft" bot-name = "aqualordappointmentbooker" show-help="true">
</convokraft-chat-bot>

```

### show-typing-suggestions

This attribute is used to display the action suggestions simultaneously while typing any message in the typing area. The value of this attribute can either be `true` or `false`.

**Sample code :** 

```javascript
<convokraft-chat-bot lt-prop-convokraft-title="Ask convokraft" bot-name = "aqualordappointmentbooker" show-help="true" show-history="true" show-typing-suggestions="true">
</convokraft-chat-bot>

```

### show-action-suggestions

This attribute can be used to display the action suggestions at the end of each chat conversation. The value of this attribute can either be `true` or `false`.

If this attribute is enabled, the `show-typing-suggestions` attribute will be enabled automatically. 

**Sample code :** 

```javascript
<convokraft-chat-bot lt-prop-convokraft-title="Ask convokraft" bot-name = "aqualordappointmentbooker" show-help="true" show-history="true" show-action-suggestions="true">
</convokraft-chat-bot>

```

### lt-prop-styles

This attribute helps in configuring styles of the various elements in the chat window UI. The styles can be configured as follows:

<table class="content-table">
        <thead>
            <tr>
                <th>Attribute Name</th>
                <th>Usage</th>
                <th>Value</th>
                <th>Example</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>`headerBg`</td>
                <td>To set the background colour of the chat window header.</td>
                <td>The value for this style can be any color value.</td>
                <td>#5acc42</td>
            </tr>
            <tr>
                <td>`headerText`</td>
                <td>To set the text color of the chat window header.</td>
                <td>The value for this style can be any color value.</td>
                <td>black</td>
            </tr>
            <tr>
                <td>`headerFont`</td>
                <td>To set the font family of the chat window header text.</td>
                <td>The value for this style can be any font family name.</td>
                <td>sans-serif</td>
            </tr>
            <tr>
                <td>`userBg`</td>
                <td>To set the background colour of the user message container in the chat window.</td>
                <td>The value for this style can be any color value.</td>
                <td>#5acc42</td>
            </tr>
            <tr>
                <td>`userText`</td>
                <td>To set the text color of the texts in the user message container.</td>
                <td>The value for this style can be any color value.</td>
                <td>black</td>
            </tr>
            <tr>
                <td>`userFont`</td>
                <td>To set the font family of the texts in the user message container.</td>
                <td>The value for this style can be any font family name.</td>
                <td>Comic Sans MS</td>
            </tr>
            <tr>
                <td>`botBg`</td>
                <td>To set the background color of ConvoKraft message container in the chat window.</td>
                <td>The value for this style can be any color value.</td>
                <td>#ddd</td>
            </tr>
            <tr>
                <td>`botText`</td>
                <td>To set the text color of the texts in the convokraft message container.</td>
                <td>The value for this style can be any color value.</td>
                <td>#222</td>
            </tr>
            <tr>
                <td>`botFont`</td>
                <td>To set the font family of the texts in convokraft message container.</td>
                <td>The value for this style can be any font family name.</td>
                <td>Arial</td>
            </tr>
            <tr>
                <td>`bodyBg`</td>
                <td>To set the background colour of the chat window body.</td>
                <td>The value for this style can be any color value.</td>
                <td>#ddd</td>
            </tr>
            </tbody>
</table>

For the `lt-prop-styles` attribute, the styles and their values should be provided in JSON format, as depicted in the sample code below :

```javascript
&lt;convokraft-chat-bot  lt-prop-conversation="true" 
lt-prop-styles='{"headerBg":"#5acc42", "headerText":"black", "headerFont":"sans-serif", "userBg":"#5acc42", "userText":"black", "botBg":"#ddd", "botText":"#222", "userFont":"Comic Sans MS", "botFont":"Arial", "bodyBg":"#ddd"}'&gt;
&lt;/convokraft-chat-bot&gt;

```