Use este artigo para configurar um Workflow que abre no Messenger quando um cliente clica em um botão ou elemento específico no seu site. Isso está disponível para colegas que têm o Messenger instalado no site e acesso a Workflows no plano.

Por exemplo, você poderia:

Vá para Fin AI Agent > Workflows e clique em Novo workflow.

Escolha Criar do zero e use o gatilho "Quando o cliente clica em um elemento do site".

Agora você precisará configurar as definições para selecionar um botão no seu site que disparará o Workflow. Basta escolher Selecionar elemento no seu site para lançar a partir.

Então, escolha o site onde você gostaria de adicionar este Workflow e clique em Abrir site.

Você será levado ao seu site em uma nova janela. No menu na parte inferior da página, escolha "Navegar" para ir à página que contém o botão que você quer que dispare seu Workflow:

Uma vez na página certa, clique em Selecionar no menu, depois clique no elemento do site que você deseja.

Depois de selecionar o elemento certo, clique em Salvar e fechar. Você será levado de volta ao construtor de Workflow, onde o elemento selecionado aparecerá como o gatilho confirmado. Para verificar se foi registrado corretamente, confira se a configuração do gatilho agora mostra um seletor CSS — este é o endereço único do elemento na sua página, por exemplo .contact-button ou #chat-trigger. Se mostrar um seletor genérico em vez de um específico para seu botão, repita a seleção.

Se você tem vários botões no seu site e gostaria que todos disparassem o mesmo Workflow, você pode definir manualmente uma classe CSS compartilhada. Uma classe CSS é um rótulo que você adiciona aos elementos HTML no código do seu site — qualquer elemento com essa classe pode então agir como um gatilho. Um seletor CSS é a regra de correspondência que o Intercom usa para encontrar esse elemento na página, por exemplo .bot_launcher_button.
​

Antes de configurar isso, observe a restrição de um botão por página abaixo:

Primeiro, use o seletor visual (abra seu Workflow, clique em Selecionar elemento no seu site para lançar a partir e clique em Selecionar no menu inferior) e selecione um dos botões que você gostaria que disparasse o Workflow. Você verá então o seletor CSS que foi capturado — você pode editá-lo manualmente no campo mostrado:

Certifique-se de que todos os botões compartilham uma classe como .bot_launcher_button e adicione-a aqui (se ainda não estiver selecionada), depois salve e feche:

Qualquer elemento no seu site que compartilhe essa classe CSS agora disparará o Workflow quando clicado.

Depois de confirmar que o gatilho está configurado, você pode começar a construir seu Workflow — adicione etapas como uma mensagem de boas-vindas, ramificações baseadas em se o visitante é um cliente conhecido ou um novo lead, e ações como atribuir a conversa a uma equipe. Veja construindo seu Workflow para um guia completo dos tipos de etapas disponíveis.

Por exemplo, se você estiver usando um Workflow em um botão "Chat to us", pode criar caminhos separados para novos leads e clientes atuais:

Às vezes, quando você abre seu site usando o seletor de elementos, o menu do seletor na parte inferior não aparece. Isso geralmente é causado por um dos seguintes problemas. Os dois primeiros podem ser resolvidos por qualquer pessoa; o terceiro e o quarto envolvem configuração técnica que pode exigir um desenvolvedor na sua equipe.

Para selecionar um elemento do seu site, o Messenger deve estar instalado no site onde você quer construí-lo. Se não estiver instalado, o menu do seletor não será carregado. Por exemplo, se você quiser disparar um workflow no seu produto, mas só tem o Messenger instalado para visitantes desconectados, o menu do seletor não aparecerá dentro do seu produto.

Se você não tem o Messenger instalado, leia estes guias para começar:

O menu do seletor não funcionará em uma página onde seu site está incorporado dentro de um iframe de terceiros.

O Intercom Messenger é sempre renderizado em seu próprio iframe (um frame embutido — uma forma de incorporar uma página web dentro de outra). Isso é comportamento esperado e não pode ser alterado. No entanto, se seu site ou produto estiver carregado dentro de um iframe de terceiros (por exemplo, dentro de um app Shopify ou plugin Figma), o Messenger não pode acessar informações da página pai que contém o iframe.

Nesses casos, selecionar um elemento para disparar um Workflow não é suportado.

O menu do seletor usa a propriedade window.opener — uma API do navegador que permite que o seletor se comunique de volta com o app Intercom na aba que abriu seu site. Se o JavaScript do seu site (ou uma biblioteca de terceiros) sobrescrever window.opener para null, o menu do seletor não poderá enviar dados de volta e não será carregado.

Verifique seu cabeçalho Cross-Origin-Opener-Policy
O cabeçalho Cross-Origin-Opener-Policy (COOP) do seu servidor controla se uma página pode se comunicar com a janela que a abriu. Se seu cabeçalho COOP estiver definido como same-origin, os navegadores automaticamente definem window.opener para null, o que impede o carregamento do menu do seletor. Para corrigir isso, peça ao seu desenvolvedor para alterar o valor do cabeçalho para unsafe-none ou remover o cabeçalho completamente.

Se você tem o workspace correto instalado no seu site e o menu do seletor ainda não carrega, converse conosco no Messenger e teremos prazer em ajudar.