Use este artigo para criar, configurar e lançar uma mensagem de banner. Você aprenderá a compor o conteúdo do banner, escolher uma opção de fechamento, adicionar um call-to-action, segmentar um público, definir um objetivo, agendar a entrega e visualizar antes de publicar. Banners estão disponíveis nos planos Essential, Advanced e Expert.

Criar um banner

Primeiro, vá para Outbound no menu principal e clique em + Nova mensagem no canto superior direito.

Captura de tela da página Outbound no Intercom mostrando o botão + Nova mensagem no canto superior direito.

Então, escolha Banner como seu tipo de conteúdo.

Captura de tela do seletor de tipo de conteúdo no editor de mensagens do Intercom com a opção Banner destacada.

Você também pode optar por começar com um modelo pré-fabricado escolhendo este tipo de conteúdo na barra lateral esquerda.

Captura de tela do seletor de modelos no editor de mensagens do Intercom, mostrando o tipo de conteúdo Banner selecionado na barra lateral esquerda.

Este tutorial começa com um banner em branco.

Nota: Banners são exibidos no Messenger web por padrão. Aplicativos móveis nativos — incluindo aqueles que usam o SDK do Intercom mobile Messenger (iOS e Android) — não suportam banners nativamente. Para exibir banners em apps móveis, quiosques ou outras superfícies não web, use a Contacts Banners API (disponível sob Intercom-Version: Preview).

Primeiro, dê um título ao seu banner.

Captura de tela do editor de banner mostrando o campo Título no topo da etapa de composição.

Então, componha o conteúdo do seu banner. Você pode usar negrito, itálico, links e emoji 😉

Captura de tela do editor de mensagem de banner mostrando a área de composição de texto com opções de formatação em negrito, itálico, link e emoji.

Para inserir emojis, você pode:

No macOS - clique com o botão direito em qualquer lugar do campo de entrada e selecione Emojis & Símbolos.
No Windows - pressione as teclas Windows + .

Smart links são links profundos para conteúdos específicos do Intercom (como artigos ou tours de produto). Eles só podem ser inseridos destacando o texto no editor de banner e usando o inseridor de links para selecionar o conteúdo alvo. O conteúdo alvo deve estar ativo — conteúdo pausado ou não publicado não estará disponível para linkar.

Nota:

Smart links em Banners não estarão disponíveis no mobile.
É uma boa ideia manter sua mensagem sucinta. Para mensagens mais longas, tente enviar uma mensagem de Chat ou Post.
Banners não suportam quebras de linha. A tecla Enter não cria uma nova linha dentro do editor de texto do banner — esta é uma limitação conhecida. A formatação é limitada a negrito, itálico, links e emoji. Se precisar de conteúdo em várias linhas, considere usar uma mensagem de Chat ou Post.

Sempre que possível, personalize sua mensagem de banner com atributos de dados como nome do cliente ou informações da empresa:

Captura de tela animada mostrando como inserir um atributo de dados (como nome do cliente) em uma mensagem de banner usando o seletor de atributos.

Em seguida, escolha quem será o remetente do banner e se deseja incluir o avatar dele.

O banner deve ser descartável?

Em seguida, decida se deseja mostrar um botão de fechamento no seu banner:

Captura de tela da configuração de fechamento no editor de banner, mostrando o botão para mostrar ou ocultar o botão de fechamento.

Um botão de fechamento permite que seus clientes escondam a mensagem assim que a lerem:

Captura de tela de um banner ativo exibido em uma página web com um botão de fechamento (×) visível no lado direito.

Isso é perfeito para lembretes amigáveis, promoções ou outras mensagens não urgentes.

Se você optar por ocultar o botão de fechamento, o banner permanecerá para seus clientes até que eles não correspondam mais às regras do público ou tenham completado a ação configurada na seção Escolher uma ação.

Importante:

Se você ocultar a opção de fechamento em um banner existente, qualquer pessoa que o tenha fechado verá ele novamente.
Se um cliente corresponder ao público de vários banners e o primeiro for não descartável, ele não receberá banners subsequentes. — Para enviar outros banners primeiro, pause temporariamente o banner não descartável, depois o ative novamente e ele será enviado após outros banners ativos.
Banners em uma série só serão exibidos uma vez, independentemente de terem um botão de fechamento ou não, e o usuário continuará seu caminho na Série.

Importante: Fechamentos são permanentes e armazenados no servidor. Uma vez que um cliente fecha um banner, ele nunca mais aparecerá para ele — mesmo que ele limpe o cache do navegador, mude de navegador ou use um novo dispositivo. Fechamentos estão vinculados à identidade Intercom do cliente, não ao estado local do navegador. Se precisar mostrar um banner novamente para um cliente que já o fechou, será necessário criar um novo banner.

Banners persistentes (não descartáveis) são perfeitos para comunicações mais urgentes/importantes com seus clientes. Por exemplo:

Mostre um banner até que um usuário tenha pago uma fatura não paga.
Lembre um usuário que ele está trabalhando com um workspace/dados de teste.
Mostre um banner relacionado à manutenção da plataforma enquanto o problema persistir.

Escolha um call-to-action

Agora é hora de escolher a ação mais adequada ao seu objetivo para a mensagem.

Captura de tela do seletor de ação no editor de banner mostrando as opções disponíveis: Nenhuma, Abrir uma URL, Abrir uma URL via botão, Pedir reações, Coletar e-mails de visitantes e Iniciar um Product Tour.

Se você está enviando uma mensagem apenas para notificar ou alertar seus clientes, e não há necessidade de eles tomarem alguma ação, deixe como ‘Nenhuma’. Caso contrário, o banner pode:

Abrir uma URL.
Abrir uma URL via um botão.
Peça por reações com emoji.
Colete os endereços de email dos visitantes.
Inicie um Tour do Produto.

Dependendo da ação que você escolher, há diferentes opções para configurar.

Abrir uma URL

Esta ação adiciona um link de call-to-action (CTA) ao final da sua mensagem de banner. Você pode definir:

O texto do link.
A URL a ser aberta.
Se o link deve abrir em uma nova aba ou não.
Se o banner deve ser dispensado após o clique no link ou não.

Captura de tela das configurações da ação Abrir uma URL no editor de banner, mostrando campos para texto do link, URL, alternância de nova aba e alternância de dispensar ao clicar.

Inclua atributos de usuário ou empresa para uma URL dinâmica. Basta clicar no ícone {...} ao passar o mouse sobre o campo URL:

Captura de tela animada mostrando como adicionar uma URL dinâmica a um banner clicando no ícone seletor de atributos ({...}) no campo URL.

Abrir uma URL via botão

Esta ação adiciona um botão de call-to-action (CTA) ao final da sua mensagem de banner. Você pode definir:

O texto do link.
A URL a ser aberta.
Se o link deve abrir em uma nova aba ou não.
Se o banner deve ser dispensado após o clique no link ou não.

Captura de tela das configurações da ação Abrir uma URL via botão no editor de banner, mostrando campos para texto do botão, URL, alternância de nova aba e alternância de dispensar ao clicar.

Você também pode selecionar uma cor para o seu botão:

Captura de tela do seletor de cor do botão no editor de banner, mostrando uma cor personalizada sendo aplicada ao botão CTA.

Peça por reações

Esta ação permite coletar feedback rápido dos clientes na forma de emoji. Basta escolher quais emojis eles poderão escolher e se o banner deve ser dispensado após a seleção.

Nota: Um fluxo de trabalho não pode ser iniciado apenas por uma reação a um banner externo. Em vez disso, uma reação pode ser usada para definir um público no gatilho de um fluxo de trabalho ou como condição dentro de um ramo.

Colete emails dos visitantes

Esta ação adicionará um campo ao final da sua mensagem para coletar facilmente endereços de email dos visitantes do seu site.

Nota: Quando um banner inclui um coletor de email, uma regra oculta é aplicada automaticamente para que o banner seja exibido apenas para visitantes ou leads cujo endereço de email é desconhecido. Se o endereço de email de um cliente já for conhecido pelo Intercom, o banner não será exibido para ele.

Inicie um Tour do Produto

Esta ação permite que seus users entrem diretamente no Tour do Produto de sua escolha, abrindo na mesma aba ou em uma nova.

Nota: Você só pode escolher Tours do Produto com uma URL compartilhável ativada.

Estilize seu banner

Na seção Estilo do editor de banner, escolha uma cor de fundo para seu banner e se ele deve aparecer no topo ou na parte inferior da sua página. Você também pode escolher entre dois estilos de layout: inline ou flutuante.

As duas opções de layout para posicionamento do banner são descritas abaixo.

Inline

Um banner inline é em largura total e fica entre o conteúdo da sua página e o topo da janela. Conforme você rola, o conteúdo da página se move atrás do banner.

Flutuante

Um banner flutuante fica centralizado na sua página e fica acima do conteúdo, cobrindo o que estiver atrás dele. Ele não se move enquanto você rola.

Cor do Texto

Quando você escolhe uma cor de fundo para seu banner, a cor do texto é ajustada automaticamente para contraste e legibilidade:

Nota: Não é possível criar banners através de HTML ou CSS personalizados. Se seu banner estiver sobrepondo elementos fixos na sua página (como uma barra de navegação), veja a seção Banner inline sobrepondo a navbar abaixo para uma correção em CSS.

Nota: Se seu Messenger estiver configurado para modo escuro, o texto do banner pode aparecer preto no ambiente ao vivo mesmo que tenha aparecido branco na pré-visualização do editor. A cor do texto é definida automaticamente com base no contraste com a cor de fundo — mas esse ajuste automático nem sempre considera temas de sites em modo escuro, o que pode resultar em texto preto sobre fundo escuro. Não há controle manual sobre a cor do texto do banner. Se isso for um problema, tente usar uma cor de fundo clara para seu banner para que o texto permaneça legível independentemente do tema do site.

Dica: Se quiser testar diferentes estilos da sua mensagem de banner, experimente um teste A/B. Saiba mais neste artigo.

Defina um público para seu banner

Na etapa Escolha seu público, defina os filtros que determinam quais clientes verão seu banner. As regras de público são avaliadas dinamicamente, então clientes que deixarem de corresponder às regras não verão mais o banner.

Por exemplo, se você está anunciando um desconto no seu plano Pro, pode direcionar todos os clientes que estão atualmente no seu plano Free:

Captura de tela do construtor de regras de público no editor de banner, mostrando uma regra que direciona clientes cujo Plano é Free.

Dica: Ao direcionar uma URL, é uma boa ideia copiá-la e colá-la diretamente do seu app ou site, pois isso captura quaisquer caracteres ocultos na barra de endereços do navegador, como barras finais.

Nota: "Começa com" vs "contém" para direcionamento por URL. Ao direcionar por URL, o filtro começa com exige que a URL da página comece exatamente com o texto que você inserir — incluindo o protocolo (ex.: https://example.com/pricing). Ele não corresponderá a uma URL que contenha essa string em outro lugar. O filtro contém corresponde a qualquer URL com o texto aparecendo em qualquer lugar. Se seu banner não estiver aparecendo nas páginas esperadas, verifique se está usando o tipo correto de filtro e se o prefixo da URL está exato, incluindo https://.

Como funciona a prioridade de exibição do banner

Se um cliente corresponder às regras de público para vários banners, será exibido o banner que foi ativado primeiro. Depois que o cliente fechar esse banner, será exibido o próximo na ordem em que cada banner foi ativado.

Defina um objetivo para seu banner

Definir um objetivo permite que o Intercom meça se seu banner está gerando a ação desejada. Um objetivo é uma condição que, quando atendida, é contabilizada como uma conversão para esse banner.

Por exemplo, se você está incentivando clientes a atualizar seu plano, um objetivo adequado é Plano é Pro. O Intercom acompanhará quantos clientes que viram o banner posteriormente atendem a essa condição:

Para definir um objetivo, vá para a etapa Objetivo no editor de banner e defina a condição que deseja acompanhar. No exemplo abaixo, o objetivo está definido como Plano é Pro:

Captura de tela da etapa de definição de objetivo no editor de banner, mostrando um objetivo configurado como Plano é Pro.

Você também pode testar a eficácia do seu banner com um teste de grupo de controle. Saiba mais neste artigo.

Você também pode agendar seu banner para exibir apenas durante um intervalo de datas específico ou em horários específicos do dia. Use a etapa Agendamento para definir uma data de início, data de término ou ambas. Fora do período agendado, o banner não será exibido, mesmo para clientes que correspondam às regras de público.

Captura de tela da etapa de agendamento no editor de banner, mostrando opções de data de início, data de término e horário do dia.

Visualize e ative seu banner

Depois de configurar seu banner, clique em Salvar e Fechar. Um botão Visualizar aparecerá no canto superior direito do editor de banner. Use-o para ver como o banner ficará no seu site antes de ativá-lo.

Captura de tela do editor de banner após clicar em Salvar e Fechar, mostrando o botão Visualizar no canto superior direito.

Quando estiver satisfeito com a visualização, clique em Ativar. O banner começará a ser exibido imediatamente para clientes que correspondam às suas regras de público. Você pode pausar ou editar o banner a qualquer momento na página Outbound.

Exibir banner em superfícies não web

Por padrão, os banners são exibidos pelo Messenger web. Apps móveis nativos — seja usando o Intercom Messenger SDK ou não — não suportam banners nativamente. Para exibir banners em apps iOS ou Android, quiosques ou outras superfícies não web, use a Contacts Banners API para buscar e exibir banners no servidor e registrar fechamentos.

Como funciona

A API oferece dois endpoints:

GET /contacts/{id}/banners — retorna os banners que um contato corresponde atualmente, cada um com conteúdo e um view_id.
POST /contacts/{id}/banners/{view_id}/dismiss — registra o fechamento de uma visualização de banner.

A Contacts Banners API está disponível sob Intercom-Version: Preview. Veja a referência da API para detalhes completos dos endpoints.

Comportamentos principais

A correspondência de público é realizada no servidor: Isso significa que a API avalia atributos do contato, atributos da empresa e outras regras do lado do servidor. Banners que dependem de regras de direcionamento do lado do cliente (como URL da página ou tempo na página) não são retornados por este endpoint, pois essas regras só podem ser avaliadas no navegador.
Impressões são registradas quando você chama o endpoint de listagem: Chamar GET /contacts/{id}/banners conta cada banner retornado como exibido. Só chame este endpoint no momento em que pretende exibir o banner — não de forma especulativa ou a cada carregamento de página.
Fechamentos são compartilhados entre superfícies: Quando um cliente fecha um banner via POST /contacts/{id}/banners/{view_id}/dismiss, esse fechamento é compartilhado com o Messenger web. Se o mesmo cliente visitar seu app web depois, ele não verá um banner que já fechou no mobile — e vice-versa.

Quando usar esta API

A Contacts Banners API é projetada para:

Apps móveis nativos (iOS e Android) — incluindo aqueles que usam o Intercom Messenger SDK, pois banners não são suportados nativamente pelo SDK móvel.
Interfaces de quiosques ou exibição em loja.
Ferramentas ou portais incorporados onde o Messenger web não pode ser instalado.

Se você está exibindo banners em um app web padrão onde o Messenger web já está instalado, não precisa desta API — os banners serão exibidos automaticamente para clientes que correspondam às regras de público.

Como usar a Contacts Banner API

Para usar a Contacts Banners API:

Crie e configure seu banner no Outbound.
Defina seu público usando atributos do lado do servidor (dados do contato ou da empresa). Não dependa de regras de URL da página ou tempo na página se precisar que o banner apareça via API.
Ative o banner.
Chame GET /contacts/{id}/banners no ponto de exibição para recuperar banners correspondentes para um contato.
Renderize o conteúdo do banner no seu app ou interface.
Quando um cliente fechar o banner, chame POST /contacts/{id}/banners/{view_id}/dismiss para registrar o fechamento.

Dica: Para referência completa dos endpoints e esquemas de requisição/resposta, veja a documentação da Contacts Banners API.

Banner inline sobrepondo a barra de navegação

Se você tem elementos fixos no seu site, é esperado que o banner inline sobreponha a barra de navegação. Há uma forma de resolver isso alterando um pouco o HTML/CSS do seu site.

Os banners inline adicionam position:relative e margin-top: 48px ao corpo da página (essa é a altura do banner).

Se você tem uma barra de navegação no seu site que usa position:fixed ou position:sticky, então sua barra de navegação estará sempre no topo. Isso significa que, quando você ativar um banner inline, ele não poderá “empurrar” a barra de navegação para baixo como normalmente faria, resultando na sobreposição da barra.

Fazer as seguintes alterações no seu CSS garantirá que o banner inline não sobreponha sua barra de navegação:

Use position:absolute para posicionar a barra de navegação dentro do corpo.
Se você atualmente tem top: 0 após position:fixed no seu site, substitua isso por margin-top: 0

Alternativamente, você pode optar por usar banners flutuantes ou posicionar o banner na parte inferior da página.

Teste seu banner

Antes de lançar um banner para toda a sua base de clientes, você pode testar seu comportamento em um ambiente ao vivo restringindo o público apenas a você ou a um membro da equipe.

Identifique um usuário de teste: Certifique-se de que você tem um perfil de usuário no seu workspace ao qual possa acessar (por exemplo, seu próprio e-mail corporativo).
Defina regras específicas de público: Na seção Escolha seu público, adicione uma regra para direcionar apenas esse usuário específico.
- Exemplo: Email é name@company.com
Coloque o banner no ar: Como o público está estritamente limitado ao seu email, nenhum outro cliente verá este banner.
Verifique o comportamento: Faça login no seu produto como esse usuário de teste. Confirme que o banner aparece, está correto e que os botões ou links funcionam como esperado.
Atualize o público: Quando estiver satisfeito com o teste, edite as regras de público do banner para direcionar seu segmento de clientes pretendido (por exemplo, "Todos os users" ou Plan é Free) para lançá-lo de verdade.

Como criar uma mensagem de banner