Chat Cordova
guía rápida de integración
Indice
¿Qué necesitas para la integración?
- Necesitarás el Channel key del proyecto, que es la clave que usa nuestro sistema para identificarlo, por lo que es única para cada proyecto.
- Para Android
- Android Studio
- Un dispositivo Android o emulador con los servicios de Google Play instalados para ejecutar la app
- Para iOS
- Xcode
- Un dispositivo con iOS para ejecutar la app
Integración
Este artículo muestra el desarrollo mínimo que hay que hacer para comenzar a utilizar el chat.
Nuestro Chat está disponible a través de npm.
npm (Node Package Manager) es un sistema de gestión de paquetes. Consiste en un cliente de línea de comandos y una base de datos en línea de paquetes públicos y privados.
Importar el plugin
Para importar el Chat a tu proyecto realiza estos pasos:
- Abre la consola y posicionate en la raíz del proyecto.
$ cd /PATH/TO/YOUR/PROJECT- Ejecuta esta línea en la consola para importar el plugin:
$ cordova plugin add indigitall-chat-cordova-plugin- Si se ha importado correctamente, debería estar el siguiente archivo en la ruta your_app/www/js/web-chat.js. Si no lo encuentras, añádelo en esa ruta manualmente descargándolo de aquí:
Inicialización del Chat
Inicializa el Chat con el método indigitall.chat.init() para comenzar a recibir notificaciones push. Esta inicialización debe realizarse dentro del index.html de tu proyecto. Para comprobar que la integración se ha realizado correctamente tendrás dos callbacks en la inicialización, un success con la correcta carga del chat y otro con el error en caso de que lo hubiera.
window.plugins.indigitall.chat.init({
channelKey: "your_channel_key",
//opciones personalizables
externalCode:"your_external_code",
titleChat: "your_title_chat",
botName:"your_bot_name",
defaultUserName:"your_default_username",
messagePlaceholder:"your_message_place_holder",
openFileText:"your_open_file_text",
primaryColor:"your_primary_color",
backgroundChatColor:"your_background_chat_color",
backgroundBarColor:"your_background_bar_color",
fullscreen:"bool",
zIndex: "your_z_index",
defaultChatIconResource: 'your_chat-bubble',
logLevel: WebChat.LogLevel.your_level,
infoContactTopBarTitle: 'your_title_top_bar_info_contact',
welcomeLabel:
{
title: 'your_title_welcome_label',
body: 'your_body_welcome_label',
icon: 'icon_welcome_label',
backgrounColor: 'your_color_welcome_label',
textColor: 'your_text_color_welcome_label',
closeIcon: 'your_close_icon_welcome_label',
closeIconBackGroundColor: 'your_backgrounColor_close_icon_welcome_label',
delay: 'your_delay_to_show_welcome_label'
},
chatAutoOpenTime: "your-chat_auto_open_time_in_seconds"
},()=>{
//DO SOMETHING
}, (error)=>{
//DO SOMETHING
});- channelKey es una cadena alfanumérica que identifica tu proyecto de indigitall.
Los siguiente campos son personalizados. Si no se agregan, el Chat mostrará los valores por defecto.
- externalCode es una cadena que identifique cada dispositivo.
- titleChat es una cadena con el título que quieres que se muestre en el chat.
- botName es una cadena con el nombre del bot que se mostrará encima de la burbuja del lado izquierdo.
- defaultUserName es una cadena con el nombre por defecto que tendrá el usuario y se mostrará encima de la burbuja del usuario.
- messagePlaceholder es una cadena con el mensaje que se muestra en el campo de texto donde hay que escribir.
- openFileText es una cadena con el texto que se mostrará en el caso se haya que descargar un archivo.
- backgroundChatColor es una cadena con el color de fondo del chat en hexadecimal.
- backgroundBarColor es una cadena con el color de fondo de la barra superior y de la inferior en hexadecimal.
- primaryColor es una cadena con el color principal del chat, botones e icono flotante en hexadecimal.
- fullscreen es un booleano donde indicas si quieres que el chat ocupe toda la pantalla(true) o tenga cierto margen del dispositivo(false).
- zIndex indicador numérico para posicionar el chat en el eje z.
- defaultChatIconResource es una referencia con el recurso de ícono que se muestra en el ícono principal del chat.
- logLevel indica el log que se puede mostrar
- infoContactTopBarTitle título de la vista de contacto
- welcomeLabel muestra un mensaje de bienvenida con los campos en formato JSON como en el ejemplo.
- chatAutoOpenTime es un entero que indica los segundos para que se abra automáticamente el chat. Si no se indica chatAutoOpenTime, como si pulsas la burbuja antes de que finalice el tiempo indiciado, el chat se podrá abrir de forma manual.
Funcionalidades
Puede verificar si el evento de bienvenida se ha activado con este método:
let isEmitted = window.plugins.indigitall.chat.isWelcomeEmitted((isEmitted) => {
//success
}, (error)=> {
//Log error
});
Si desea enviar un mensaje personalizado, puede utilizar este método:
window.plugins.indigitall.chat.setCustomEvent("Your_event", () => {
//success
}, (error)=> {
//Log error
});
También puedes controlar la acción de eliminar mensajes con este método:
window.plugins.indigitall.chat.clearAllMessages(() => {
//success
}, (error)=> {
//Log error
});
Changelog
[1.3.0] - 03/2022
Añadido
- Evento de welcome
- Borrar mensajes
[1.2.1] - 02/2022
Correciones
- Barra scroll de la lista interactiva
- Mensaje de usuario que sobrapasa el ancho
[1.2.0] - 01/2022
Añadido
- Campo Interactivo
- Opción abrir automáticamente el chat
[1.1.0] - 11/2021
Añadido
- Opción de mostrar contacto y localización
[1.0.3] - 03/2021
Correciones
- Añadir scripts para Ionic
[1.0.2] - 03/2021
Correciones
- Corregir hook name
[1.0.1] - 01/2021
Correciones
- Actualizar WebChat 1.1.1
[1.0.0] - 01/2021
Añadido
- Inicialización
Recursos
Comienza a automatizar tus comunicaciones gracias a nuestra API de administración