Como obter e instalar o código de incorporação do seu widget web Zendesk

O widget web Zendesk é uma das maneiras mais rápidas de adicionar suporte ao cliente ao seu site. É aquela pequena bolha de chat que você vê no canto dos sites, permitindo que os visitantes pesquisem sua central de ajuda, iniciem uma conversa ou enviem um ticket sem sair da página.

Mas, antes que os clientes possam usá-lo, você precisa obter o código de incorporação e adicioná-lo ao seu site. Este guia explica exatamente como fazer isso, quer você esteja usando o widget Messaging mais recente ou a versão Clássica.

Entendendo as duas versões do widget web Zendesk

O Zendesk oferece dois tipos diferentes de widget, e saber qual você tem é importante para a instalação.

O Messaging Web Widget é a versão moderna. Ele suporta conversas contínuas (os clientes podem sair e voltar ao mesmo chat), agentes de IA nativos e mensagens em tempo real. Isso é o que o Zendesk recomenda para novas configurações. Você pode aprender mais no guia de instalação do Messaging.

O Web Widget (Classic) é a versão legada. Ele usa chats baseados em sessão e oferece opções de formulário mais detalhadas. Algumas contas Zendesk mais antigas ainda usam isso, e é totalmente suportado. Consulte a documentação do widget Classic para obter mais detalhes.

Aqui está como eles se comparam:

Se você não tiver certeza de qual você tem, verifique seu Admin Center. O caminho de navegação informa imediatamente. Para mais detalhes, consulte a documentação do desenvolvedor da Zendesk.

O que você precisará antes de começar

Antes de pegar seu código de incorporação, certifique-se de ter:

• Uma conta Zendesk com acesso de administrador
• Acesso ao HTML do seu site ou sistema de gerenciamento de conteúdo
• Uma central de ajuda ativada (necessária para a opção de incorporação automática do widget Messaging)
• Familiaridade básica com onde colocar scripts no seu site

Se você estiver usando WordPress, Shopify ou outra plataforma, precisará de acesso de administrador para editar arquivos de tema ou instalar plugins. Para equipes que desejam adicionar respostas alimentadas por IA ao seu widget, o eesel AI oferece uma integração com o Zendesk que aprende com sua central de ajuda e tickets anteriores.

Passo 1: Acesse as configurações do seu widget no Zendesk

Primeiro, navegue até o lugar certo no seu Admin Center do Zendesk.

Para o Messaging Web Widget: Vá para Admin Center > Canais > Mensagens e redes sociais > Mensagens.

Para o Classic Web Widget: Vá para Admin Center > Canais > Clássico > Widget Web.

Você verá uma lista de widgets se tiver vários configurados. Clique no nome do widget que você deseja instalar. Isso abre o painel de configuração onde você pode personalizar a aparência e o comportamento antes de gerar o código.

Passo 2: Configure a aparência e os recursos do seu widget

Antes de gerar o código de incorporação, configure como você deseja que o widget pareça e funcione. Isso evita que você tenha que atualizá-lo mais tarde.

Configurações visuais para configurar:

• Cores: Defina a cor primária da sua marca para botões e cabeçalhos
• Posição: Escolha o canto inferior esquerdo ou o canto inferior direito
• Estilo do iniciador: Selecione o ícone e o texto que aparecem no botão
• Logotipo: Carregue o logotipo da sua empresa (os planos Enterprise podem remover a marca Zendesk)

Componentes funcionais para habilitar:

• Pesquisa na central de ajuda: Permite que os clientes encontrem artigos antes de entrar em contato com você
• Formulário de contato: Permite o envio de tickets diretamente do widget
• Chat ao vivo: Permite conversas em tempo real com agentes
• Solicitações de retorno de chamada: Permite que os clientes solicitem uma ligação telefônica (requer Zendesk Talk)

Configurações de comportamento:

• Horário comercial: Defina quando o widget aparece ou altera as mensagens
• Saudações: Configure mensagens de boas-vindas automatizadas
• Responsividade móvel: Garanta que o widget funcione em telefones e tablets

Reserve um momento para visualizar suas alterações. O Zendesk fornece uma visualização ao vivo para que você possa ver exatamente como o widget aparecerá para os clientes.

Passo 3: Gere e copie seu código de incorporação

Depois de estar satisfeito com a configuração, é hora de obter o código real.

Role para baixo até a seção Instalação e clique para expandi-la. Você verá um snippet JavaScript que se parece com isto:

<!-- Start of Zendesk Widget script -->
<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=YOUR_WIDGET_KEY"></script>
<!-- End of Zendesk Widget script -->

Clique no ícone Copiar para copiar o snippet inteiro para a sua área de transferência. Este código contém sua chave de widget exclusiva, que conecta o widget à sua conta Zendesk específica. Para mais detalhes sobre o processo de instalação, consulte o guia de instalação do Messaging da Zendesk.

Se você precisar enviar este código para um desenvolvedor, clique em Enviar código por e-mail para um membro da equipe.

Passo 4: Adicione o código ao seu site

Agora você precisa colar este código no HTML do seu site. A colocação é importante: adicione-o logo antes da tag de fechamento </body> em cada página onde você deseja que o widget apareça.

Sites HTML padrão

Abra os arquivos HTML do seu site e cole o snippet antes de </body>. Se você usar um sistema de modelo, adicione-o ao seu modelo base para que ele apareça em todas as páginas.

WordPress

Você tem várias opções:

• Editor de Temas: Vá para Aparência > Editor de Arquivos de Tema, abra footer.php e cole antes de </body>
• Customizador: Alguns temas têm uma seção "Scripts Personalizados" ou "Código de Rodapé" em Aparência > Personalizar
• Plugin: Use um plugin como "Insert Headers and Footers" para adicionar código sem editar os arquivos do tema

Shopify

• Vá para Loja Online > Temas
• Clique em Ações > Editar código no seu tema ativo
• Abra theme.liquid na pasta Layout
• Cole o snippet antes da tag de fechamento </body>
• Salve

Outras plataformas

A maioria dos sistemas de gerenciamento de conteúdo tem uma maneira de adicionar scripts personalizados:

• Wix: Configurações > Código Personalizado
• Squarespace: Configurações > Avançado > Injeção de Código
• Webflow: Configurações do Projeto > Código Personalizado

Depois de adicionar o código, salve suas alterações e limpe todos os caches. Para obter mais orientações específicas da plataforma, consulte a documentação do desenvolvedor da Zendesk.

Passo 5: Verifique sua instalação

Não apenas presuma que funcionou. Reserve um minuto para verificar se tudo está funcionando corretamente.

Abra seu site em uma janela anônima ou de navegação privada. Isso garante que você está vendo como um novo visitante veria, sem dados em cache interferindo.

Verifique estas coisas:

• O iniciador do widget aparece no canto escolhido
• Clicar nele abre a interface do widget
• Sua marca (cores, logotipo) é exibida corretamente
• A pesquisa na central de ajuda funciona se estiver habilitada
• Você pode iniciar um chat ou enviar um ticket de teste

Teste tanto no desktop quanto no celular para garantir o comportamento responsivo. O widget deve se adaptar a telas menores sem quebrar o layout do seu site.

Se o widget não aparecer, verifique o console do desenvolvedor do seu navegador para erros JavaScript. Problemas comuns incluem:

• O script sendo bloqueado por uma política de segurança de conteúdo
• Conflitos com outros widgets de chat
• O código sendo colocado no local errado

Personalizando seu widget além das configurações básicas

Depois que o widget básico estiver funcionando, você pode explorar opções de personalização avançadas através da API JavaScript.

Controle programático

Você pode controlar o comportamento do widget com comandos JavaScript:

// Abre o widget
zE('webWidget', 'open');

// Define o nome do visitante
zE('webWidget', 'prefill', {
  name: 'John Doe',
  email: 'john@example.com'
});

Modo incorporado

Para mais controle sobre a colocação, use o modo incorporado para colocar o widget dentro de um contêiner específico:

window.zEMessenger = {
  autorender: false
};

zE('messenger', 'render', {
  mode: 'embedded',
  widget: {
    targetElement: '#support-container'
  }
});

Isso é útil para criar páginas de suporte dedicadas ou integrar o widget em painéis. Saiba mais na documentação do modo incorporado.

Visitantes autenticados

Se seus usuários fizerem login no seu site, você pode autenticá-los no widget para que eles vejam seu histórico de conversas e não precisem inserir novamente os detalhes de contato. Isso requer a configuração da autenticação JWT nas suas configurações do Zendesk.

Solução de problemas comuns de incorporação

Mesmo com instruções claras, as coisas às vezes dão errado. Veja como corrigir problemas comuns.

Widget não aparece

• Limpe seu cache: Os navegadores armazenam em cache fortemente; tente uma atualização forçada (Ctrl+F5 ou Cmd+Shift+R)
• Verifique se há erros JavaScript: Abra o DevTools do navegador e procure por erros vermelhos no console
• Verifique se o script foi carregado: Na guia Rede do DevTools, verifique se a solicitação do script Zendesk foi bem-sucedida
• Bloqueio de firewall: Garanta que seu firewall permita solicitações para zdassets.com e zendesk.com

Erros de colocação de código

• Certifique-se de que o código está antes de </body>, não depois
• Não coloque dentro de <head> (isso pode retardar o carregamento da página)
• Garanta que você não quebrou acidentalmente a estrutura HTML ao colar

Conflitos com outras ferramentas

Se você usar outros widgets de chat (Intercom, Drift, etc.), eles podem entrar em conflito. Use apenas um widget de chat por página para evitar confusão e problemas técnicos.

Problemas de exibição móvel

• Verifique se a meta tag de viewport do seu site está definida corretamente
• Garanta que o z-index do widget não esteja sendo substituído pelo seu CSS
• Teste em dispositivos reais, não apenas em emuladores de navegador

Melhore seu widget Zendesk com suporte de IA

Depois que seu widget web estiver em execução, você poderá notar que ele ainda requer um trabalho manual significativo. Os agentes precisam responder a cada conversa, e perguntas simples consomem um tempo valioso.

É aqui que a IA pode ajudar. O eesel AI se integra diretamente ao Zendesk para automatizar respostas usando seus artigos existentes da central de ajuda e dados de tickets anteriores.

Veja como funciona:

• Treine com seu conteúdo: o eesel aprende com sua central de ajuda, macros e tickets resolvidos
• Rascunhe respostas de IA: Quando os clientes usam seu widget web, o eesel sugere respostas completas para os agentes revisarem
• Resolução autônoma: Para perguntas comuns, o eesel pode responder diretamente sem o envolvimento do agente
• Escalone de forma inteligente: Problemas complexos são automaticamente encaminhados para agentes humanos com contexto completo

A integração acontece dentro da sua configuração existente do Zendesk. Não há necessidade de substituir seu widget web ou alterar a forma como os clientes interagem com você. O eesel simplesmente torna essas interações mais eficientes.

Para equipes que desejam reduzir os tempos de resposta, mantendo a qualidade, o Agente de IA do eesel AI pode ser um próximo passo prático após a configuração do widget básico.