Usa este artículo para configurar un Workflow que se abra en el Messenger cuando un cliente haga clic en un botón o elemento específico de tu sitio web. Esto está disponible para los teammates que tengan Messenger instalado en su sitio y acceso a Workflows en su plan.

Por ejemplo, podrías:

Ve a Fin AI Agent > Workflows y haz clic en Nuevo workflow.

Elige Crear desde cero y usa el disparador "Cuando el cliente hace clic en un elemento del sitio web".

Ahora necesitarás configurar los ajustes para seleccionar un botón en tu sitio que activará el Workflow. Simplemente elige Seleccionar elemento en tu sitio para lanzar desde.

Luego, elige el sitio web donde te gustaría agregar este Workflow y haz clic en Abrir sitio web.

Serás llevado a tu sitio web en una nueva ventana. En el menú en la parte inferior de la página, elige "Navegar" para ir a la página que contiene el botón que quieres que active tu Workflow:

Una vez que estés en la página correcta, haz clic en Seleccionar en el menú, luego haz clic en el elemento del sitio web que deseas.

Una vez que hayas seleccionado el elemento correcto, presiona Guardar y cerrar. Serás devuelto al creador de Workflow, donde el elemento seleccionado aparecerá como el disparador confirmado. Para verificar que se registró correctamente, comprueba que la configuración del disparador ahora muestre un selector CSS — esta es la dirección única del elemento en tu página, por ejemplo .contact-button o #chat-trigger. Si muestra un selector genérico en lugar de uno específico para tu botón, repite la selección.

Si tienes múltiples botones en tu sitio y quieres que todos activen el mismo Workflow, puedes definir manualmente una clase CSS compartida. Una clase CSS es una etiqueta que agregas a los elementos HTML en el código de tu sitio — cualquier elemento con esa clase puede actuar como disparador. Un selector CSS es la regla de coincidencia que Intercom usa para encontrar ese elemento en la página, por ejemplo .bot_launcher_button.
​

Antes de configurar esto, ten en cuenta la restricción de un botón por página a continuación:

Primero, usa el selector visual (abre tu Workflow, haz clic en Seleccionar elemento en tu sitio para lanzar desde, y haz clic en Seleccionar en el menú inferior) y selecciona uno de los botones que quieres que active el Workflow. Luego verás el selector CSS que se capturó — puedes editarlo manualmente en el campo mostrado:

Asegúrate de que todos los botones compartan una clase como .bot_launcher_button y agrégala aquí (si no está seleccionada ya), luego guarda y cierra:

Cualquier elemento en tu sitio que comparta esa clase CSS ahora activará el Workflow cuando se haga clic.

Una vez que hayas confirmado que el disparador está configurado, puedes comenzar a construir tu Workflow — agrega pasos como un mensaje de bienvenida, ramas basadas en si el visitante es un cliente conocido o un nuevo lead, y acciones como asignar la conversación a un equipo. Consulta construir tu Workflow para una guía completa de los tipos de pasos disponibles.

Por ejemplo, si usas un Workflow en un botón "Chat to us", podrías crear rutas separadas para nuevos leads y clientes actuales:

A veces, cuando abres tu sitio web usando el selector de elementos, el menú selector en la parte inferior no aparece. Esto suele ser causado por uno de los siguientes problemas. Los dos primeros pueden ser resueltos por cualquiera; el tercero y cuarto implican configuración técnica que puede requerir un desarrollador en tu equipo.

Para seleccionar un elemento de tu sitio web, el Messenger debe estar instalado en el sitio donde quieres construirlo. Si no está instalado, el menú selector no se cargará. Por ejemplo, si quieres activar un workflow en tu producto, pero solo tienes Messenger instalado para visitantes desconectados, el menú selector no aparecerá dentro de tu producto.

Si no tienes Messenger instalado, lee estas guías para comenzar:

El menú selector no funcionará en una página donde tu sitio esté incrustado dentro de un iframe de terceros.

El Intercom Messenger siempre se renderiza en su propio iframe (un marco en línea — una forma de incrustar una página web dentro de otra). Esto es un comportamiento esperado y no puede cambiarse. Sin embargo, si tu sitio o producto se carga dentro de un iframe de terceros (por ejemplo, dentro de una App de Shopify o un Plugin de Figma), el Messenger no puede acceder a la información de la página principal que contiene el iframe.

En estos casos, no se admite seleccionar un elemento para activar un Workflow.

El menú selector usa la propiedad window.opener — una API del navegador que permite que el selector se comunique con la app de Intercom en la pestaña que abrió tu sitio web. Si el JavaScript de tu sitio (o una librería de terceros) sobrescribe window.opener a null, el menú selector no podrá enviar datos y no se cargará.

Verifica tu encabezado Cross-Origin-Opener-Policy
El encabezado Cross-Origin-Opener-Policy (COOP) de tu servidor controla si una página puede comunicarse con la ventana que la abrió. Si tu encabezado COOP está configurado en same-origin, los navegadores automáticamente establecen window.opener a null, lo que impide que el menú selector se cargue. Para solucionarlo, pide a tu desarrollador que cambie el valor del encabezado a unsafe-none o que elimine el encabezado por completo.

Si tienes el espacio de trabajo correcto instalado en tu sitio y el menú selector aún no se carga, chatea con nosotros en el Messenger y estaremos encantados de ayudarte.