Usa este artículo para instalar Intercom Messenger en tu sitio web, conectar tus datos de clientes de forma segura y probar que todo funciona. Una vez instalado, podrás dar la bienvenida, incorporar y apoyar a los clientes mientras se convierten en usuarios leales de tu app.
Los pasos para una instalación completa y segura de Messenger son:
Elige tu tipo de instalación.
Instala y prueba el Messenger.
Conecta tus datos de clientes y asegura el Messenger (omite este paso si elegiste Visitors & leads only).
Nota: Esta es la nueva experiencia de instalación de Messenger, se está implementando gradualmente. Si tu espacio de trabajo aún no ha sido actualizado, usa Instalar Intercom para visitantes y leads en la web o Instalar Intercom para users en la web en su lugar.
Elige tu tipo de instalación
Ve a Configuración > Canales > Messenger Live Chat > Resumen, encuentra la tarjeta Website y selecciona Instalar en el sitio web.
Selecciona tu tipo de instalación
Se te preguntará "¿Qué información necesita tu equipo en tu inbox?" y se mostrarán dos opciones:
Visitors & leads (el más rápido para instalar) — Las conversaciones no están vinculadas a detalles de users. Puedes completar la configuración adicional más tarde para identificar users registrados.
Signed-in users, visitors & leads — Las conversaciones de users registrados incluyen detalles relevantes, dando a tu equipo el contexto necesario para brindar soporte personalizado. Requiere cambios en frontend y backend.
Cada tarjeta muestra una vista previa de lo que tu equipo verá en el Inbox para esa opción, para que puedas comparar antes de decidir. Selecciona la opción que se adapte a tu negocio y luego haz clic en Continuar.
Consejo: Visitors & leads te permite configurarte más rápido. Siempre puedes volver más tarde y completar la configuración de Signed-in users, visitors & leads cuando tu equipo esté listo.
Pide ayuda a un desarrollador (opcional)
Si es necesario, puedes pedir a un compañero — como un ingeniero — que complete la instalación. Haz clic en Invitar a un compañero, ingresa su correo electrónico y se enviará una invitación para que se una a tu espacio de trabajo con los permisos mínimos necesarios para instalar el Messenger:
Puede gestionar configuraciones generales y de seguridad
Puede gestionar configuraciones de Messenger
Puede gestionar datos del espacio de trabajo
Elige cómo instalar el Messenger
Selecciona cómo quieres instalar eligiendo uno de los siguientes métodos:
Usando código personalizado
Fragmento de código
React
Angular
Vue
Ember
O a través de una de las siguientes integraciones
WordPress
Google Tag Manager
Shopify
Segment
Al hacer clic en una de estas opciones, se selecciona y se revelan los pasos específicos para ese método. Muchos de estos métodos ofrecen una instalación con Node.js Package Manager (NPM) para facilitarlo.
Nota: Para aplicaciones de una sola página (SPA), el enfoque estándar del fragmento necesita ajustes. Sigue la guía de instalación SPA de Intercom para manejar correctamente los cambios dinámicos de página.
Instala Intercom mediante el método que elegiste
Ahora sigue las instrucciones dadas para el método que seleccionaste. Si elegiste Fragmento de código, React, Angular, Vue, o Ember, se te proporcionará un fragmento de código que referencia un paquete NPM. Este fragmento está prellenado con tu ID único de espacio de trabajo, por lo que está listo para usar.
Haz clic en Copiar código y pégalo antes de la etiqueta </body> en cada página donde quieras que aparezca el Messenger.
Luego edita el código para enviar a Intercom el correo electrónico o user_id y la fecha de registro del user que está actualmente conectado:
var APP_ID = "your_app_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
};Después de agregar el código, abre tu app y aparecerá el Messenger.
Importante: Ten en cuenta lo siguiente al identificar users:
Puedes identificar users con un user_id o correo electrónico.
Si envías un user_id y un correo electrónico, el user_id tendrá prioridad al identificar a tus users.
Siempre pasa user_id, correo electrónico y user_hash dinámicamente desde tu servidor para el user actualmente conectado — nunca codifiques ni almacenes en caché la identidad de un solo user en el fragmento.
Prueba tu instalación
Haz clic en Probar tu instalación para confirmar que el Messenger funciona como se espera.
Una vez que pase, verás una confirmación de "Messenger está instalado".
Para la ruta Visitors & leads, dice: "Los visitantes ahora pueden iniciar conversaciones desde tu sitio. Aparecerán en tu Inbox con un nombre aleatorio hasta que compartan sus datos. Luego, personaliza Messenger. Ajusta sus colores, lanzador y mensaje de bienvenida para que coincidan con tu marca."
Para la ruta Signed-in users, visitors & leads, continúa a la sección Conectar tus datos de clientes abajo para terminar la instalación.
Desde aquí puedes hacer clic en Lo haré más tarde o Personalizar tu Messenger para ir directamente a su estilo.
Cierra las sesiones de users al cerrar sesión
Asegúrate también de llamar al método shutdown de Intercom para borrar las conversaciones de tus clientes cuando cierren sesión en tu app:
Intercom('shutdown');Consejo: Llama a Intercom('shutdown') dentro del manejador de eventos de cierre de sesión o equivalente — donde
tu app termine la sesión de un user. Esto borra la cookie de Intercom inmediatamente para que el siguiente visitante comience una sesión nueva y anónima.
Cualquier user que use un ordenador 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 lo que es importante llamar a esto en cada cierre de sesión.
Conecta tus datos de clientes
Omite esta sección si elegiste Visitors & leads only — tu instalación ya está completa una vez que la hayas probado arriba. Si elegiste Signed-in users, visitors & leads, continúa abajo para terminar de conectar los atributos de datos de tus users.
Nota: La ruta Signed-in users, visitors & leads requiere cambios tanto en tu código frontend como backend. Necesitarás acceso de desarrollador para completar esta sección.
Genera un token para cada cliente para asegurar que tus datos de clientes estén protegidos
En tu servidor, genera un JSON Web Token (JWT) firmado para cada user conectado. Por ejemplo, en Node:
const jwt = require('jsonwebtoken');
const token = jwt.sign(
{ user_id: user.id, email: user.email },
process.env.INTERCOM_SECRET_KEY,
{ algorithm: 'HS256', expiresIn: '1h' },
);
Necesitarás la clave secreta de tu espacio de trabajo para este paso — se muestra (enmascarada) en pantalla. Mantén esta clave en tu servidor. Nunca la incluyas en el código del navegador o app.
Nota: Las claves están asignadas a plataformas, y tu espacio de trabajo puede tener más de una. Puedes crear, rotar o decodificar una clave desde la configuración de seguridad de Messenger.
Agrega el fragmento actualizado a tu sitio web
Agrega una línea al fragmento que ya instalaste. El correo electrónico se extrae del token y se usa para representar de forma segura la identidad del messenger.
Intercom({
app_id: 'your_app_id',
intercom_user_jwt: token,
});
Esto aplica donde sea que implementes el cambio, así que cualquier lugar que comparta esta base de código también se conectará.
Prueba tu instalación
Haz clic en Probar instalación para confirmar que el Messenger funciona como se espera.
💡 Consejo: ¿Necesitas más ayuda? Obtén soporte en nuestro Foro de la Comunidad. Encuentra respuestas y ayuda de Soporte de Intercom y Expertos de la Comunidad.
Artículos relacionados