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 :

    

        
copy
        

            

        
    
    

         <convokraft-chat-bot lt-prop-convokraft-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 :

    

        
copy
        

            

        
    
    

         <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 :

    

        
copy
        

            

        
    
    

         <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 :

    

        
copy
        

            

        
    
    

         <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 :

    

        
copy
        

            

        
    
    

         <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 asfalse.

Sample code :

    

        
copy
        

            

        
    
    

         <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 at the simultaneously while typing any message in the typing area. The value of this attribute can either be true or false.

Sample code :

    

        
copy
        

            

        
    
    

         <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 :

    

        
copy
        

            

        
    
    

         <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:

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

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

    

        
copy
        

            

        
    
    

         <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"}'>
</convokraft-chat-bot>