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

Catalyst te permite alojar la parte del client de la aplicación web utilizando el componente Catalyst Web Client Hosting. Desplegaremos el client en la consola junto con las funciones creadas anteriormente, en este paso 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 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.

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

Toma la URL de esta página. Debería aparecer de la siguiente manera: https://console.catalyst.zoho.com/baas/74779991/project/10644000000029001/Development#/convokraft/bots/50803000000018005

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