---
title: "Configure the client"
url: https://docs.catalyst.zoho.com/en/tutorials/ecommerce-bot/deluge/configure-client/
description: "Configure a sales assistant bot for an ecommerce website using Catalyst ConvoKraft, Deluge functions, and Zoho CRM that manages users' orders."
last_updated: 2026-11-04T10:10:44Z
service: All Services
type: tutorial
related_links:
  - name: "ConvoKraft JS SDK"
    url: /en/convokraft/sdk/js/overview/
---

# 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](https://github.com/catalystbyzoho/tutorial-convokraft) 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. 

> **Note :** Please go through the code in each file to make sure you fully understand it.

Catalyst enables you to host the client part of the web application using the [Catalyst Web Client Hosting](https://docs.catalyst.zoho.com/en/cloud-scale/help/web-client-hosting/introduction/) component. We will be deploying the client to the console in the [next step](https://docs.catalyst.zoho.com/en/tutorials/ecommerce-bot/deluge/deploy-to-console/) 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 about.html file in your client directory and save it. We also offer a [ConvoKraft Javascript SDK](https://docs.catalyst.zoho.com/en/convokraft/sdk/js/overview/) package which contains pre-defined methods that can be quickly incorporated in your client application to customize the appearance of your ConvoKraft bot. 

```xml
<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>

```

> **Note :** When you replace the files in the zip the above code snippet will already be present in the `about.html` file. You will just have to add the correct values for the`bot-name`, `project-id` and `org-id` attributes in the above code. 

Open the EcommerceBot in the console and the Bots Details page, the namespace of the bot is the value of this `bot-name` attribute.
[https://console<span></span>.catalyst.zoho.com/baas/74779991/project/10644000000029001/Development#/convokraft/bots/50803000000018005](https://console.catalyst.zoho.com/baas/74779991/project/10644000000029001/Development#/convokraft/bots/50803000000018005)

Here "74779991" is the `orgID` and "10644000000029001" is the `projectID`.