---
title: "Configurar el client"
url: https://docs.catalyst.zoho.com/es/tutorials/ecommerce-bot/nodejs/configure-client/
last_updated: 2026-03-20T16:21:56Z
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 archivo `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 que contiene y reemplazarlos con los archivos de client predeterminados creados en tu directorio de 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 necesarios empaquetados en él, simplemente puedes descargarlo como un 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 utilizando 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 junto con las funciones [creadas anteriormente](https://docs.catalyst.zoho.com/es/tutorials/ecommerce-bot/nodejs/configure-function/), en [este paso](https://docs.catalyst.zoho.com/es/tutorials/ecommerce-bot/nodejs/deploy-to-console/) del tutorial.

### Incrustar el bot en el sitio web 

Para incrustar el bot de ConvoKraft en tu aplicación, asegúrate de agregar el fragmento de código JavaScript proporcionado a continuación en el archivo `contact.html` en tu directorio de 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 de 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:** Asegúrate de reemplazar los valores correctos para los atributos de nombre del bot, ID del proyecto e ID de la organización en el código anterior. Abre el `EcommerceBot` en la consola y en la página de detalles del bot, el espacio de nombres del bot es el valor de este atributo `bot-name`.

Toma la URL de esta página. Debería aparecer de la siguiente manera:
[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`.