Configure the Client

Lets now configure the client component. The client directory you initialized will contain:

• The index.html file for the HTML code of the frontend application
• The main.css for the CSS code
• The main.js file for the JavaScript code
• The client-package.json configuration file

You can download this zip, copy all the files in it and replace them with the default client files created in your client directory. This git repository contains additional files besides the default ones. We have the entire client code, and the required images and icon files all packed in this, you can simply download it as a zip file.

Catalyst enables you to host the client part of the web application using the Catalyst Web Client Hosting component. We will be deploying the client to the console along with the functions created earlier, in this step of the tutorial.

Embed the bot in the website

In order to embed the ConvoKraft bot in your application, please make sure you add the javascript code snippet given below in the contact.html file in your client directory and save it. We also offer a ConvoKraft Javascript SDK package which contains pre-defined methods that can be quickly incorporated in your client application to customize the appearance of your ConvoKraft bot.

    

        
copy
        

            

        
    
    

         <script src="https://console.catalyst.zoho.com/convokraft/assets/js/convokraft-chat-sdk.js">
</script>
<style>
div.anchor_zia_toBottom {
width: 330px;
height: 450px;
position: fixed;
bottom: 0;
right: 0;
}
</style>
<div class="anchor_zia_toBottom">
<convokraft-chat-bot bot-name="ecommercebot_2" project-id="10644000000029001" org-id="74779991">
</convokraft-chat-bot>
</div>

    

Take the URL of this page. It should appear as follows:

https://console.catalyst.zoho.com/baas/74779991/project/10644000000029001/Development#/convokraft/bots/50803000000018005

Here “74779991” is the orgID and “1064400000002900” is the projectID.