Como personalizar formulários pré-chat do Zendesk: Guia completo 2026

Como personalizar formulários pré-chat do Zendesk: Guia completo 2026

Os formulários pré-chat do Zendesk coletam informações dos visitantes antes do início de um chat ao vivo. Eles permitem capturar nomes, e-mails, números de telefone e rotear conversas para o departamento correto. Quando configurados corretamente, eles reduzem o vai e vem de mensagens e dão aos agentes contexto desde a primeira mensagem.

O desafio? A documentação do Zendesk está espalhada por várias páginas, cobrindo configurações de administrador, API JavaScript e configuração de SDK móvel separadamente. Este guia consolida tudo em um só lugar.

Você aprenderá a personalizar os cinco elementos principais do formulário pré-chat (saudação, perfil do visitante, número de telefone, seleção de departamento e campo de mensagem) usando três métodos: o painel de administração, a API JavaScript e o SDK do iOS. Também cobrimos problemas comuns de solução de problemas e quando faz sentido considerar alternativas baseadas em IA que eliminam totalmente a complexidade da configuração.

O que é um formulário pré-chat do Zendesk?

Um formulário pré-chat é um diálogo que aparece antes de os visitantes iniciarem uma sessão de chat ao vivo. Ele coleta informações que ajudam sua equipe de suporte a responder de forma mais rápida e eficaz.

O formulário pré-chat está disponível apenas no Zendesk Web Widget (Classic), não no widget de Messaging mais recente, conforme confirmado na documentação de formulário pré-chat do Zendesk. Essa distinção é importante porque as opções de configuração diferem significativamente entre os dois.

Os formulários pré-chat servem a três propósitos principais:

• Redução do vai e vem: Os agentes já sabem o nome, e-mail e a pergunta inicial do cliente antes do chat começar.
• Roteamento para a equipe certa: A seleção de departamento garante que as conversas cheguem ao grupo apropriado (vendas, suporte técnico, faturamento).
• Captura de informações de contato: Mesmo que o chat caia, você tem o e-mail do visitante para acompanhamento.

O formulário inclui cinco elementos personalizáveis:

Elemento	Objetivo	Estado Padrão
Mensagem de saudação	Texto de boas-vindas exibido no topo do formulário	Ativado
Perfil do visitante (Nome, E-mail)	Campos básicos de identidade	Ativado
Número de telefone	Campo de contato opcional	Desativado
Seleção de departamento	Menu suspenso para roteamento	Exibido se existirem departamentos
Campo de mensagem	Pergunta ou solicitação inicial	Ativado

Entender o sistema de tickets do Zendesk e como os formulários pré-chat alimentam esse sistema ajuda você a criar formulários que capturem os dados corretos. Para equipes que operam suporte omnichannel, o formulário pré-chat costuma ser o primeiro ponto de contato na jornada do cliente.

Uma alternativa aos formulários pré-chat: eesel AI

Antes de mergulhar na configuração do JavaScript, considere se você realmente precisa de um formulário estático. O eesel AI oferece uma abordagem alternativa que reúne o contexto do cliente de forma conversacional, em vez de campos de formulário.

Funciona assim: o eesel AI se conecta à sua conta Zendesk e aprende imediatamente com seus tickets anteriores, macros, artigos da central de ajuda e qualquer documentação conectada. Em vez de apresentar aos visitantes um formulário para preencher, o chatbot de IA os envolve em uma conversa natural e extrai as mesmas informações dinamicamente.

O processo de configuração leva minutos:

1. Conecte o eesel AI à sua conta Zendesk (integração com um clique).
2. Treine-o com suas fontes de conhecimento existentes (central de ajuda, tickets antigos, documentos internos).
3. Implemente como uma bolha de chat no seu site ou integre diretamente com o Zendesk Chat.

Principais vantagens sobre os formulários pré-chat tradicionais:

• Sem configuração de JavaScript: Lidamos com a coleta de contexto automaticamente.
• Coleta de dados conversacional: Os visitantes respondem a perguntas naturalmente, não através de campos rígidos.
• Roteamento inteligente: Nossa IA determina o departamento correto com base no conteúdo da conversa.
• Aprendizado contínuo: O sistema melhora com base nas correções dos agentes e novos tickets.

Essa abordagem funciona bem para equipes que desejam reduzir a carga de desenvolvimento e, ao mesmo tempo, capturar as informações de que precisam. Você pode começar com supervisão de IA (rascunhos para revisão humana) e subir de nível gradualmente para o tratamento autônomo de tickets conforme a confiança aumenta.

Para equipes que preferem ou exigem formulários pré-chat tradicionais, as seções a seguir cobrem as opções de personalização nativas do Zendesk.

Como personalizar o formulário pré-chat do Zendesk no administrador do Zendesk

O painel de administração oferece personalização básica sem necessidade de código. Isso cobre a maioria dos casos de uso comuns.

Passo 1: Acessar as configurações do formulário pré-chat

Navegue até Central de Administração > Painel do Chat > Configurações > Widget > Formulários > Formulário pré-chat.

Para contas de Chat mais antigas, o caminho pode ser Painel > Configurações > Widget.

Passo 2: Configurar a mensagem de saudação

A saudação aparece no topo do formulário pré-chat. Mantenha-a concisa, pois os visitantes querem começar a conversar, não ler parágrafos.

O campo de saudação aceita apenas texto simples (sem formatação HTML). Use-o para:

• Mensagens de boas-vindas ("Olá! Estamos aqui para ajudar.")
• Instruções ("Por favor, preencha o formulário abaixo para que possamos atendê-lo mais rápido.")
• Avisos de horário comercial ("Nossa equipe está disponível de segunda a sexta, das 9h às 18h EST.")

Passo 3: Configurar campos de identidade do visitante

Ative ou desative o Perfil do visitante para habilitar os campos de Nome e E-mail. Eles são essenciais para a comunicação de acompanhamento.

Opções adicionais incluem:

• Permitir login social: Permite que os visitantes façam login com Facebook ou Google em vez de digitar suas informações.
• Exigir e-mail: Torna o campo de e-mail obrigatório.

Um aviso aqui: desativar o Perfil do Visitante inteiramente significa que você perde a capacidade de fazer acompanhamento com os visitantes após o término do chat. Só desative se tiver certeza de que não precisará das informações de contato.

Passo 4: Adicionar campo de número de telefone (opcional)

Ative a coleta de telefone em Permitir número de telefone na seção Perfil do Visitante.

Para tornar o campo de telefone obrigatório, marque Exigir número de telefone nas configurações do formulário pré-chat.

A coleta de telefone é útil para:

• Cenários de retorno de chamada onde o suporte por telefone pode ser necessário.
• Coleta de informações de contato alternativas.
• Identificação de clientes de alto valor.

Passo 5: Configurar a seleção de departamento

O menu suspenso de departamento aparece automaticamente se você tiver departamentos configurados no Zendesk Chat. Se não o vir, crie departamentos primeiro em Configurações > Departamentos.

Você pode personalizar o rótulo do menu suspenso (por exemplo, mudando "Departamento" para "Selecione sua equipe" ou "Como podemos ajudar?").

Observe que você não pode ocultar departamentos específicos pelo painel de administração. Para filtrar quais departamentos aparecem, você precisará da API JavaScript abordada na próxima seção.

Personalização avançada do formulário pré-chat do Zendesk com API JavaScript

Para ter mais controle sobre o formulário pré-chat, use a API JavaScript do Web Widget. Isso permite personalizar saudações por idioma, filtrar departamentos, pré-preencher informações do visitante e muito mais.

O objeto zESettings

O objeto zESettings é onde você define a configuração do widget. A regra crítica: coloque-o ANTES do script do widget Zendesk no seu HTML.

window.zESettings = {
  webWidget: {
    chat: {
      prechatForm: {
        greeting: { '*': 'Bem-vindo! Como podemos ajudar hoje?' },
        departmentLabel: { '*': 'Escolha sua equipe' }
      }
    }
  }
};

Se você colocar o zESettings após o carregamento do script do widget, suas configurações não serão aplicadas. Este é o erro mais comum ao personalizar o formulário pré-chat.

Personalizando a saudação e o rótulo do departamento

Tanto greeting quanto departmentLabel suportam valores específicos por localidade. Use o caractere curinga '*' para todos os idiomas ou especifique códigos de localidade para suporte a vários idiomas:

prechatForm: {
  greeting: {
    'pt-BR': 'Bem-vindo! Como podemos ajudar?',
    'en-US': 'Welcome! How can we help?',
    'fr': 'Bienvenue! Comment pouvons-nous vous aider?',
    '*': 'Olá!'
  },
  departmentLabel: {
    'pt-BR': 'Selecione sua equipe',
    'en-US': 'Select your team',
    '*': 'Departamento'
  }
}

O widget detecta o idioma do navegador do visitante e mostra a mensagem apropriada. O caractere curinga '*' serve como fallback para qualquer idioma não definido explicitamente.

Filtrando quais departamentos aparecem

Use o objeto departments para controlar quais departamentos aparecem no menu suspenso:

chat: {
  departments: {
    enabled: ['Vendas', 'Suporte Técnico'],
    select: 'Vendas'
  }
}

Propriedade	Tipo	Descrição
enabled	Array	Lista de nomes de departamentos permitidos para exibição
select	String	Departamento padrão pré-selecionado

Importante: Os nomes dos departamentos devem corresponder exatamente (diferenciando maiúsculas de minúsculas). Se um nome de departamento não existir, o menu suspenso pode ser ocultado inteiramente sem nenhuma mensagem de erro.

Pré-preenchendo informações do visitante

Para usuários logados, você pode pré-preencher o formulário com informações que já possui. A Core API oferece dois comandos para isso:

O comando identify define nome e e-mail:

zE('webWidget', 'identify', {
  name: 'João Silva',
  email: 'joao@exemplo.com'
});

O comando prefill oferece mais controle, incluindo campos somente leitura:

zE('webWidget', 'prefill', {
  name: {
    value: 'João Silva',
    readOnly: true
  },
  email: {
    value: 'joao@exemplo.com',
    readOnly: true
  },
  phone: {
    value: '11-99999-9999',
    readOnly: false
  }
});

Definir readOnly: true impede que os visitantes editem os valores pré-preenchidos. Isso é útil quando você já verificou a identidade do usuário.

Configuração do formulário pré-chat do Zendesk no SDK Móvel

Para aplicativos nativos de iOS, o SDK do Zendesk Chat oferece personalização equivalente por meio de classes Swift.

Configuração iOS com ChatConfiguration

A classe ChatFormConfiguration permite definir requisitos para cada campo do formulário. Cada campo tem três estados possíveis:

Estado	Descrição
.required	O usuário deve preencher o campo para continuar
.optional	O usuário pode pular o campo
.hidden	O campo não é exibido

Veja como configurar um formulário pré-chat com nome e departamento obrigatórios, e-mail opcional e telefone oculto:

let formConfiguration = ChatFormConfiguration(
    name: .required,
    email: .optional,
    phoneNumber: .hidden,
    department: .required
)

let chatConfiguration = ChatConfiguration()
chatConfiguration.isPreChatFormEnabled = true
chatConfiguration.preChatFormConfiguration = formConfiguration

Para Objective-C:

ZDKChatFormConfiguration *formConfiguration = [[ZDKChatFormConfiguration alloc]
    initWithName:ZDKFormFieldStatusRequired
    email:ZDKFormFieldStatusOptional
    phoneNumber:ZDKFormFieldStatusHidden
    department:ZDKFormFieldStatusRequired];

ZDKChatConfiguration *chatConfiguration = [[ZDKChatConfiguration alloc] init];
chatConfiguration.isPreChatFormEnabled = YES;
chatConfiguration.preChatFormConfiguration = formConfiguration;

Principais sinalizadores de configuração

A classe ChatConfiguration inclui vários sinalizadores úteis:

Sinalizador	Padrão	Descrição
isPreChatFormEnabled	true	Ativa ou desativa todo o formulário
isAgentAvailabilityEnabled	true	Mostra mensagem quando nenhum agente está online
isOfflineFormEnabled	true	Permite que os visitantes deixem uma mensagem quando offline
isChatTranscriptPromptEnabled	true	Oferece transcrição por e-mail ao final do chat

Pré-preenchendo informações do usuário com ChatAPIConfiguration

Se você definir as propriedades visitorInfo em Chat.instance.configuration, os campos correspondentes do formulário serão ocultados automaticamente:

Chat.instance?.configuration.visitorInfo = VisitorInfo(
    name: "João Silva",
    email: "joao@exemplo.com",
    phoneNumber: "11-99999-9999"
)

Quando todas as propriedades de visitorInfo estão preenchidas, o formulário pré-chat é totalmente ignorado. O usuário pode começar a conversar imediatamente.

Solução de problemas comuns em formulários pré-chat do Zendesk

Mesmo com a configuração correta, vários problemas costumam surgir. Aqui estão as soluções.

Menu suspenso de departamento não aparece

Causa: Todos os agentes desse departamento estão offline.

Solução: Certifique-se de que pelo menos um agente esteja online para cada departamento que você deseja exibir. Alternativamente, use departments.enabled em suas configurações de JavaScript com nomes de departamento válidos. Se estiver testando, defina seu status como "Online" no painel do Chat.

departmentLabel personalizado não está sendo aplicado

Causa: A propriedade está colocada no nível de aninhamento errado.

Solução: Mova departmentLabel para DENTRO do objeto prechatForm, e não no nível do chat:

// ERRADO - não funcionará
chat: {
  departmentLabel: { '*': 'Selecionar' }
}

// CORRETO
chat: {
  prechatForm: {
    departmentLabel: { '*': 'Selecione sua equipe' }
  }
}

Essa estrutura aninhada é uma fonte comum de confusão na API do Zendesk.

Configurações não estão sendo aplicadas de forma alguma

Causa: O objeto zESettings está colocado após o script do widget.

Solução: Certifique-se de que window.zESettings apareça ANTES do snippet do widget Zendesk no seu HTML:

<!-- Configurações PRIMEIRO -->
<script>
  window.zESettings = {
    webWidget: {
      chat: {
        prechatForm: {
          greeting: { '*': 'Olá!' }
        }
      }
    }
  };
</script>

<!-- Script do widget SEGUNDO -->
<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=SUA_CHAVE"></script>

Formulário ignorado em gatilhos proativos

Causa: Os gatilhos de chat proativos são projetados para iniciar conversas sem exigir o formulário pré-chat.

Solução: Este é o comportamento esperado, não um erro. Se você precisar de informações do visitante quando gatilhos proativos forem disparados, use a API identify para capturar dados após o início do chat:

zE('webWidget:on', 'chat:start', function() {
  // Solicitar informações após o início do chat
});

Widget mostrando o idioma errado

Causa: O widget usa a configuração de idioma do navegador por padrão.

Solução: Force um idioma específico com o comando setLocale:

zE('webWidget', 'setLocale', 'pt-BR');

Isso substitui a detecção do navegador e exibe o widget no idioma especificado.

Simplifique a configuração do chat do Zendesk com o eesel AI

Configurar formulários pré-chat do Zendesk envolve navegar pelas configurações de administrador, escrever JavaScript e, potencialmente, modificar o código do aplicativo móvel. Para equipes sem recursos de desenvolvimento dedicados, essa complexidade pode atrasar a implementação.

O eesel AI oferece uma abordagem diferente. Em vez de configurar formulários estáticos, você implementa um agente de IA que:

• Aprende com seus dados do Zendesk: Tickets antigos, macros, artigos da central de ajuda.
• Coleta contexto de forma conversacional: Sem campos de formulário rígidos, apenas conversa natural.
• Roteia de forma inteligente: Determina o departamento correto com base no conteúdo da conversa.
• Lida com tickets de forma autônoma: Resolve problemas comuns sem intervenção humana.

A configuração leva minutos em vez de horas. Conecte sua conta Zendesk, treine-a com seu conhecimento existente e implemente. Você pode começar com a IA elaborando rascunhos de respostas para os agentes revisarem e, em seguida, subir de nível para o tratamento autônomo conforme a confiança aumenta.

Para equipes que já usam o Zendesk, o eesel AI funciona junto com sua configuração atual. Você não precisa substituir nada, apenas adicionar uma camada inteligente que lida com conversas rotineiras.

O preço começa em US$ 299/mês para o plano Team, que inclui 1.000 interações de IA. Confira nosso guia dos melhores chatbots de IA para Zendesk para uma comparação detalhada das opções.

Pronto para simplificar sua configuração de chat? Inicie um teste gratuito e veja como o eesel AI pode reduzir a complexidade da configuração enquanto melhora o tempo de resposta ao cliente.

---

Perguntas frequentes

P1: Posso personalizar o formulário pré-chat do Zendesk sem escrever nenhum código?

R1: Sim. O painel de administração do Zendesk permite configurar opções básicas do formulário pré-chat, incluindo a mensagem de saudação, campos de perfil do visitante (nome e e-mail), coleta de número de telefone e rótulos de menu suspenso de departamento. Para personalizações mais avançadas, como filtrar departamentos ou pré-preencher dados do visitante, você precisará da API JavaScript.

P2: Por que a personalização do meu formulário pré-chat do Zendesk não está sendo aplicada após eu adicionar o código zESettings?

R2: A causa mais comum é colocar o objeto zESettings após o carregamento do script do widget. Para que a personalização do formulário pré-chat funcione, suas configurações devem aparecer ANTES do snippet do widget no seu HTML. Verifique também se propriedades como departmentLabel estão aninhadas dentro do objeto prechatForm, e não no nível do chat.

P3: Como personalizo o formulário pré-chat do Zendesk para mostrar apenas departamentos específicos?

R3: Use a propriedade departments.enabled da API JavaScript para listar departamentos específicos. Por exemplo, definir enabled: ['Vendas', 'Suporte'] mostrará apenas essas duas opções no menu suspenso. Os nomes dos departamentos devem corresponder exatamente (diferenciando maiúsculas de minúsculas) para que essa personalização funcione.

P4: Existe uma alternativa mais simples à personalização do formulário pré-chat do Zendesk para coletar informações dos visitantes?

R4: Sim. Soluções de chat baseadas em IA, como o eesel AI, coletam o contexto do visitante de forma conversacional, em vez de formulários estáticos. Em vez de configurar campos de formulário e JavaScript, a IA interage com os visitantes naturalmente e extrai as informações necessárias. Isso elimina a necessidade de personalizações complexas, capturando nomes, e-mails e requisitos de roteamento.

P5: Como configuro a personalização do formulário pré-chat do Zendesk para aplicativos móveis?

R5: Para aplicativos iOS, use a classe ChatFormConfiguration para definir os requisitos do campo (.required, .optional ou .hidden) e a classe ChatConfiguration para ativar ou desativar o formulário. Se você pré-preencher as propriedades visitorInfo, os campos correspondentes do formulário serão ocultados automaticamente. Esta é a abordagem nativa para personalização móvel.

P6: Por que o menu suspenso de departamento desaparece do meu formulário pré-chat do Zendesk?

R6: O menu suspenso de departamento só aparece quando pelo menos um agente está online para aquele departamento. Se todos os agentes estiverem offline, o Zendesk oculta o menu. Outra causa é o uso de nomes de departamento inválidos no seu array JavaScript departments.enabled. Verifique se os nomes correspondem exatamente ao que está configurado nas suas configurações do Zendesk Chat.

P7: Posso pré-preencher o formulário pré-chat do Zendesk com dados de clientes que já possuo?

R7: Sim. Use o comando identify para definir nome e e-mail, ou o comando prefill para mais controle, incluindo campos somente leitura. Para aplicativos móveis, defina as propriedades visitorInfo na configuração do chat. Quando todos os campos estão pré-preenchidos, a personalização pode até ignorar o formulário inteiramente e iniciar o chat imediatamente.