Manual componente WEB
ÍNDICE
- Elementos del componente
- Barra superior
- Panel de conversaciones
- Panel de mensajes
1. Elementos del componente
El componente consta de los siguientes elementos:
- Barra Superior.
- Panel de Conversaciones
- Panel de mensajes
- Organización por carpetas
2. Barra superior
La barra superior está dividida en dos partes.
2.1 Primera parte de la barra superior
En la Primera parte tenemos un icono que nos permite ocultar o mostrar el panel de carpetas/etiquetas:
A continuación veremos el nombre del empleado que está usando el servicio y dos iconos, el de sustitutos/delegados y el de Nuevo Chat/grupo
2.1.1 Sustitutos/delegados
El primer icono 
se mostrará sólo en caso de que la funcionalidad de sustitutos esté activa y el empleado tenga activa la sustitución de alguien.
En este caso, se puede mostrar un icono azul indicando que alguna de las personas a las que puede sustituir tiene mensajes sin leer:
En caso de querer acceder a los mensajes de una de estas personas basta con seleccionarlo en la lista:
En este caso cambiará el nombre del empleado que se muestra, un icono adicional 
para indicar que estamos viendo los mensajes de una de las personas a la que sustituimos. Y en caso de pulsar en este icono volveremos a los mensajes del empleado inicial.
2.1.2 Nuevo chat/grupo
El segundo icono 
nos da acceso a la agenda de contactos y a los grupos:
La opción de Nuevo chat, nos mostrará la agenda de contactos a los que tengo acceso como empleado:
En el título de la ventana veremos que pone "Nuevo chat" y veremos los contactos a los que tenemos acceso con su número de teléfono y el producto de interés en caso de tener configurada esa funcionalidad.
2.2 Segunda parte de la barra superior
En la segunda parte de la barra superior tenemos como elementos comunes: la posibilidad de ocultar las conversaciones, la referencia al chat activo, el buscador general, la configuración del componente y la posibilidad de minimizarlo.
2.2.1 Ocultar las conversaciones
El icono 
nos permite ocultar la lista de conversaciones para entrarnos en la actual y en caso de tener un indicativo rojo nos indica que tenemos mensajes sin leer en algunas de las conversaciones que tengo asignadas.
2.2.2 Copiar el teléfono del cliente
El icono 
, al lado del nombre del cliente, nos permite copiar en el portapapeles el número de teléfono de este.
2.2.3 Buscador global
El icono 
es un buscador global. Este buscador permite buscar tanto en conversaciones, mensajes y adjuntos:
Al introducir un termino de búsqueda nos devolverá el contacto, junto con los mensajes donde ha encontrado el termino a buscar, en caso de que la búsqueda retorne información veremos el resultado en tres pestañas (mensajes, audio e imágenes/documentos):
| Mensajes |
Audios |
Imágenes/documentos |
 |
|
|
2.2.4 Configuración
El icono 
nos permite configurar algunos elementos del componente, acceder a una ayuda rápida así como ver la versión que estamos usando:
 |
|
|
Tamaño de la fuente |
|
|
Al pulsar se nos desplegará una pequeña ayuda sobre el uso del componente, así como la explicación de los iconos que aparecen en los mensajes. |
|
|
Debido a la importancia de este tema hemos añadido un enlace al artículo de nuestra Wiki en caso de que el usuario nos deba aceptar los permisos para comunicarnos con él por WhatsApp |
|
|
Ajusta el componente al tamaño máximo de la ventana del navegador. |
|
|
Activa el modo oscuro o claro en el componente |
|
|
Si hemos desplegado una nueva versión del componente veremos este mensaje. Al pulsar sobre él iremos al artículo de nuestra Wiki donde explicamos los cambios que hay |
|
|
El icono el verde nos indica que estamos conectados al sistema correctamente, un punto rojo que estamos desconectados, en este caso deberíamos refrescar la página. También podemos ver la versión del componente que estamos usando |
|
|
El sistema dispone de un sistema global de notificaciones que se puede usar en caso de necesitar informar a los usuarios de alguna asunto importante. En este caso el icono de configuración aparecerá una notificación en naranja indicando el número de mensajes que hay y al desplegarlo veremos la palabra notificaciones. Al pulsar en "Notificaciones" se abrirá un diálogo donde podemos leer los mensajes:
|
2.2.5 Minimizar
El icono 
nos permite minimizar el componente. En este caso el componente se colocará en la esquina inferior derecha.
2.2.5.1 El icono minimizado
Cuando el componente está minimizado va actualizando periódicamente los contadores de mensajes no leídos con dos indicaciones:
En rojo los mensajes no leídos propios: 
En azul los mensajes no leídos de las personas a las que sustituyo: 
El icono 
nos permite cerrar el componente y por tanto no tener acceso a él. En este caso, sólo podremos volver a tener acceso a el si refrescamos la página.
3. Panel de conversaciones
En el panel de conversaciones encontraremos todos los chats que hemos tenido. Cuando se configura la plataforma se define el tiempo máximo de conversaciones a mostrar:
Vamos a ir explicando cada elemento:
|
|
Buscador de contactos con los que hayamos tenido una conversación. |
|
|
Acceso a todas las conversaciones. |
|
|
Acceso a las conversaciones no leídas y el contador de estas. |
|
|
Conversación con un contacto. El icono representa la inicial del contacto. Se muestra el teléfono del contacto así como el nombre del producto sobre el que ha mostrado interés en caso de haber sido facilitado. La fecha mostrada puede:
|
|
|
Conversación con un grupo, con un mensaje sin leer. En este caso el icono cambia de la inicial del contacto a un icono de grupo. |
|
|
Conversación con un contacto donde el sentimiento detectado es positivo. |
|
|
Conversación con un contacto donde el sentimiento detectado es negativo. |
 |
Conversación con un contacto donde el sentimiento detectado es neutro. |
|
|
Al pulsar con el botón secundario del ratón nos aparecerá un desplegable donde podremos marcar como no leída la conversación. Al seleccionar esta opción en el chat aparecerá un punto rojo sin contador de mensajes. |
4. Panel de mensajes
Una vez que se ha seleccionado una conversación en el panel descrito anteriormente, en el panel de mensajes veremos los mensajes tanto enviados como recibidos a ese cliente:
Vamos a describir cada parte.
4.1 Buscador de mensajes
En la parte superior nos encontramos el buscador de mensajes. Este buscador sólo busca sobre los mensajes de esta conversación:
4.2 Llamadas y videollamadas
En caso de haber activado la funcionalidad de llamadas de voz o videollamadas, veremos uno o dos iconos adicionales:
El primero corresponde a las videollamadas y el segundo a las llamadas de voz.
4.2.1 ¿Cómo se hace una llamada o videollamada?
Para realizar una llamada de voz basta con pulsar en el icono: 
Y para realizar una videollamada basta con pulsar en el icono: 
Cuando se selecciona llamada o videollamada, el sistema genera una sala de audio y/o video y manda un mensaje al cliente para que se una a la llamada.
4.2.2 ¿Qué se ve en el componente?
En el componente veremos un diálogo donde debemos esperar que se conecte el cliente:
4.2.3 ¿Qué se ve en el teléfono del cliente?
Y el cliente verá en nuestro chat:
Y al pulsar en el enlace:
Es importante tener en cuenta que para poder realizar la llamada se usa telefonía IP que se activa desde el navegador del teléfono. Para que funcione correctamente el teléfono al abrir el enlace recibido por WhatsApp en el navegador por defecto, este debe tener los permisos necesarios: acceso al micrófono en caso de llamadas sólo de audio y acceso al micrófono y a la cámara en caso de videollamadas. Si el usuario nunca ha configurado estos permisos el navegador se los solicitará, en caso contrario consulta esta guía para conceder los permisos necesarios.
4.3. Los mensajes
Los mensajes se visualizan como en cualquier aplicación de chat. Estos están agrupados por fecha, de forma que podamos localizar fácilmente mensajes de días anteriores:
Los mensajes pueden ser de dos tipos
- De texto:
- Multimedia (cualquier mensajes que contenga un elemento distinto al texto: fotos, documento, audio, etc):
En todos los mensajes se muestra la hora de este en la zona horaria en la se está usando el componente.
Hay algunos casos especiales de visualización de mensajes:
- Audios: donde puede aparecer un icono
al lado del reproductor, pulsando sobre ese icono podremos consultar la transcripción del audio:
- Imágenes/documentos: donde aparecerá o bien un icono del tipo de documento que hemos recibido o una miniatura de este:
.......
En todos los casos podremos visualizar el contenido o descargarlo:
4.3.1 Mensajes recibidos
Los mensajes recibidos siempre se muestran a la izquierda del panel y no disponen de ningún indicativo de estado.
4.3.2 Mensajes enviados
Los mensajes enviados siempre se muestran a la derecha del panel y disponen de indicativo de estado.
4.3.2.1 Los iconos
Cuando se manda un mensaje recibimos los distintos pasos por los que va pasando el mensaje. En la siguiente tabla se describen los estados y el icono que identifica este:
|
Icono |
Descripción |
|
|
El mensaje se ha mandado a Meta |
|
|
Meta ha mandado el mensaje al teléfono destino |
|
|
El mensaje ha sido entregado al teléfono destino |
|
|
El mensaje ha sido leído |
|
|
Se ha solicitado el borrado del mensaje a Meta |
|
|
El teléfono destino debe darnos permisos entrando en nuestro chat |
|
|
El teléfono destino ha sido seleccionado para un experimento de Meta |
4.3.2.2 Desbloqueo de chats
En algunas circunstancias Meta puede bloquear los mensajes que mandamos. Esto puede ser debido a dos casos:
- Que el teléfono destino esté en un experimento
- Que el teléfono destino nos tenga que dar permisos
En ambos casos la manera más rápida de desbloquear el chat es solicitar a la persona que hemos mandado el mensaje, que nos mande un mensaje a nosotros. Para saber a que teléfono debe mandar el mensaje, al pasar el ratón por encima de uno de los iconos veremos esto:
| En caso de estar en un experimento |
En caso de tener que dar permisos |
|
|
|
4.3.3 Borrado de mensajes
Una vez enviado podemos solicitar el borrado de un mensaje. Para hacer esto basta con que pulsemos con el botón secundario del ratón encima del mensaje, nos aparecerá un menú donde podemos seleccionar esta opción:
Lógicamente la opción de borrado sólo está disponible para los mensajes enviados. Una vez seleccionada la opción de "Eliminar" y una vez que hayamos solicitado el borrado al proveedor en el mensaje aparecerá el icono de una papelera:
4.3.4 Scroll infinito
Cuando se selecciona una conversación, sólo mostramos los 50 últimos mensajes, esto se hace para no sobrecargar el sistema componiendo conversaciones que en algunos casos puede tener cientos de mensajes. Para acceder a los mensajes más antiguos se ha implementado la funcionalidad de scroll infinito, que consiste en que cuando se llega al mensaje más antiguo mostrado el sistema automáticamente solicita otro bloque de 50 mensajes más antiguos al último que estamos visualizando.
4.4 Barra de envío de mensajes
Debajo de los mensajes tenemos la barra de envío, que además de enviar los mensajes tiene alguna funcionalidad adicional.
|
|
Caja para escribir los mensajes hasta un máximo de 1.600 caracteres. Al empezar a escribir se reemplaza el icono
|
|
|
Inserción de Emojis |
|
|
Acceso a los mensajes que hayamos programado para enviar en el futuro |
|
|
Acceso a los mensajes predeterminados |
|
|
Adjuntar un elemento multimedia |
|
|
Grabar un audio |
por 
4.4.1 Caja de escritura y emoji
En la caja de escritura podemos escribir cualquier texto añadiendo los emojis que queramos hasta un límite de 1.600 caracteres que es el impuesto por META
4.4.2 Mensajes programados
Los mensajes programados son mensajes que escribimos ahora pero queremos que se manden en el futuro. Desde este icono tendremos acceso a la lista de mensajes que hemos programado:
Al pulsar con el botón secundario del ratón encima del mensaje podremos eliminarlo o programarlo:
4.4.3 Mensajes predeterminados
Los mensajes predeterminados son una forma muy sencilla de tener a mano mensajes que usamos con frecuencia. Los mensajes predeterminados se clasifican en:
- Mensajes de usuario (Mis mensajes): se puedes añadir, modificar o borrar por el usuario.
- Mensajes predefinidos por la empresa (Predeterminados): los define la empresa y sólo se pueden usar.
Los mensajes predeterminados de usuario pueden ser de texto o de audio. Para gestionarlos basta con pulsar en el icono
habiendo seleccionado una conversación. Al pulsar sobre él se nos abrirá un diálogo donde podremos seleccionar, editar, crear o borrar estos:
Los mensajes predeterminados se componen de un nombre y el contenido bien de texto o bien de audio:
En los mensajes de texto tendremos que completar el título y el contenido:
Mientras que en los de audio tendremos que completar un título y grabar el audio
Es importante tener en cuenta que los mensajes predeterminados no se podrán seleccionar si el canal prohíbe el uso de mensajes multimedia. Por ejemplo en el canal WhatsApp sólo podremos mandar audios si el cliente nos ha respondido a un mensaje hace menos de 24 horas.
La organización de los mensajes predeterminados de empresa, como no puede ser de otra forma la realiza la empresa de forma jerárquica, por ejemplo:
Cuando pulsamos en Predeterminados podremos ver esa jerarquía y buscar en los mensajes:
Hemos implementado una manera muy sencilla de acceder a los mensajes predeterminados desde la caja de texto, basta pulsar MAYUS + 7 (aparecerá el carácter /), para que se despliegue una lista con los mensajes.
después del carácter / podemos escribir cualquier cosa y nosotros buscaremos por el título o el texto de los mensajes predeterminados:
4.4.4 Adjuntos multimedia
Siempre que el canal lo permita podremos mandar ficheros a nuestros clientes. Los formatos soportados a fecha de hoy son:
| Tipo de adjunto |
Formato |
| Imágenes |
JPG, JPEG, PNG, WEBP |
| Audio |
OGG, AMR, 3GP, AAC, MPEG |
| Vídeo |
MP4 (con H.264 video codec y AAC audio) |
| Documentos |
PDF, DOC, DOCX, PPTX, XLSX |
| Contactos |
vCard (.vcf) |
Para mandar un adjunto debemos pulsar en el icono:
si el canal tiene restricciones de envío, como por ejemplo WhatsApp, y estamos en un momento donde no se pueden mandar ficheros multimedia el icono estará desactivado y al pasar el ratón por encima veremos un aviso:
En caso de tener el icono de adjuntos activo:
al pulsar sobre el, nos aparecerá un diálogo donde podremos arrastrar o explorar los ficheros a mandar:
4.4.5 Grabar un audio
Desde el componente podemos grabar un audio. El icono de audio sólo se activará si el canal nos permite el envío de ficheros:
Para grabar un audio el navegador necesita tener permisos para acceder al micrófono del ordenador. En caso de no tener permisos y si no se lo hemos denegado nunca, nos aparecerá un mensaje parecido a este:
En caso de haber denegado el acceso al micrófono debes seguir una de estas guías para que el navegador vuelva a solicitar los permisos de acceso al micrófono:
Al pulsar en el icono de grabar un mensaje, comenzaremos a grabar y se nos activarán dos iconos:
Finalizar la grabación 
o cancelar la grabación 
Si pulsamos el finalizar la grabación se nos mostrará un reproductor donde podemos escuchar lo que hemos grabado antes de mandarlo:
Podemos enviarlo pulsando en el icono 
o cancelarlo pulsando en el icono 
4.4.6 Enviar el mensaje
Para mandar un mensaje es tan sencillo como escribirlo o seleccionarlo de los mensajes predeterminados y pulsar en el icono de mandar
Pero el icono de mandar tiene una funcionalidad adicional, que es la posibilidad de programar el envío del mensaje en un momento concreto. Esto sólo es válido para los mensaje de texto, ya que los adjuntos incluyendo los audios podría ser que violasen las reglas de envío de adjuntos del canal.
Para programar un envío basta con escribir el texto y pulsar con el botón secundario del raton sobre el icono de enviar:
Seleccionamos "Programar mensaje" y nos saldrá un diálogo donde podemos seleccionar el día y la hora a la que queremos mandar el mensaje:
Recuerda que puedes consultar los mensajes que tienes programados pulsando sobre el icono 
5. La organización por carpetas o etiquetas
5.1 ¿Qué son las etiquetas y qué tipos hay?
Las carpetas o etiquetas son una forma muy sencilla de ordenar las conversaciones. La gestión de estas se hace mediante el panel izquierdo del componente y desde el panel de conversaciones.
Hay dos tipos de etiquetas:
- Las de empresa: Las define la empresa y sólo se pueden usar, los usuarios no las pueden borrar.
- Las de usuario: Son propias de cada usuario y puede crear, modificar o borrar las que necesite.
5.2 Gestión de etiquetas
A la derecha del componente están las etiquetas, se puede mostrar u ocultar ese elemento pulsando el en icono 
que se encuentra en la barra superior. Una vez desplegado veremos algo así como:
Cada icono en forma de carpeta representa una etiqueta, y las de empresa se representan como una carpeta con una estrella. Adicionalmente hay siempre una carpeta "Todas" donde al pulsar veremos todas las conversaciones.
Al pulsar sobre una etiqueta el componente sólo mostrará las conversaciones que posean esa etiqueta, pudiendo ver todas las conversaciones pulsando en la carpeta "Todas".
Cada carpeta tiene un identificativo de los mensajes sin leer de las conversaciones que tienen esa etiqueta.
Para dar de alta una etiqueta, basta con pulsar en el icono 
y veremos un diálogo donde darla de alta:
Una vez dada de alta veremos que aparece en la barra derecha de etiquetas.
Pulsando encima de una carpeta, de usuario, con el botón secundario del ratón podremos reordenar como se ven las carpetas, borrarlas o hacer asignaciones masivas de etiquetas:
5.3 Gestión de etiquetas en los chats
Las etiquetas sólo se pueden aplicar a las conversaciones.
Para gestionar las etiquetas basta con seleccionar una conversación del panel de conversaciones y pulsando el botón secundario de ratón veremos un menú donde gestionarlas:
Al pulsar en "Gestionar etiquetas", veremos un menú donde cambiar las etiquetas que posee esa conversación:
5.4 Asignación múltiple de contactos a una etiqueta:
En caso de querer asignar múltiples contactos a una etiqueta pulsaremos con el botón secundario del ratón encima del icono de la etiqueta/carpeta donde deseemos hacer esta operación y seleccionaremos "Gestionar contactos":
Veremos un diálogo donde veremos una lista de contactos y desde el buscador podremos buscar por nombre, apellidos, teléfono y nombre del curso/producto:
6. Las notificaciones push
El componente web dispone de la funcionalidad push. La funcionalidad de notificaciones push se activan y se gestionan desde el navegador y desde el sistema operativo.
Para activar o desactivar las notificaciones push iremos al icono de configuración y veremos una opción en el menú desde la que podremos activar o desactivar las notificaciones.
|
|
|
Una vez seleccionada la activación el navegador pedirá permisos para recibir las notificaciones push, en caso de no tenerlas activas ya.
La documentación para esta gestión está disponible en la documentación de cada navegador y cada sistema operativo:
Como consideraciones generales:
Cuando el componente está en primer plano, estamos viendo la pestaña del navegador con el componente abierto, es la propia aplicación la que gestiona las notificaciones. En este caso en la página web donde está en componente abierto veremos la notificación:
Al pulsar el el botón "IR" el componente se posicionará en la conversación correspondiente.
En caso de no tener en primer plano el navegador con el componente web, las notificaciones las gestiona el sistema operativo y veremos al así como:
Además de la notificación esta se añadirá al centro de notificaciones del sistema operativo. En este caso las notificaciones quedan agrupadas por teléfono, de manera que veamos todas las notificaciones de la mensajería juntas y dentro de estas agrupadas por teléfono (la visualización del centro de notificaciones depende de cada sistema operativo, a modo de ejemplo se muestra la de WIndows):
|
|
|
