---
title: "Configurar el client"
url: https://docs.catalyst.zoho.com/es/tutorials/ecommerce-bot/deluge/configure-client/
description: "Configura un bot asistente de ventas para un sitio web de ecommerce con Catalyst ConvoKraft, funciones Deluge y Zoho CRM que gestionará los pedidos."
last_updated: 2026-11-04T10:10:44Z
service: All Services
type: tutorial
related_links:
  - name: "ConvoKraft JS SDK"
    url: /es/convokraft/sdk/js/overview/
---

# Configurar el Client 

Ahora configuremos el componente client. El directorio del client que inicializaste contendrá: 

* El archivo `index.html` para el código HTML de la aplicación frontend
* El `main.css` para el código CSS
* El archivo `main.js` para el código JavaScript
* El archivo de configuración `client-package.json`

Puedes descargar este zip, copiar todos los archivos en él y reemplazarlos con los archivos predeterminados del client creados en tu directorio del client. Este [repositorio de git](https://github.com/catalystbyzoho/tutorial-convokraft) contiene archivos adicionales además de los predeterminados. Tenemos todo el código del client, y las imágenes e íconos requeridos empaquetados en él, puedes simplemente descargarlo como archivo zip. 

> **Nota:** Por favor, revisa el código en cada archivo para asegurarte de que lo comprendes completamente.

Catalyst te permite alojar la parte del client de la aplicación web usando el componente [Catalyst Web Client Hosting](https://docs.catalyst.zoho.com/es/cloud-scale/help/web-client-hosting/introduction/). Desplegaremos el client en la consola en el [siguiente paso](https://docs.catalyst.zoho.com/es/tutorials/ecommerce-bot/deluge/deploy-to-console/) del tutorial.

### Integrar el bot en el sitio web 

Para integrar el bot de ConvoKraft en tu aplicación, asegúrate de agregar el fragmento de código JavaScript que se muestra a continuación en el archivo about.html en tu directorio del client y guárdalo. También ofrecemos un paquete [SDK de Javascript de ConvoKraft](https://docs.catalyst.zoho.com/es/convokraft/sdk/js/overview/) que contiene métodos predefinidos que pueden incorporarse rápidamente en tu aplicación client para personalizar la apariencia de tu bot de ConvoKraft. 

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

```

> **Nota:** Cuando reemplaces los archivos del zip, el fragmento de código anterior ya estará presente en el archivo `about.html`. Solo tendrás que agregar los valores correctos para los atributos `bot-name`, `project-id` y `org-id` en el código anterior. 

Abre el EcommerceBot en la consola y la página de Bots Details, el namespace del bot es el valor de este atributo `bot-name`.
[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)

Aquí "74779991" es el `orgID` y "10644000000029001" es el `projectID`.