Leva apenas alguns minutos para instalar o Messenger no seu site. Uma vez instalado, você poderá receber, integrar e apoiar clientes enquanto eles se tornam users fiéis do seu app.
Os dois passos necessários para uma instalação completa e segura do Messenger são:
Você precisará de um teste ou assinatura Intercom para instalar o Messenger.
Instalação inicial do Messenger para users na web
Primeiro, vá para Configurações > Canais > Messenger > Instalar e escolha Instalar para web.
Escolha como instalar o Messenger
Selecione como deseja instalar escolhendo um dos seguintes métodos:
Trecho de código
React
Angular
Vue
Ember
WordPress
Google Tag Manager
Shopify
Segment
Cada método fornece passos específicos quando selecionado. Muitos desses métodos oferecem uma instalação via node package manager (NPM) para facilitar para você.
Peça ajuda ao seu desenvolvedor (opcional)
Se necessário, você pode pedir a um colega (como um engenheiro) para completar a instalação. Basta clicar em Convidar colega.
Depois de inserir o endereço de e-mail dele, um convite será enviado por e-mail permitindo que ele entre no espaço de trabalho da sua equipe.
O colega convidado receberá um assento lite nos planos Advanced / Expert e um assento completo nos planos Essential. Eles terão as permissões mínimas necessárias para instalar o Messenger:
Pode gerenciar configurações gerais e de segurança
Pode gerenciar configurações do Messenger
Pode gerenciar dados do espaço de trabalho
Instale você mesmo
Se você selecionou Trecho de código, React, Angular, Vue, Ember ou Shopify como método de instalação, terá a opção de completar a instalação para:
Para users com login - Instale o Messenger para users logados. O Messenger mostrará informações como nomes de clientes e conversas anteriores em vários dispositivos.
Para visitantes do site sem login - Instale o Messenger para visitantes anônimos do site que não estão logados. As conversas serão salvas no navegador via cookie.
Recomendamos instalar o Messenger para users e visitantes.
Você deve então "Habilitar conexão com o messenger".
Importante: Se isso estiver desativado, todas as solicitações para o Intercom falharão. As APIs do Messenger não são ativadas por padrão. Como você pode ver ao acessar a página de instalação do Messenger, os exemplos de código ficam cinza até que você ative essa opção. Isso ativa as APIs do Messenger para seu espaço de trabalho e garante que ele comece a aceitar tráfego. Você precisará ativar isso para começar a receber tráfego de users.
Depois de configurar seu Messenger, também recomendamos protegê-lo com JWTs!
Instale o Intercom pelo método escolhido
Agora siga as instruções fornecidas para o método selecionado. Por exemplo, se você escolheu WordPress, verá as instruções abaixo para esse método.
Se você selecionou o método Trecho de código, React, Angular, Vue, ou Ember, receberá um pacote NPM contendo um trecho de código para copiar e colar no código do seu próprio app. Esse trecho já vem preenchido com seu ID único do espaço de trabalho, então está pronto para uso.
Você também pode encontrar o pacote diretamente no site NPM.
Existem vários outros templates disponíveis, como incluir o trecho de código em um app Node.js/Rails (Ruby)/Django (Python 3) ou PHP. Você também pode incluir o trecho de código em um app de página única ou usar a gem rails para instalar o trecho. Para Aplicações de Página Única (SPAs), siga o guia de instalação SPA para lidar com sua natureza dinâmica.
Clique em Copiar código e cole antes da tag </body> em cada página onde quiser que o Messenger apareça no seu app.
Depois, edite o código para enviar ao Intercom o endereço de e-mail ou user_id e a data de cadastro do user que está logado no momento.
Após adicionar o código, abra seu app e o Messenger aparecerá.
Encerre as sessões dos users ao sair
Certifique-se de também chamar o método de encerramento do Intercom para limpar as conversas dos seus clientes quando eles saírem do seu app.
Qualquer user que use um computador e navegador compartilhados com outra pessoa poderá ver o histórico de conversas do user que fez login mais recentemente até que o cookie expire. Por isso, é muito importante encerrar corretamente o Intercom quando a sessão de um user no seu app terminar (via logout manual ou automático).
Importante:
Você pode identificar users com um user_id ou endereço de e-mail.
Se você enviar um user_id e um endereço de e-mail, o user_id terá prioridade na identificação dos seus users.
Se optar por usar user_id, o endereço de e-mail ainda pode ser usado para identificar seus users no Intercom, então recomendamos ativar a verificação de identidade.
Você também pode enviar ao Intercom atributos personalizados sobre seus users.
Se você estiver usando o CSS
zoomna sua página web, certifique-se de que os widgets do Intercom não estejam recebendo esse estilo.
Opções de aparência
A primeira opção permite escolher se deseja mostrar ou ocultar o messenger para o público do seu site antes do lançamento. Caso contrário, o padrão é mostrar o messenger.
A segunda opção leva às Configurações do Messenger, onde você pode alterar as cores e o tema do messenger.
Verifique a instalação
Você pode verificar se a instalação foi bem-sucedida clicando em Verificar instalação. Este botão oferece uma notificação de sucesso se o Messenger for encontrado com sucesso ou indica se algo deu errado.
Se você instalou o Intercom Messenger e ele não está aparecendo corretamente, aqui estão algumas formas comuns de corrigir. A solução de problemas adicional inclui verificar restrições do navegador, como bloqueadores de anúncios ou navegação privada que podem bloquear o Messenger, além de evitar domínios de sufixo público para garantir visibilidade adequada.
Agora continue para a próxima etapa do processo de instalação e proteja seu messenger com JWTs.
Nota: Sem a Segurança do Messenger, seus users verão apenas os últimos 14 dias do histórico de conversas no Messenger. Saiba mais →
Aprenda como:
Instalando Intercom para um cliente
Se você não tem acesso ao espaço de trabalho Intercom, pode pegar o código JavaScript aqui 👇 Você precisará substituir manualmente WORKSPACE_ID pelo ID único do espaço de trabalho da sua conta 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>
O valor para created_at deve ser a data em que um cliente se inscreveu no seu app, site ou serviço, enviado como um timestamp Unix.
Instalando Intercom para espaços de trabalho hospedados na UE e AU
Para instalar o Intercom se você estiver usando nossa hospedagem na UE ou AU, será necessário fornecer um parâmetro adicional api_base. Os valores para isso estão listados na tabela abaixo.
Região de hospedagem de dados | Valor |
Estados Unidos (US) | |
União Europeia (EU) | |
Austrália (AU) |
Instale o Intercom em um ambiente desktop
Tecnicamente é possível incluir o Intercom em um aplicativo desktop, no entanto, não oferecemos suporte oficial para ambientes desktop. O Intercom Messenger foi projetado e desenvolvido para rodar em ambiente web (lista de navegadores suportados). Esses ambientes web suportam funcionalidades específicas que nosso Messenger depende (ex: Javascript e CSS).
Electron e tecnologias similares permitem construir aplicativos desktop usando tecnologia web, e é possível instalar o Intercom nesses tipos de aplicativos - existem até bibliotecas comunitárias para ajudar a instalar o Intercom em ambientes Electron, porém, não é algo que suportamos oficialmente.