---
title: "Configure the client"
url: https://docs.catalyst.zoho.com/en/tutorials/ecommerce-bot/nodejs/configure-client/
last_updated: 2025-11-07T11:51:15Z
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 along with the functions [created earlier](https://docs.catalyst.zoho.com/en/tutorials/ecommerce-bot/nodejs/configure-function/), in [this step](https://docs.catalyst.zoho.com/en/tutorials/ecommerce-bot/nodejs/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 `contact.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 :** Please make sure you replace the correct values for the bot name, project ID, and org ID attributes in the above code. Open the `EcommerceBot` in the console and in the Bots Details page, the namespace of the bot is the value of this `bot-name attribute`.

Take the URL of this page. It should appear as follows:
[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`.