A continuación se detallan los eventos que se pueden ejecutar a través de la librería SDK que permiten realizar distintos tipos de acciones con la Ventana de Chat. Por ejemplo, abrir y minimizar la ventana de chat, inicializar propiedades del usuario que está interactuando con dicha ventana, enviar un mensaje/consulta al bot (para que este responda), entre otras acciones.
Adicionalmente también es posible suscribirse a una serie de eventos para accionar luego de que el usuario interactúe con la Ventana de Chat. Por ejemplo, los clientes pueden medir en su propia herramienta de datos cada vez que un usuario hace clic sobre el botón de inicio.
Importante: recomendamos que esta documentación sea leída y utilizada por developers.
Para utilizar eventos del SDK se recomienda invocar el método ready del objeto $aivo:
$aivo.ready(function() { ... }).
Esto funcionará a modo de callback y disparará, inmediatamente después de finalizar las configuraciones iniciales de la ventana, los eventos que se encuentren dentro de la función pasada por parámetro.
A continuación se muestra un ejemplo de cómo sería el llamado. Y más adelante, se detallan todos los eventos y las acciones que realiza cada uno.
Ejemplo:
// include script without async attribute
<script type="text/javascript" src="https://cdn.agentbot.net/core/7c91324f0e1dcf0dcf4fd2dc7582bfaf.js" charset="UTF-8"></script>
<script type="text/javascript">
$aivo.ready(function() {
$aivo.user.set("name", "Steven Paul Jobs");
$aivo.user.set("device", "iPhone");
$aivo.chat.open();
$aivo.chat.addMessage("Welcome, how can I help you?");
});
</script>
Acciones sobre la ventana de Chat
+ Maximizar la ventana
Genera el maximizado de la ventana de chat.
Ejecución:
$aivo.chat.maximize();
+ Abrir la ventana de chat:
Abre la ventana de chat y oculta el botón de inicio.
Ejecución:
$aivo.chat.open();
+ Cerrar la sesión y la ventana de chat
Minimiza la ventana de chat y cierra la sesión. Vuelve a mostrar el botón de inicio.
Ejecución:
$aivo.chat.close();
+ Cerrar la ventana de chat (minimizar)
Minimizar la ventana de chat y mostrar el botón de inicio.
Ejecución:
$aivo.chat.minimize()
+ Setear estética y funcionalidad de la ventana de chat para Apps
Al ejecutar este comando, la ventana de chat sufre las siguientes modificaciones:
- No se visualizan las acciones de maximizar, minimizar y cerrar la ventana.
- No es posible arrastrar la ventana.
La ventana ocupa el 100% del ancho y alto disponible en caso que se esté ejecutando en un dispositivo móvil.
Ejecución:
$aivo.chat.embed();
+ Enviar un mensaje al usuario (como si lo enviase el bot)
Agregar un mensaje a la ventana de chat, el mismo se muestra como un mensaje del Bot.
Ejemplo:
$aivo.chat.addMessage("Hola cliente, soy AgentBot");
+ Enviar un mensaje al bot (como si lo enviase el usuario)
Agregar un mensaje a la ventana de chat, el mismo se muestra como un mensaje que hubiera enviado el usuario.
Ejemplo:
$aivo.chat.sendMessage("Hola, necesito ayuda");
+ Ocultar el Botón de Inicio
Oculta el botón de inicio en caso que el mismo esté visible.
Importante aclarar que si la ventana de chat se encuentra visible, este evento no realiza acción alguna. Primero debería se debería minimizar o cerrar la ventana (a través de los eventos “close” o “minimize”).
Ejecución:
$aivo.launcher.hide();
+ Ocultar la barra de minimizado en mobile
Permite ocultar la barra de minimizado en mobile
Ejecución:
Mostrar: $aivo.launcher.hideSticky(false)
Ocultar: $aivo.launcher.hideSticky(true)
+ Mostrar el Botón de Inicio
Si el botón de inicio fue ocultado previamente, a través de este evento se vuelve a visualizar.
Ejecución:
$aivo.launcher.show()
+ Eliminar el Botón de Inicio
Elimina el botón de inicio de forma permanente. Por lo que para volver a visualizar hay que cargar nuevamente el script de Aivo.
Ejecución:
$aivo.launcher.remove();
$aivo.launcher.remove();
+ Mostrar u ocultar el icono de cerrar chat (X)
Muestra y oculta el icono de Cerrar que se encuentra en el margen superior derecho del Header.
Ejecución:
$aivo.chat.showCloselcon(true); (muestra el icono)
$aivo.chat.showCloselcon(false); (oculta el icono)
Ejemplo desde embed:
showCloselcon(true) Muestra el icono
http://embed.agenbot.net/[name]/[token]?show_close_icon=true
showCloselcon(false) Oculta el icono
http://embed.agenbot.net/[name]/[token]?show_close_icon=false
Nota: Al ejecutar este eventos en embed la funcion cerrar solo se habilitara una vez se tenga interaccion con el bot y la configuracion de ese canal tenga activa la encuesta de satisfaccion. Una vez enviado a la encuesta la "X" desaparece y continua la funcionalidad que tengan adaptada cada embed para el cierre de la conversacion.
+ Evento para enviar a la encuesta de Satisfacción
El evento $aivo.chat.closeToSurvey() permite enviar a la encuesta de Satisfacción en los casos en que la encuesta esté activa y, además, exista una interacción con el bot.
Ejecución:
$aivo.chat.closeToSurvey()
+ Configurar título en Header de Zendesk
El evento setHeaderZendesk permite incorporar un texto en el header de la ventana de la derivación a Zendesk. El contenido a incorporar debe especificarse como string al ejecutar el evento. El texto hará referencia a la acción de cerrar la derivación.
Ejecución:
$aivo.chat.setHeaderZendesk(“title”)
Propiedades de Usuario
+ Definir propiedades del usuario
A través del evento es posible definir las propiedades del usuario que está interactuando con la ventana de chat (nombre, email, etc.).
Hay 2 formas de enviar los parámetros del usuario:
Vieja
$aivo.user.set('name',‘Pedro’)
$aivo.user.set('lastname', ‘Perez’)
Nueva
$aivo.user.set({
‘name’, ‘Pedro’,
‘lastname’: ‘Perez’
})
+ Obtener las propiedades del usuario
Tenemos 2 formas de obtener parametros del usuario
Implementación:
$aivo.user.get(); // Retorna datos desde localstorage
$aivo.user.get((data) => console.log(data)) // Retorna datos desde localstorage + apiUser
+ Eliminar el usuario y crear uno nuevo
A través del evento elimina el usuario (finalizando la sesión) y genera un nuevo usuario. Borrando también todas las propiedades de usuario que se hayan configurado.
Implementación:
$aivo.user.new();
+ Mostrar u ocultar ícono de adjuntar archivos al derivar
A través del evento se muestra y oculta el icono de adjuntar archivos al realizar una derivación. Este evento se puede ejecutar al iniciar la ventana.
Implementación:
Activar: $aivo.chat.entryMessage.showAttachButton()
Ocultar: $aivo.chat.entryMessage.hideAttachButton()
Propiedad Shadow Root del DOM
Mediante este evento podremos habilitar o deshabilitar el acceso a los elementos HTML dentro de la ventana. Para la implementación de evento debe realizarse fuera del $aivo.ready()
Ejemplo desde canal Web:
$aivo.shadowRoot(true): Mantiene bloqueado los elementos de la ventana dentro del DOM
$aivo.shadowRoot(false): Libera el acceso a los elementos de la ventana dentro del DOM
1 <script>
2 let scriptAivo = document.createElement("script");
3 const token = '2fbb16f72fb124ecbf35452d54d9cc59'
4 scriptAivo.classList="script-aivo"
5 scriptAivo.type = "text/javascript";
6 scriptAivo.src = `https://cdn.agentbot.net/core/latest/core.js?Myjagsd4wLjY===`;
7 scriptAivo.onload = function() {
8 $aivo.run(token)
9 $aivo.shadowRoot(false)
10 }
11 setTimeout(() => {document.getElementsByTagName("head")[0].appendChild(scriptAivo)},500)
12 </script>
Ejemplo desde embed:
ShadowRoot(closed) Mantiene bloqueado los elementos de la ventana dentro del DOM: http://embed.agenbot.net/[name]/[token]?shadow-aivo=true’
ShadowRoot(open) Libera el acceso a los elementos de la ventana dentro del DOM: embed.agenbot.net/[name]/[token]?shadow-aivo=false
Luego de esta implementación podemos obtener elementos del DOM con la siguiente instrucción: document.querySelector('#AgentAppContainer').shadowRoot.querySelectorAll([Selector])
Eventos de tipos Subscribe
¿Que es un evento Subscribe y para que puede utilizarse?
Los eventos subscribe son métodos JavaScript incorporados que toman el evento seleccionado y le permite ser escuchado cada vez que se genere su ejecución. Estas reciben un segundo argumento para llamar cada vez que se desencadena el evento descrito, este segundo argumento consiste en una función de tipo callback la cual permite ejecutar acciones del cliente y puede recibir parámetros dependiendo de cada evento.
Estos eventos pueden utilizarse, por ejemplo, para que los clientes midan en su propia herramienta de datos las interacciones de sus usuarios con la Ventana de Chat.
En el siguiente artículo se detallan estos eventos: Eventos de tipos Subscribe (SDK)