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

Catalyst te permite alojar la parte del client de la aplicación web usando el componente Catalyst Web Client Hosting. Desplegaremos el client en la consola en el siguiente paso 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 que contiene métodos predefinidos que pueden incorporarse rápidamente en tu aplicación client para personalizar la apariencia de tu bot de ConvoKraft.

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

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.catalyst.zoho.com/baas/74779991/project/10644000000029001/Development#/convokraft/bots/50803000000018005

Aquí “74779991” es el orgID y “10644000000029001” es el projectID.