Como personalizar a posição e o tamanho do Web Widget do Zendesk

Posicionar corretamente o seu Web Widget do Zendesk pode fazer toda a diferença entre um canal de suporte ao cliente útil e uma distração irritante. Se você deseja que ele fique discretamente no canto ou exibido de forma proeminente, as opções de posicionamento variam dependendo do tipo de widget que você está usando.

Veja exatamente como personalizar a posição e o tamanho para cada variante do widget do Zendesk.

Qual widget do Zendesk você tem?

Antes de ajustar o posicionamento, você precisa saber com qual widget está trabalhando. O Zendesk oferece três tipos principais de widget, e cada um tem diferentes capacidades de personalização.

Web Widget (Mensagens) é o padrão atual para contas com Zendesk Suite ou Support + Chat nos planos Team e superiores com mensagens ativadas. Ele apresenta uma interface de chat moderna com bolhas de conversa e suporta conversas persistentes entre sessões.

Web Widget (Clássico) é a opção legada para contas que não habilitaram as mensagens. Ele combina pesquisa na central de ajuda, formulários de contato e chat ao vivo opcional em uma interface tradicional. Esta versão oferece a API JavaScript mais extensa para personalização.

Web Widget somente chat (Clássico) aparece se você tiver apenas o produto Chat sem o Support. É essencialmente o componente de chat sem recursos de emissão de tickets.

Para identificar seu widget, verifique seu Admin Center. Se você vir Canais > Mensagens e redes sociais > Mensagens, você tem o Web Widget de mensagens. Se você vir Canais > Clássico > Web Widget, você está usando a versão Clássica.

Fonte: Guia de identificação do widget do Zendesk

Posicionando o Web Widget (Mensagens)

O Web Widget de mensagens oferece controles de posicionamento diretos por meio da interface do Admin Center.

Para acessar as configurações de posição:

1. Abra o Admin Center
2. Clique em Canais na barra lateral
3. Selecione Mensagens e redes sociais > Mensagens
4. Clique no nome do canal que você deseja editar
5. Abra a aba Estilo

Opções de posição:

O widget de mensagens suporta duas posições: Inferior direito (padrão) ou Inferior esquerdo. Ao contrário do widget Clássico, você não pode colocá-lo na parte superior da página por meio da interface do usuário.

Configuração de deslocamento:

Você pode ajustar o posicionamento exato usando valores de deslocamento. O padrão é de 16 pixels da borda escolhida. Aumente esses valores para mover o widget para dentro do canto ou diminua-os para aproximá-lo da borda.

Personalização da aparência:

Embora não seja estritamente posicionamento, essas configurações afetam a pegada visual do widget:

• Raio da borda: Ajuste de 0px (cantos retos) a 20px (totalmente arredondado)
• Forma do iniciador: Escolha Quadrado (com curva ajustável), Círculo ou iniciador Personalizado
• Elementos de tamanho: O tamanho do botão do iniciador é fixo, mas você pode adicionar texto opcional que aumenta sua largura

Considerações para dispositivos móveis:

Habilite Mostrar no celular para exibir o texto do iniciador nos SDKs móveis. O widget adapta automaticamente seu tamanho para telas menores, mas a posição permanece ancorada no canto escolhido.

Fonte: Configurando a aparência do Web Widget

Posicionando o Web Widget (Clássico)

O widget Clássico oferece mais flexibilidade de posicionamento do que sua contraparte de mensagens, incluindo a capacidade de colocá-lo em qualquer canto da tela.

Para acessar as configurações de posição:

1. Abra o Admin Center
2. Clique em Canais na barra lateral
3. Selecione Clássico > Web Widget
4. Localize o componente Posição

Posicionamento nos quatro cantos:

O widget Clássico suporta todos os quatro cantos:

• Superior esquerdo
• Superior direito
• Inferior esquerdo
• Inferior direito

Quando posicionado na parte superior, o widget se expande para baixo quando aberto. Quando posicionado na parte inferior, ele se expande para cima.

Ajuste básico de deslocamento:

O componente Posição inclui controles de deslocamento para ajustar o posicionamento do canto selecionado. Isso é útil para evitar conflitos com outros elementos fixos em sua página.

Personalização avançada com JavaScript:

Para controle preciso, o widget Clássico aceita configuração JavaScript por meio de window.zESettings. Essa abordagem permite definir valores de pixel exatos e até mesmo alterar o posicionamento dinamicamente com base no conteúdo da página.

Fonte: Reposicionando o Web Widget

Posicionando o widget de Chat legado

Se você estiver usando uma conta legada somente Chat, suas configurações de widget estarão em um local diferente.

Para acessar as configurações de posição:

1. Abra seu painel do Chat
2. Navegue até Configurações > Widget
3. Procure o menu suspenso Posição do widget

Opções disponíveis:

O widget de Chat legado suporta os mesmos quatro cantos do Web Widget Clássico. No entanto, as opções de personalização são mais limitadas. Você não terá acesso à extensa API JavaScript que o widget Clássico oferece.

Nota importante: Muitas contas que usavam anteriormente o widget Chat autônomo agora têm suas configurações gerenciadas na configuração do Web Widget (Clássico) no produto Support. Se você não vir as configurações de posição no Chat, verifique Admin Center > Canais > Clássico > Web Widget.

Fonte: Personalização do widget de Chat legado

Posicionamento avançado com API JavaScript

Para desenvolvedores que precisam de controle preciso, a API JavaScript do Web Widget (Clássico) oferece amplas capacidades de posicionamento.

A base:

Toda a personalização acontece por meio do objeto window.zESettings, que deve ser definido antes que o script do widget seja carregado:

window.zESettings = {
  webWidget: {
    position: {
      vertical: 'top',
      horizontal: 'right'
    },
    offset: {
      horizontal: '20px',
      vertical: '100px'
    }
  }
};

Propriedades de posição:

Cenários comuns de posicionamento:

Superior direito com espaço:

window.zESettings = {
  webWidget: {
    position: { vertical: 'top', horizontal: 'right' },
    offset: { horizontal: '30px', vertical: '80px' }
  }
};

Inferior esquerdo evitando um rodapé:

window.zESettings = {
  webWidget: {
    position: { vertical: 'bottom', horizontal: 'left' },
    offset: { horizontal: '20px', vertical: '100px' }
  }
};

Controle de zIndex:

Se o seu widget aparecer atrás de outros elementos, como barras de navegação ou modais, aumente o valor de zIndex em suas configurações JavaScript:

window.zESettings = {
  webWidget: {
    zIndex: 999999
  }
};

Modo incorporado:

Para controle completo sobre o posicionamento, você pode incorporar o widget dentro de um contêiner específico em sua página, em vez de deixá-lo flutuar. Isso requer JavaScript adicional e é normalmente usado quando você deseja que o widget apareça como parte do layout da sua página, em vez de uma sobreposição.

Fonte: Introdução à API Web Widget

Práticas recomendadas para posicionamento de widget

Acertar a posição é mais do que apenas escolher um canto. Aqui estão diretrizes práticas para um posicionamento eficaz do widget.

Considere o layout do seu conteúdo:

Coloque o widget onde ele não obstrua a navegação ou o conteúdo importante. O canto inferior direito é popular porque a maioria dos usuários é destra e muitos sites têm conteúdo menos crítico nessa área. No entanto, se o seu site tiver um rodapé fixo ou CTAs importantes no canto inferior direito, considere o posicionamento inferior esquerdo ou superior.

Responsividade móvel:

Teste a posição escolhida em dispositivos móveis reais, não apenas redimensionando o navegador. O iniciador do widget não deve cobrir menus de navegação, banners de consentimento de cookies ou botões de ação flutuantes. Em telas menores, você pode precisar de valores de deslocamento maiores para evitar a sobreposição com a interface do usuário nativa do navegador.

Considerações de acessibilidade:

O widget ajusta automaticamente as cores para atender às diretrizes de contraste WCAG, mas o posicionamento também é importante para a acessibilidade. Certifique-se de que o iniciador não cubra indicadores de foco ou links de pular para o conteúdo. Os usuários que navegam pelo teclado devem conseguir alcançar o widget sem tabulação excessiva.

Quando usar o iniciador personalizado:

Ambos os tipos de widget suportam ocultar o iniciador padrão e criar seu próprio gatilho. Isso é útil quando você deseja que o widget seja aberto a partir de um botão específico em sua navegação ou quando o iniciador flutuante entra em conflito com seu sistema de design. Lembre-se de que usar um iniciador personalizado requer trabalho de desenvolvimento adicional para lidar com os estados de abertura/fechamento.

Recomendações de teste:

• Verifique o posicionamento em diferentes tamanhos de tela (móvel de 320px a desktop de 1920px)
• Verifique se o widget não se sobrepõe a banners de cookies, modais de verificação de idade ou pop-ups promocionais
• Teste com o conteúdo real do seu site, não apenas com uma página em branco
• Considere como a posição funciona com o comportamento de rolagem do seu site

Solução de problemas comuns de posicionamento

Mesmo com configurações claras, o posicionamento do widget às vezes não funciona como esperado. Veja como corrigir os problemas mais comuns.

Widget não aparecendo na posição esperada:

Primeiro, verifique se você está editando as configurações para o tipo de widget correto. As alterações no widget de mensagens não afetarão o widget Clássico e vice-versa. Limpe o cache do seu navegador e verifique o widget em uma janela anônima para descartar o JavaScript em cache.

Conflitos de z-index:

Se o widget aparecer atrás de outros elementos, como barras de navegação ou modais, aumente o valor de zIndex em suas configurações JavaScript. Comece com 999999 e ajuste para baixo se isso causar outros problemas. Algumas ferramentas de terceiros usam valores de z-index extremamente altos, então você pode precisar experimentar.

Problemas de posicionamento móvel:

Os navegadores móveis lidam com unidades de viewport de forma diferente do desktop. Se seus valores de deslocamento funcionarem no desktop, mas não no celular, tente usar o posicionamento baseado em porcentagem ou teste diferentes valores de pixel especificamente para viewports móveis. O widget de mensagens tem uma configuração móvel dedicada, mas o widget Clássico requer consultas de mídia CSS para posicionamento específico para celular.

Alterações não refletindo em seu site:

As configurações do widget podem levar alguns minutos para se propagarem. Se você esperou e ainda não vê as alterações, verifique se está olhando para uma página onde o widget está realmente instalado. O snippet do widget deve estar presente na página para que qualquer configuração entre em vigor.

Considerações sobre cache e CDN:

Se você usar uma CDN ou camada de cache, seu JavaScript do widget pode estar em cache. Limpe o cache da sua CDN depois de fazer alterações de posicionamento. Para o widget Clássico, as alterações em window.zESettings entram em vigor imediatamente no carregamento da página, então o cache é menos problemático do que com as alterações do Admin Center.

Melhore seu widget do Zendesk com IA

Depois de posicionar seu widget perfeitamente, considere como a IA pode ajudá-lo a lidar com as conversas que chegam por meio dele. Embora o Zendesk ofereça recursos de IA integrados, você pode querer mais flexibilidade em como automatiza as respostas e encaminha as conversas.

É aqui que um colega de equipe de IA pode complementar sua estratégia de widget. Em vez de apenas coletar tickets, você pode ter um agente de IA que realmente resolve problemas comuns diretamente na conversa. A IA aprende com seus tickets anteriores e conteúdo da central de ajuda, para que as respostas correspondam à voz e às políticas da sua marca.

Se você está procurando ir além da funcionalidade básica de chatbot, considere explorar opções de suporte alimentadas por IA que se integram ao Zendesk. A configuração de IA certa pode lidar com perguntas de rotina automaticamente, enquanto encaminha perfeitamente problemas complexos para sua equipe humana.

Para equipes que desejam uma solução completa de IA, um chatbot de IA treinado em sua base de conhecimento específica pode fornecer respostas mais precisas do que alternativas genéricas. Confira as opções de preços para ver o que se adapta ao seu volume de suporte.