Saltar al contenido

Intercom Ionic | Qué es y cómo puedes utilizarlo

Intercom Ionic

¿Interesado en implementar la api Intercom Ionic en tu aplicación? O, quizás ya sabes cómo se hace, pero te falta conocer algún detallito de esta cómo puede ser los parámetros de una función o los campos de una interfaz de ella ¿verdad?

Si has respondido sí a alguna de las preguntas anteriores, o preguntas que sea parecidas, déjame decirte que no eres el primero, ni serás el único, que haya pasado por aquí a dar respuesta a sus preguntas. Es más, hasta los más expertos tenemos que acudir de vez en cuando a estos artículos cuando tenemos que hacer alguna implementación nuevas.

Por si no me conoces aún, mi nombre es Aitor Sánchez y soy desarrollador de apps desde el año 2014 y en este artículo te mostraré, de forma sencilla y totalmente accionable, cómo puedes realizar la integración de Intercom Ionic en tu aplicación.

Pero antes de empezar, déjame decirte que si te gusta la programación en general y el desarrollo de apps en particular, tienes que pasarte por aquí. Se trata de «El Círculo» y es una comunidad que estoy montando alrededor de esto. Dentro tienes todos los detalles. Y, ahora sí, ¡comenzamos!

 

Pero, qué es Intercom

Intercom se una plataforma que nos permitirá, de una manera fluida y super amigable, el contacto one to one con nuestro cliente. Básicamente, nos permite abrir un canal desde nuestra aplicación para que el usuario que la está utilizando pueda comunicarse con nosotros (la empresa) de manera agradable y personalizada.

Si quieres profundizar un poquito más sobre ellos, aquí tienes su página web. Aunque si estás aquí, imagino que ya los conocerás. Bien, sigamos.

 

Instalación de Intercom en Ionic

Cómo todos los componentes desacoplados del core del sistema, necesita que realicemos una instalación en la app para poder utilizarlos. Para ello vamos a utilizar las siguientes dos líneas de consola:

ionic cordova plugin add cordova-plugin-intercom
npm install @ionic-native/intercom

 

La primera instalará el plugin que permitirá la comunicación con la parte nativa del dispositivo donde se ejecute.

La segunda instalará el código TS necesario para que nos podamos comunicar con el plugin desde nuestra app.

 

Configuración del componente

En el caso de que estemos usando una versión de Ionic inferior a la 4, o que no estemos usando el módulo NGX, necesitamos incluir la clase Intercom en nuestros providers para poderla usar. Se haría de la siguiente manera:

providers:[
…,
Intercom,
…
]

 

Recordamos, cómo en todas las clases, que es recomendable usar (incluir en los providers) las clases desacopladas solo en los componentes de nuestra aplicación en lo que los vayamos a usar. Así estaremos incurriendo a en buenas prácticas y rendimiento exponencial mayor.

 

Plataformas soportadas

Pues cómo es costumbre, las plataformas soportadas son las siguientes:

  • Android
  • iOS

La verdad que podría haber incluido el navegador, tendría sentido ¿verdad?

 

Cómo se usa Intercom en Ionic

Bueno, pues una vez realizados todos los pasos previos, vamos a lo que nos atañe. Veamos cómo se usa. En primer lugar, vamos a poner en ejemplo de código y luego comentamos sobre él.

import { Intercom } from '@ionic-native/intercom/ngx';

constructor(private intercom: Intercom) { 
    this.init();
}
...

init(){
    this.intercom.registerUnidentifiedUser().then((_) => this.intercom.registerForPush().then((_)=> {
        //Aquí ya podrás manejar su funcionamiento.
        this.intercom.displayMessenger(); //Esta función mostrará el chat y avisará a la otra parte de que está intentando comunicarse.
    }));
}

 

En primer lugar, importamos la clase en cuestión, Intercom, que será la que se encargue de todo.

Inyectamos una instancia de la clase a través del constructor del componente para que así poder usarlo.

Posteriormente, y cómo se ve en el ejemplo, tenemos que utilizar dos funciones.

La primera, registerUnidentifiedUser, nos permitirá registrar al usuario en el sistema para que reciba y envíe mensajes. Nosotros no tenemos que hacer nada más para identificar al usuario.

Después, para que este reciba notificaciones push, tendremos que llamar a la función registerForPush. Tampoco tenemos que hacer nada, el sistema lo hace todo él solito 😊

Y con este ejemplo que hemos visto, ya estamos a disposición de trabajar con la instancia de Intercom.

 

Funciones y campos de la clase Intercom

Ahora vamos a pasar a ver los campos de clase, las funciones y los métodos que tenemos disponibles para su uso y veremos brevemente que es lo que hace cada uno.

 

registerIdentifiedUser(options: any)

Nos permite iniciar sesión en el sistema a un usuario que ya ha sido identificado previamente.

  • options -> (Opcional) Permite que seamos nosotros quien identifiquemos al usuario pasándole, por ejemplo, { userId:’123456789’, email:’[email protected]’ }

Retorna una promesa que hay que controlar. En caso de que todo haya ido bien se resolverá. En caso contrario fallará y saldrá por el catch.

 

registerUnidentifiedUser(options: any)

Esta función es similar a la anterior, pero para los usuarios que aún no han sido registrados la consola.

  • options -> (Opcional) Permite que seamos nosotros quien identifiquemos al usuario pasándole, por ejemplo, {userId:’123456789’, email:’[email protected]’ }

Retorna una promesa que tendremos que controlar. En caso de que todo haya ido guay se resolverá y en caso contrario saldrá por el cath.

 

reset()

Fuerza una re-inicialización del componente. Borra la cache, los identificadores de usuario y todo lo demás.

Retorna una promesa que hay que controlar.

 

setSecureMode(secureHash: string, secureData: any)

Esta función esta deprecada actualmente. Me parecía correcto ponerla aquí para informar al usuario. Pero se remplaza por “setSecureHash” que vamos a ver a continuación.

 

setSecureHash(secureHash: string)

Digamos que será la llave con la que vamos a codificar nuestro envío y recepción de datos de extremo a extremos. Esto nos sirve para que la información de que enviamos vaya cifrada, y podamos descifrar la que recibimos.

  • secureHash -> Una cadena con el hash que vamos a utilizar para encriptar y desencriptar.

Retorna una promesa que tendremos que controlar.

 

updateUser(attributes: any)

Nos permite actualizar la información que el sistema tiene registrada del usuario. Es la que hemos enviado en los dos primeros métodos de la lista. En caso de que estén aún las keys de los pares creadas, las creará cómo nuevas.

  • attributes -> Serán los atributos que queremos asignar al usuario.

Retorna una promesa que hay que controlar.

 

logEvent(eventName: string, data: string)

Nos permite realizar una escritura sobre el log de Intercom que se podrá ver en la consola de la plataforma.

  • eventName -> Será una cadena que contiene el nombre del evento que se ha disparado (la key del par)
  • data -> Serán los datos que queremos asociar al evento.

Retorna una promesa que tenemos que controlar.

 

displayMessenger()

Muestra la pantalla de mensajes del sistema. No será necesario que seamos nosotros los que tengamos que programarla.

Retorna una promesa que tendremos que controlar.

 

displayMessageComposer()

Muestra la ventana de edición de mensajes. Se utilizará cuando el usuario quiera mandar un nuevo mensaje.

Retorna una promesa que hay que controlar.

 

displayMessageComposerWithInitialMessage(initialMessage)

Hace lo mismo que la función anterior pero el usuario recibirá un primer mensaje, por ejemplo, de bienvenida.

  • initialMessage -> Será el mensaje que reciba el usuario cuando se abra la ventana.

Retorna una promesa que hay que controlar.

 

displayConversationList()

Pues cómo su propio nombre indica, muestra las conversaciones que se han tenido con el usuario registrado.

Retorna una promesa que hay que controlar.

 

unreadConversationCount()

En caso de que tengamos conversaciones sin leer, esta función nos permitirá saber cuantes.

Retorna una promesa. Si esta se resuelve llevará consigo los datos de la cantidad de conversaciones sin leer.

 

setLauncherVisibility(visibility: string)

Con esta función podremos mostrar, o esconder, la ventana de inicio de conversación. Desde la consola de la plataforma se podrá configurar la visibilidad por defecto y también le podremos asignar condiciones.

  • visibility -> Será la visibilidad que queramos que tenga la ventana.
    • visible
    • invisible

Retorna una promesa que hay que controlar.

 

setInAppMessageVisibility(visibility: string)

Similar a la función anterior, pero para la visibilidad de la ventana de chat.

  • visibility -> Será la visibilidad que queramos que tenga la ventana.
    • visible
    • invisible

Retorna una promesa que hay que controlar.

 

hiderMessenger()

Escode todo lo que tenga que ver con Intercom.

Retorna una promesa que hay que controlar.

 

registerForPush()

Cómo hemos visto en el ejemplo, con esta función podremos registrar al usuario en el sistema para que pueda recibir notificaciones push en su dispositivo.

Esta función retorna una promesa que tenemos que controlar.

 

Más contenido del curso


 

Y ahora, el videotutorial para los más ganduletes

Aunque bueno… hoy no os puedo traer el vídeo tutorial porque no he encontrado nada todavía con una clase para esto. Pero en lo que tardo yo en hacerlo, os dejo un vídeo de la misma empresa que te muestra cómo se puede hacer un LiveChat con ellos.

 

 

Sin nada más que agregar, solo que si no estás suscrito al círculo que lo hagas aquí. Por si no lo sabes, se trata de una comunidad online que estoy montando alrededor de esta genial disciplina que es la programación. En el enlace tienes todos los detalles.

Ahora si me despido hasta el siguiente artículo. Hasta entonces, que vaya bien 😊