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

¿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 para dejarla a tu gusto ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo aprenderás a abrir un canal de comunicación One To One para que tu usuario pueda hablar contigo directamente mediante la librería Intercom Ionic.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.

Y ahora si, comenzamos. Let´s go!

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:’secure@example.com’ }

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:’secure@example.com’ }

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.

Tutorial en video por no te gusta leer

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.

Algo más que quizás te interese

Mira, en el momento que tu mejoras el logo de una app que tengas publicada en Google Play, las descargas y los ingresos que esta aplicación genera aumentan. Esto es así. Mejor logo es igual a más dinero.

Basándonos en esto, hemos creado esta herramienta que te permite evaluar, optimizar y mejorar los logos de tus apps para que reciban más descargas. No te quiero espoilear, dentro hay un video explicativo. Entra en el enlace.

Geniete, pues hasta aquí el artículo de hoy. Espero haberte ayudado con la librería Intercom y nos vemos en el siguiente artículo. Hasta entonces ¡que te vaya bien!