Ir al contenido principal

Instalar Intercom para users en la web

Instala el Intercom Messenger y comienza a conversar con tus users que han iniciado sesión.

Escrito por Eric Fitzgerald

Solo toma unos minutos instalar el Messenger en tu sitio web. Una vez instalado, podrás dar la bienvenida, integrar y apoyar a los clientes mientras se convierten en users leales de tu app.

Los dos pasos necesarios para una instalación completa y segura del Messenger son:

Necesitarás una prueba o suscripción de Intercom para instalar el Messenger.


Instalación inicial del Messenger para users en la web

Primero ve a Configuración > Canales > Messenger > Instalar y elige Instalar para web.

Elige cómo instalar el Messenger

Selecciona cómo quieres instalar eligiendo uno de los siguientes métodos:

  • Fragmento de código

  • React

  • Angular

  • Vue

  • Ember

  • WordPress

  • Google Tag Manager

  • Shopify

  • Segment

Cada método proporciona pasos específicos al seleccionarlo. Muchos de estos métodos ofrecen una instalación mediante node package manager (NPM) para facilitarte el proceso.

Pide ayuda a tu desarrollador (opcional)

Si es necesario, puedes pedir a un compañero (como un ingeniero) que complete la instalación. Simplemente haz clic en Invitar a un compañero.

Una vez que ingreses su dirección de correo electrónico, se enviará una invitación que les permitirá unirse al espacio de trabajo de tu equipo.

Al compañero invitado se le asignará un asiento lite en planes Avanzados / Expertos y un asiento completo en planes Esenciales. Tendrán los permisos mínimos necesarios para instalar el Messenger:

  • Puede gestionar configuraciones generales y de seguridad

  • Puede gestionar configuraciones del Messenger

  • Puede gestionar datos del espacio de trabajo

Instálalo tú mismo

Si seleccionaste Fragmento de código, React, Angular, Vue, Ember o Shopify como método de instalación, tendrás la opción de completar la instalación para:

  • Para users con inicio de sesión - Instala el Messenger para users que han iniciado sesión. El Messenger mostrará información como nombres de clientes y conversaciones previas en varios dispositivos.

  • Para visitantes del sitio web sin inicio de sesión - Instala el Messenger para visitantes anónimos que no han iniciado sesión. Las conversaciones se guardarán en el navegador mediante una cookie.

Recomendamos instalar el Messenger para users y visitantes.

Luego debes "Habilitar conexión al messenger".

Importante: Si esto está deshabilitado, todas las solicitudes a Intercom fallarán. Las APIs del Messenger no están habilitadas por defecto. Como puedes ver al entrar a la página de instalación del Messenger, los ejemplos de código están en gris hasta que habilites ese interruptor. Esto activa las APIs del Messenger para tu espacio de trabajo y asegura que comience a aceptar tráfico. Necesitarás habilitar esto para empezar con cualquier tráfico de users.

Una vez que tengas configurado tu Messenger, también recomendamos asegurarla con JWTs!

Instala Intercom mediante el método que elegiste

Ahora sigue las instrucciones dadas para el método que seleccionaste. Por ejemplo, si elegiste WordPress, verás las instrucciones a continuación para este método.

Si seleccionaste el método Fragmento de código, React, Angular, Vue, o Ember, se te proporcionará un paquete NPM que contiene un fragmento de código para copiar y pegar en la base de código de tu propia app. Este fragmento está prellenado con tu ID único de espacio de trabajo, por lo que está listo para usar.

También puedes encontrar el paquete directamente en el sitio de NPM.

Hay varias otras plantillas disponibles, como incluir el fragmento de código en una app Node.js/Rails (Ruby)/Django (Python 3) o PHP. También puedes incluir el fragmento en una app de una sola página o usar la gema rails para instalar el fragmento. Para Aplicaciones de Página Única (SPA), sigue la guía de instalación SPA para abordar su naturaleza dinámica.

Haz clic en Copiar código y pégalo antes de la etiqueta </body> en cada página donde quieras que aparezca el Messenger en tu app.

Luego edita el código para enviar a Intercom la dirección de correo electrónico o user_id y la fecha de registro del user que está actualmente conectado.

Después de agregar el código, abre tu app y aparecerá el Messenger.

Cierra las sesiones de tus users al cerrar sesión

Asegúrate también de llamar al método de cierre de Intercom para borrar las conversaciones de tus clientes cuando cierren sesión en tu app.

Cualquier user que use una computadora y navegador compartidos con otra persona podrá ver el historial de conversaciones del user que inició sesión más recientemente hasta que la cookie expire. Por esto, es muy importante cerrar correctamente Intercom cuando termina la sesión de un user en tu app (ya sea cerrando sesión manual o automáticamente).

Importante:

  • Puedes identificar users con un user_id o dirección de correo electrónico.

  • Si envías un user_id y una dirección de correo electrónico, el user_id tendrá prioridad al identificar a tus users.

  • Si eliges usar user_id, la dirección de correo electrónico aún puede usarse para identificar a tus users en Intercom, por lo que recomendamos habilitar la verificación de identidad.

  • También puedes enviar a Intercom atributos personalizados sobre tus users.

  • Si usas el CSS zoom en tu página web, asegúrate de que los widgets de Intercom no lo reciban.

Opciones de apariencia y sensación

La primera opción te permite elegir si quieres mostrar u ocultar el messenger para la audiencia de tu sitio web antes del lanzamiento. De lo contrario, por defecto se muestra el messenger.

La segunda opción enlaza a la Configuración del Messenger, donde puedes cambiar los colores y el tema del messenger.

Verifica la instalación

Puedes verificar que la instalación fue exitosa haciendo clic en Verificar instalación. Este botón ofrece una notificación de éxito si el Messenger se ha encontrado correctamente o indica si algo salió mal.

Si has instalado el Intercom Messenger y no aparece correctamente, aquí hay algunas formas comunes de solucionarlo. La solución de problemas adicional incluye verificar restricciones del navegador como bloqueadores de anuncios o navegación privada que pueden bloquear el Messenger, así como evitar dominios de sufijo público para asegurar la visibilidad adecuada.

Ahora continúa con el siguiente paso en el proceso de instalación y asegura tu messenger con JWTs.

Nota: Sin Seguridad del Messenger, tus users solo verán su historial de conversaciones de los últimos 14 días en el Messenger. Más información →


Instalando Intercom para un cliente

Si no tienes acceso al espacio de trabajo de Intercom, puedes obtener el código JavaScript aquí 👇 Deberás reemplazar manualmente WORKSPACE_ID con el ID único de espacio de trabajo de tu cuenta de Intercom.

<script>
var APP_ID = "WORKSPACE_ID"; // Replace this with your workspace ID
window.intercomSettings = {
app_id: APP_ID,
name: "Jane Doe", // Full name
email: "customer@example.com", // Email address
created_at: 1312182000 // Signup date as a Unix timestamp
};
</script>
<script>(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/' + APP_ID;var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();</script>

El valor para created_at debe ser la fecha en que un cliente se registró en tu app, sitio o servicio, enviado como un timestamp Unix.


Instalando Intercom para espacios de trabajo alojados en la UE y AU

Para instalar Intercom si usas nuestro alojamiento en la UE o AU, necesitarás proporcionar un parámetro adicional api_base. Los valores para esto están listados en la tabla a continuación.

Región de alojamiento de datos

Valor de api_base

Estados Unidos (US)

Unión Europea (EU)

Australia (AU)


Instalar Intercom en un entorno de escritorio

Es técnicamente posible incluir Intercom en una aplicación de escritorio, sin embargo, no soportamos oficialmente entornos de escritorio. El Intercom Messenger ha sido diseñado y desarrollado para funcionar en un entorno web (lista de navegadores soportados). Estos entornos web soportan funcionalidades específicas que nuestro Messenger necesita (por ejemplo, Javascript y CSS).

Electron y tecnologías similares te permiten construir aplicaciones de escritorio usando tecnología web, y es posible instalar Intercom en este tipo de aplicaciones - incluso existen librerías comunitarias para ayudar a instalar Intercom en entornos Electron, sin embargo, no es algo que soportemos oficialmente.

¿Ha quedado contestada tu pregunta?