Como criar e usar templates de webview de mensagens do Zendesk

Os templates de webview de mensagens do Zendesk permitem que você incorpore sites externos diretamente nas suas conversas do widget de chat. Em vez de enviar os clientes para preencher formulários ou navegar em páginas de produtos, você pode mantê-los engajados dentro do fluxo da conversa. Este guia explica tudo o que você precisa saber: o que são webviews, quando usá-las e exatamente como configurá-las.

O que são templates de webview de mensagens do Zendesk?

Um template de webview é um dos três tipos de mensagens estruturadas disponíveis no Zendesk AI Agents - Advanced. Enquanto os formulários coletam informações do cliente e os templates JSON personalizados exibem carrosséis ou respostas rápidas, as webviews servem a um propósito diferente. Elas permitem que você apresente um site externo aos clientes sem fazê-los sair da conversa.

Veja como as webviews diferem de outras mensagens estruturadas:

• Formulários são coletores de dados integrados para informações simples como endereços de e-mail, nomes ou seleções suspensas
• Templates JSON personalizados criam elementos interativos como carrosséis de produtos, botões de resposta rápida ou pesquisas NPS
• Webviews exibem sites externos dentro do Web Widget, perfeitos para interações complexas que vão além das capacidades nativas do Zendesk

As webviews funcionam carregando uma URL externa em um iframe dentro do widget de chat. Quando um cliente clica no seu botão de webview, o site é aberto em um painel acima da conversa. Eles interagem com o site, concluem sua tarefa e retornam ao chat perfeitamente. Para canais que não suportam webviews, você pode definir uma URL de fallback que é aberta em uma nova aba do navegador.

Casos de uso comuns incluem calendários de agendamento, processadores de pagamento, configuradores de produtos, ferramentas de assinatura de documentos e portais de gerenciamento de contas. Qualquer cenário em que você precise de mais funcionalidade do que os formulários integrados do Zendesk podem fornecer é um candidato para um template de webview.

O que você precisa para começar

Antes de criar seu primeiro template de webview, você precisará atender a vários requisitos. Vamos detalhá-los:

Requisitos do plano Zendesk:

Requisitos técnicos:

• Uma URL de site externo que permita o carregamento de iframe (a maioria dos aplicativos da web modernos permitem)
• Protocolo HTTPS (obrigatório para segurança)
• Uma URL de fallback para canais que não suportam webviews

O que você não precisa:

Ao contrário da criação de integrações personalizadas com a API Sunshine Conversations, os templates de webview não exigem recursos de desenvolvedor. Você pode criá-los e gerenciá-los através da interface visual do Zendesk. A configuração é simples o suficiente para que os administradores de suporte possam lidar com ela sem ajuda de engenharia.

Para equipes que avaliam alternativas, oferecemos uma abordagem diferente na eesel AI. Em vez de criar templates para cada tipo de interação, nossos agentes de IA aprendem com seu conteúdo existente e lidam com as conversas de forma autônoma. Você pode começar com um teste gratuito de 7 dias se quiser explorar o suporte com tecnologia de IA sem a complexidade do template.

Passo a passo: Criando seu primeiro template de webview

Passo 1: Acesse as configurações do agente de IA

Navegue até Admin Center e clique em Canais na barra lateral esquerda. Selecione Agentes de IA para ver sua lista de agentes de IA avançados. Escolha o agente ao qual você deseja adicionar o template de webview. Se você ainda não criou um agente de IA avançado, precisará configurar um primeiro e conectá-lo a um canal de mensagens.

Passo 2: Navegue até o gerenciamento de templates

Com seu agente de IA selecionado, clique em Configurações na barra lateral. Em seguida, selecione Integração CRM no menu. Você verá várias abas na parte superior da área de conteúdo. Clique na aba Templates para acessar a interface de gerenciamento de templates de mensagens estruturadas.

Se este for seu primeiro template, você verá um botão "Crie seu primeiro template". Se você já criou templates antes, verá uma lista de templates existentes com um botão "Criar template" em vez disso.

Passo 3: Crie um novo template de webview

Clique no botão de criação e selecione Webview nas três opções de tipo de template. A página de configuração do template de webview será aberta com vários campos para preencher.

Passo 4: Configure os detalhes do template

Preencha os campos obrigatórios:

Nome do template: Insira um identificador exclusivo usando apenas letras, números, hífens e underscores. Sem espaços permitidos. Este nome aparece na sua lista de templates e é o que você referenciará ao inserir o template nos diálogos. Algo como "calendario-de-agendamento" ou "configurador-de-produto" funciona bem.

Descrição: Opcional, mas recomendado. Adicione uma breve nota explicando o que este template faz e quando usá-lo. Isso ajuda outros membros da equipe a entender o propósito do template.

Texto da mensagem: A mensagem que seu agente de IA exibe acima do botão de webview. Isso define o contexto para o cliente. Por exemplo: "Você pode verificar nossa disponibilidade em tempo real e agendar um horário abaixo."

Texto do botão: O rótulo no botão que os clientes clicam para abrir a webview. Mantenha-o orientado para a ação: "Agendar horário", "Configurar produto" ou "Assinar documento".

URL: A URL do site externo que é carregada quando o botão é clicado. Isso deve usar HTTPS e deve permitir o carregamento em um iframe. Teste esta URL com antecedência para garantir que ela funcione corretamente em um contexto de iframe.

URL de fallback: Uma URL de backup para canais que não suportam webviews. Isso normalmente é aberto em uma nova aba do navegador. Geralmente, é o mesmo que sua URL principal, mas você pode definir uma página diferente, se necessário.

Passo 5: Defina o comportamento das mensagens

Clique em "Campos opcionais" para expandir as opções de configuração adicionais:

Tamanho: Escolha o tamanho em que o painel de webview aparece. Suas opções são:

• Compacto: Painel pequeno, bom para formulários simples ou conteúdo curto
• Alto: Painel médio, adequado para a maioria dos casos de uso
• Completo: Painel grande que ocupa a maior parte do widget, ideal para interações complexas

Ação padrão: Marque isso como a ação padrão se você estiver oferecendo várias opções ao cliente.

Abrir webview automaticamente: Habilite isso para abrir a webview imediatamente quando o template for acionado, sem exigir que o cliente clique em um botão. Use com moderação, pois pode parecer intrusivo.

Campos de metadados: Adicione campos personalizados para capturar dados da interação da webview. Isso pode passar informações de volta para o Zendesk para relatórios ou ações de acompanhamento.

Passo 6: Salve e teste

Clique em Criar para salvar seu template. Agora teste-o completamente:

1. Abra sua visualização do Web Widget
2. Acione o diálogo contendo seu template de webview
3. Verifique se o site externo carrega corretamente
4. Teste em dispositivos móveis para garantir o design responsivo
5. Verifique se a URL de fallback funciona testando em canais não suportados

Se a webview exibir uma tela preta ou erro, o site externo provavelmente bloqueia o carregamento de iframe. Você precisará entrar em contato com o administrador do site para permitir a incorporação de iframe ou escolher uma solução diferente.

Usando templates de webview em fluxos de conversa

Adicionando templates a diálogos

Criar o template é apenas metade do trabalho. Você precisará inseri-lo nos fluxos de conversa do seu agente de IA para que ele realmente apareça para os clientes.

Os templates usam uma sintaxe abreviada que é automaticamente substituída pelo conteúdo completo do template quando enviado. Veja como adicionar um template a um diálogo:

1. Vá para a aba Templates do seu agente de IA e encontre seu template de webview na lista
2. Clique no código abreviado mostrado na coluna Abreviatura (ele terá a aparência de %((template:nome-do-seu-template))%)
3. O código é copiado para sua área de transferência
4. Abra o diálogo onde você deseja usar o template
5. Selecione o bloco de mensagem do agente de IA onde o template deve aparecer
6. Cole o código abreviado no texto da mensagem

Opções de sintaxe de template

O Zendesk fornece dois formatos de sintaxe para templates:

• Sintaxe padrão: %((template:nome_do_template))%
• Sintaxe alternativa: %{{template:nome_do_template}}%

A sintaxe alternativa existe caso o formato padrão entre em conflito com outros sistemas de template que você possa estar usando. Ambos funcionam da mesma forma.

Você pode incluir texto antes da abreviação do template, o que cria uma sequência de duas mensagens. O texto aparece primeiro, então o template é renderizado como uma mensagem separada. Qualquer texto após a abreviação do template é ignorado, então coloque todo o seu contexto antes do código.

Passando variáveis para templates

Para webviews dinâmicas que mudam com base no contexto da conversa, use a ação CRM "Adicionar uma webview" em vez de um template estático. Isso permite construir URLs com variáveis coletadas durante a conversa, como:

https://seu-aplicativo-de-agendamento.com?customer_id={{user.id}}&product={{conversation.product}}

Essa abordagem cria experiências personalizadas onde o site externo sabe quem é o cliente e o que ele está procurando.

Casos de uso comuns para templates de webview

As webviews funcionam bem em cenários onde os formulários nativos do Zendesk não são suficientes. Aqui estão as aplicações mais eficazes:

Sistemas de agendamento complexos

O agendamento de compromissos geralmente requer interfaces de calendário, seleção de horários e comparações de opções de serviço. Em vez de construir isso em formulários do Zendesk, incorpore sua ferramenta de agendamento existente. Calendly, Acuity Scheduling ou portais de agendamento personalizados funcionam muito bem como webviews.

Formulários personalizados

A coleta de dados em várias etapas, a lógica condicional ou os cálculos excedem o que os formulários simples do Zendesk podem lidar. Se você precisar que os clientes preencham um aplicativo detalhado, solicitação de orçamento ou processo de registro, uma webview carregando seu formulário personalizado é a escolha certa.

Processamento de pagamentos

Fluxos de checkout seguros devem usar processadores de pagamento estabelecidos como Stripe, PayPal ou sua plataforma de e-commerce. Incorporar esses via webview permite que os clientes concluam as transações sem sair da conversa de suporte.

Configuradores de produtos

Ferramentas interativas de personalização de produtos, visualizadores 3D ou seletores de opções complexos são candidatos perfeitos para webview. Os clientes podem construir sua configuração de produto ideal, ver atualizações de preços em tempo real e, em seguida, retornar ao chat com perguntas ou para concluir a compra.

Assinatura de documentos

Ferramentas de assinatura eletrônica como DocuSign ou Adobe Sign se integram perfeitamente via webview. Os agentes de suporte podem acionar a assinatura de documentos durante processos de reembolso, renovações de contrato ou resoluções de disputas.

Gerenciamento de contas

Em vez de explicar como encontrar as configurações da conta, mostre aos clientes seu portal de contas diretamente no chat. Isso funciona para redefinições de senha, gerenciamento de assinaturas, atualizações de perfil e configurações de privacidade.

Para muitos desses casos de uso, você pode descobrir que manter ferramentas externas e templates de webview adiciona complexidade. Na eesel AI, descobrimos que treinar um agente de IA em seus processos existentes geralmente elimina a necessidade de configurações complexas de webview. Nossa IA pode lidar com conversas de várias etapas, procurar informações da conta via API e orientar os clientes através dos processos conversacionalmente. O plano Business inclui ações de API e interações ilimitadas se você quiser explorar essa abordagem.

Melhores práticas e solução de problemas

Design para o contexto do widget

As webviews aparecem em um espaço restrito dentro do Web Widget. Suas páginas externas devem:

• Usar design responsivo que se adapte a viewports menores
• Evitar menus de navegação que competem com a interface do widget
• Carregar rapidamente, idealmente em menos de 3 segundos
• Ter estados de conclusão claros que digam aos clientes o que acontece a seguir

Requisitos de segurança

• Sempre use URLs HTTPS. Sites HTTP não serão carregados em navegadores modernos dentro de iframes.
• Verifique se seu site externo permite a incorporação de iframe. Procure por cabeçalhos X-Frame-Options definidos como SAMEORIGIN ou DENY como indicadores de que a incorporação não funcionará.
• Considere os dados que passam entre o Zendesk e seu site externo. Use parâmetros de URL com cuidado e evite expor informações confidenciais.

Compatibilidade do navegador

O Zendesk suporta as duas versões mais recentes do Chrome, Firefox e Edge, além do Safari mais recente. Teste suas webviews nesses navegadores. O Safari móvel no iOS e o Chrome Mobile exigem atenção especial, pois o comportamento do iframe varia em dispositivos móveis.

Problemas comuns e soluções

Lista de verificação de testes

Antes de implantar templates de webview em produção:

• Teste no Chrome, Safari, Firefox e Edge no desktop
• Teste no Safari no iOS e no Chrome no Android
• Verifique o comportamento da URL de fallback em canais não suportados
• Confirme se a captura de dados e os campos de metadados funcionam corretamente
• Verifique se o template aparece na etapa de diálogo correta
• Valide se o site externo carrega em 3 segundos
• Teste com uma conta de cliente para garantir que as URLs personalizadas funcionem

Quando as webviews falham ou a complexidade aumenta, ter uma abordagem de backup ajuda. Projetamos a eesel AI para lidar graciosamente com situações em que os templates estruturados ficam aquém. Nossa IA aprende com suas interações bem-sucedidas e geralmente pode resolver as necessidades do cliente sem exigir ferramentas externas. Se você está atingindo limitações com o sistema de templates do Zendesk, agende uma demonstração para ver como o tratamento autônomo da IA se compara.

Alternativas aos templates de webview

As webviews nem sempre são a solução certa. Considere estas alternativas dependendo das suas necessidades:

Formulários nativos do Zendesk

Para coleta de dados simples (nome, e-mail, seleções suspensas, texto curto), os templates de formulário integrados do Zendesk são mais rápidos de configurar e mais confiáveis. Eles se integram diretamente com os campos de ticket e não exigem hospedagem externa. Mantenha os formulários com menos de cinco campos para a melhor experiência do cliente.

Carrosséis e respostas rápidas

Se você estiver exibindo produtos ou oferecendo escolhas simples, os carrosséis exibem até 10 cartões roláveis com imagens e botões. As respostas rápidas apresentam até 11 opções predefinidas como botões clicáveis. Ambos mantêm os clientes na experiência de mensagens nativa sem a complexidade do iframe.

Aplicativos de terceiros do marketplace

Aplicativos como Interactive Messaging Templates da Zenplates estendem os recursos de mensagens do Zendesk com seletores de template voltados para o agente. Eles funcionam bem quando você deseja que agentes humanos selecionem e enviem mensagens estruturadas em vez de automatizar tudo através de agentes de IA.

Soluções personalizadas baseadas em API

Para máxima flexibilidade, a API Sunshine Conversations permite que os desenvolvedores construam tipos de mensagens completamente personalizados. Isso requer recursos de engenharia, mas remove as limitações das abordagens baseadas em template.

Tratamento autônomo da IA

Em vez de construir templates e webviews para cada cenário, algumas equipes estão migrando para agentes de IA que lidam com as conversas naturalmente. Em vez de apresentar um calendário de agendamento, a IA faz perguntas esclarecedoras, verifica a disponibilidade via API e confirma os compromissos conversacionalmente. Isso elimina a necessidade de os clientes interagirem com interfaces externas.

Construímos a eesel AI em torno desta filosofia. Nossos agentes de IA aprendem com seus tickets anteriores, central de ajuda e documentação para lidar com as conversas com os clientes sem templates predefinidos. Para cenários complexos que tradicionalmente podem exigir webviews, a IA geralmente pode coletar informações conversacionalmente e tomar medidas através de integrações de API. O resultado é uma configuração mais simples com menos partes móveis. Você pode experimentar gratuitamente por 7 dias para ver como o tratamento autônomo se compara aos fluxos de trabalho baseados em template.

Comece a aprimorar suas mensagens do Zendesk com templates de webview

Os templates de webview de mensagens do Zendesk preenchem a lacuna entre o suporte conversacional e as ferramentas externas complexas. Quando você precisa apresentar um calendário de agendamento, formulário de pagamento ou configurador de produtos sem interromper o fluxo da conversa, as webviews são sua solução.

A configuração requer o plano certo (Suite Team mais AI Agents - Advanced), um site externo compatível e alguma configuração no Zendesk Admin Center. Uma vez configuradas, as webviews se integram perfeitamente aos diálogos do agente de IA usando uma sintaxe abreviada simples.

Antes de construir configurações extensivas de webview, considere se cada caso de uso realmente requer uma interface externa. Às vezes, um formulário nativo é suficiente. Às vezes, um carrossel funciona melhor. E às vezes, todo o fluxo de trabalho pode ser tratado conversacionalmente por um agente de IA que aprende seus processos e toma medidas diretamente.

Se você está achando o gerenciamento de templates opressor ou atingindo limitações com o que as webviews podem realizar, podemos ajudar. Na eesel AI, somos especializados em agentes de IA autônomos que lidam com as conversas com os clientes sem a complexidade do template. Nossa IA aprende com seu conteúdo existente, se integra com seu help desk e encaminha para humanos quando necessário. Experimente a eesel AI gratuitamente por 7 dias ou agende uma demonstração para ver como ela se compara às abordagens baseadas em template.