Use este artigo para instalar o Intercom Messenger no seu site, conectar os dados dos clientes com segurança e testar se tudo está funcionando. Após a instalação, você poderá receber, integrar e apoiar clientes enquanto eles se tornam usuários fiéis do seu app.
Os passos para uma instalação completa e segura do Messenger são:
Escolha seu tipo de instalação.
Instale e teste o Messenger.
Conecte os dados dos seus clientes e proteja o Messenger (pule esta etapa se você escolheu apenas Visitors & leads).
Nota: Esta é a nova experiência de instalação do Messenger, que está sendo implementada gradualmente. Se seu workspace ainda não foi atualizado, use Instalar Intercom para visitantes e leads na web ou Instalar Intercom para users na web em vez disso.
Escolha seu tipo de instalação
Vá para Configurações > Canais > Messenger Live Chat > Visão geral, encontre o cartão Website e selecione Instalar no site.
Selecione seu tipo de instalação
Você será perguntado "Que informações sua equipe precisa na sua inbox?" e verá duas opções:
Visitors & leads (mais rápido para instalar) — As conversas não são vinculadas aos detalhes do user. Você pode completar a configuração adicional depois para identificar users logados.
Signed-in users, visitors & leads — As conversas de users logados incluem detalhes relevantes, dando à sua equipe o contexto necessário para oferecer suporte personalizado. Requer mudanças no frontend e backend.
Cada cartão mostra uma prévia do que sua equipe verá na Inbox para essa opção, para que você possa comparar antes de decidir. Selecione a opção que se encaixa no seu negócio e clique em Continuar.
Dica: Visitors & leads é a configuração mais rápida. Você pode voltar depois e completar a configuração de Signed-in users, visitors & leads quando sua equipe estiver pronta.
Peça ajuda a um desenvolvedor (opcional)
Se necessário, você pode pedir a um colega — como um engenheiro — para completar a instalação. Clique em Convidar colega, insira o e-mail dele e um convite será enviado permitindo que ele entre no seu workspace com 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 workspace
Escolha como instalar o Messenger
Selecione como deseja instalar escolhendo um dos seguintes métodos:
Usando código personalizado
Trecho de código
React
Angular
Vue
Ember
Ou através de uma das seguintes integrações
WordPress
Google Tag Manager
Shopify
Segment
Clicar em uma dessas opções a seleciona e revela os passos específicos para esse método. Muitos desses métodos oferecem uma instalação via Node.js Package Manager (NPM) para facilitar.
Nota: Para Aplicações de Página Única (SPAs), a abordagem padrão do trecho precisa de ajuste. Siga o guia de instalação SPA do Intercom para lidar corretamente com mudanças dinâmicas de página.
Instale o Intercom pelo método escolhido
Agora siga as instruções fornecidas para o método selecionado. Se você escolheu Trecho de código, React, Angular, Vue, ou Ember, receberá um trecho de código referenciando um pacote NPM. Esse trecho já vem preenchido com o ID único do seu workspace, então está pronto para uso.
Clique em Copiar código e cole antes da tag </body> em todas as páginas onde quiser que o Messenger apareça.
Depois, edite o código para enviar ao Intercom o endereço de email ou user_id e a data de cadastro do user que está logado:
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
};Após adicionar o código, abra seu app e o Messenger aparecerá.
Importante: Tenha em mente o seguinte ao identificar users:
Você pode identificar users com user_id ou endereço de email.
Se você enviar user_id e endereço de email, o user_id terá prioridade na identificação dos seus users.
Sempre envie user_id, email e user_hash dinamicamente do seu servidor para o user atualmente logado — nunca codifique ou armazene em cache a identidade de um único user no trecho.
Teste sua instalação
Clique em Testar sua instalação para confirmar que o Messenger está funcionando como esperado.
Quando passar, você verá a confirmação "Messenger está instalado."
Para o caminho Visitors & leads, a mensagem é: "Visitors podem agora iniciar conversas no seu site. Eles aparecerão na sua Inbox com um nome aleatório até compartilharem seus dados. Depois, personalize o Messenger. Ajuste cores, lançador e mensagem de boas-vindas para combinar com sua marca."
Para o caminho Signed-in users, visitors & leads, continue para a seção Conecte os dados dos seus clientes abaixo para finalizar a instalação.
A partir daqui, você pode clicar em Farei isso depois ou Personalizar seu Messenger para ir direto para a customização.
Encerre as sessões dos users ao sair
Garanta que você também chame o método shutdown do Intercom para limpar as conversas dos seus clientes quando eles saírem do seu app:
Intercom('shutdown');Dica: Chame Intercom('shutdown') dentro do manipulador do evento de logout ou equivalente — onde quer que seu app termine a sessão de um user. Isso limpa o cookie do Intercom imediatamente para que o próximo visitante comece uma sessão nova e anônima.
Qualquer user que use um computador e navegador compartilhados com outra pessoa poderá ver o histórico de conversas do user que fez login por último até que o cookie expire, por isso é importante chamar isso em todo logout.
Qualquer user que use um computador e navegador compartilhados com outra pessoa poderá ver o histórico de conversas do user que fez login por último até que o cookie expire, por isso é importante chamar isso em todo logout.
Conecte os dados dos seus clientes
Pule esta seção se você escolheu apenas Visitors & leads — sua instalação já estará completa após o teste acima. Se você escolheu Signed-in users, visitors & leads, continue abaixo para finalizar a conexão dos atributos dos seus users.
Nota: O caminho Signed-in users, visitors & leads requer mudanças no código frontend e backend. Você precisará de acesso de desenvolvedor para completar esta seção.
Gere um token para cada cliente para garantir que os dados dos seus clientes estejam seguros
No seu servidor, gere um JSON Web Token (JWT) assinado para cada user logado. Por exemplo, em 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' },
);
Você precisará da chave secreta do seu workspace para esta etapa — ela é mostrada (mascarada) na tela. Mantenha essa chave no seu servidor. Nunca a inclua no código do navegador ou do app.
Nota: As chaves são específicas para plataformas, e seu workspace pode ter mais de uma. Você pode criar, rotacionar ou decodificar uma chave nas configurações de segurança do Messenger.
Adicione o trecho atualizado ao seu site
Adicione uma linha ao trecho que você já instalou. O email é extraído do token e usado para representar com segurança a identidade do messenger.
Intercom({
app_id: 'your_app_id',
intercom_user_jwt: token,
});
Isso se aplica onde quer que você implemente a mudança, então qualquer local que compartilhe essa base de código também será conectado.
Teste sua instalação
Clique em Testar instalação para confirmar que o Messenger está funcionando como esperado.
💡 Dica: Precisa de mais ajuda? Obtenha suporte no nosso Fórum da Comunidade. Encontre respostas e receba ajuda do Suporte Intercom e Especialistas da Comunidade.
Artigos Relacionados