Guía de integración del componente web

Para realizar la integración del componente web básicamente tenemos que hacer 4 cosas:

1. Inclusión de las hojas de estilo y javascript necesarios
2. Generación de un div vacío con id root
3. Construcción del objeto de inicialización necesario
4. Inicialización del componente

1.- Inclusión de las hojas de estilo y javascript necesarios

 Incluir en la/s página/s donde se desee visualizar el componente los siguientes elementos:

```asd```

En el head de las páginas donde se vaya a usar hay que añadir:

 

      <link href="https://s.unir.net/wa-component/css/2.chunk.css" rel="stylesheet">

      <link href="https://s.unir.net/wa-component/css/main.chunk.css" rel="stylesheet">

      <script src="https://s.unir.net/wa-component/js/2.chunk.js"></script>

      <script src="https://s.unir.net/wa-component/js/main.chunk.js"></script>

 

En el body de esa página hay que crear un div que es el que vamos a usar para pintar el componente:

 

        <div id="root">

            <script src="https://s.unir.net/wa-component/js/chat-component.js"></script>

        </div>

 

Con esto tenemos todo lo que necesitamos, ahora falta cómo instanciamos el componente. Antes de poder instanciarlo tenemos que crear un objeto donde completamos los datos que necesita el componente:

 

  var var2init = {

                    phone: "+34659463720", // Teléfono al que queremos mandar el/los mensajes

                    source: "webcomponent", // Esto es un literal que luego se va a poder usar para filtrar los mensajes, por ejemplo Portal_Tutor, ERPACADEMICO

                    client_name: "Fernando Macho", // Nombre del cliente/alumno

                  client_lastname: "Macho", // Apellidos del cliente/alumno

                    client_email: "fernando.macho@unir.net", // Cuál es el mail del cliente/alumno

                    country: "ES", // En ISO2 cual es el país del cliente/alumno

                    course_id: 24879, // Cual es el id del curso al que hacemos referencia el la conversación, ahora mismo es el idmagento, pero si es necesario podemos hacer la adaptación al de GESTOR

                    assessor_first_name: "María de las Mercedes", // Nombre del asesor/tutor que manda el/los mensaje

                    assessor_last_name: "de Los Montes", // Apellidos del asesor/tutor que manda el/los mensaje

                    assessor_email: "fernando.macho@gmail.com", // Email del asesor/tutor que manda el/los mensaje

                    minimzed: true, // True o false, dependiendo si queremos el componente minimizado o no

                    show_userlist: true, // True o false, dependiendo si queremos que despliegue la lista de conversaciones

                };

 

Una vez que tenemos construido el objeto basta con que definamos en el componente que nos interese de la página web (botón o lo que os parezca) la instanciación del componente:

 

             <script>

                initChat(var2init);

            </script>

 

Lo que vais a ver cuando se instancia el objeto chat es, si minimized es false y show_userlist es true:

 

 

 

Si minimized es false y show_userlist es false:

 

 

Si minimized es true:

 

 

Os explico:

 

Por defecto el componente selecciona todos los mensajes que se han mandado o recibido de ese teléfono. Pero podemos filtrar que se ve:

 

Por origen (Sources), hace uso de lo que se pone en el atributo “source” del objeto que creamos al instanciarlo:

 

 

Por fecha:

 

 

Y por último hemos añadido la funcionalidad de poder ampliar o reducir la fuente del componente: