Ir al contenido principal

Instalar Intercom para users en web

Instala el Messenger de Intercom y comienza a conversar con tus users registrados.

Escrito por Eric Fitzgerald

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

Los dos pasos requeridos 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 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 NPM para facilitarte.

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 compañero.

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

Al compañero invitado se le asignará un lite seat en planes Advanced / Expert y un full seat en planes Essential. Tendrán los permisos mínimos requeridos para instalar el Messenger:

  • Puede gestionar la configuración general y de seguridad

  • Puede gestionar la configuración del Messenger

  • Puede gestionar los 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 con sesión iniciada. El messenger mostrará información como nombres de clientes y conversaciones previas en todos los dispositivos.

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

Recomendamos instalar el Messenger tanto para users como para visitantes.

Debes entonces "Habilitar la 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 verás cuando entres por primera vez a la página de instalación del Messenger, los ejemplos de código están atenuados hasta que actives ese interruptor. Esto activa las APIs del Messenger para tu espacio de trabajo y asegura que empiece a aceptar tráfico. Necesitarás habilitar esto para comenzar con cualquier tráfico de users.

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

Instala Intercom mediante el método elegido

Ahora sigue las instrucciones dadas para el método que seleccionaste. Por ejemplo, si seleccionaste WordPress verás las instrucciones abajo 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 snippet viene preconfigurado con tu ID de espacio de trabajo único, 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 aplicación de una sola página o usar la gema de rails para instalar el fragmento. Para Aplicaciones de Una Sola Página (SPAs), 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 el Messenger aparezca 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 el Messenger aparecerá.

Cierra las sesiones de users al cerrar sesión

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

Cualquier user que use un equipo y navegador compartidos con otra persona podrá ver el historial de conversaciones del usuario 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 a los users con un user_id o dirección de correo electrónico.

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

  • Si eliges usar user_id, la dirección de correo 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 estás usando el CSS zoom en tu página web, asegúrate de que los widgets de Intercom no lo estén recibiendo.

  • Siempre pasa user_id, email y user_hash dinámicamente desde tu servidor para el user actualmente conectado; nunca codifiques ni caches la identidad de un solo user en el snippet. Si un visitante no ha iniciado sesión, omite estos campos por completo para que se rastreen como visitante anónimo en lugar de identificado como otro user.

Opciones de apariencia y estilo

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 comprobar que la instalación fue exitosa haciendo clic en Comprobar instalación. Este botón ofrece una notificación de éxito si el Messenger se ha encontrado correctamente o indica si algo ha fallado.

Si has instalado el Messenger de Intercom y no aparece correctamente, aquí hay algunas formas comunes de solucionarlo. La solución adicional incluye comprobar 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 garantizar la visibilidad adecuada.

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

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


Instalando Intercom para un cliente

Si no tienes acceso al espacio de trabajo de Intercom, puedes copiar el código JavaScript aquí 👇 Necesitarás reemplazar manualmente WORKSPACE_ID con el ID de espacio de trabajo único 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, enviada como un Unix timestamp.


Instalando Intercom para espacios de trabajo alojados en EU y AU

Para instalar Intercom si usas nuestro hosting en EU o AU, necesitarás proporcionar un parámetro adicional api_base. Los valores para esto se enumeran en la tabla a continuación.

Región de alojamiento de datos

api_base value

Estados Unidos (US)

Unión Europea (EU)

Australia (AU)


Instalar Intercom en un entorno de escritorio

Técnicamente es posible incluir Intercom en una aplicación de escritorio; sin embargo, no lo soportamos oficialmente. El Messenger de Intercom ha sido diseñado y desarrollado para ejecutarse en un entorno web (lista de navegadores compatibles). Estos entornos web admiten funcionalidades específicas que nuestro Messenger requiere (por ejemplo, Javascript y CSS).

Electron y tecnologías similares te permiten crear aplicaciones de escritorio usando tecnología web, y es posible instalar Intercom en estos tipos de aplicaciones; incluso existen bibliotecas comunitarias para ayudar a instalar Intercom en entornos Electron, sin embargo, no es algo que apoyemos oficialmente.

¿Ha quedado contestada tu pregunta?