zendesk-web-widget-launcher-options

{
  "title": "Opções do lançador do widget web do Zendesk: um guia completo para 2026",
  "slug": "zendesk-web-widget-launcher-options",
  "locale": "pt",
  "date": "2026-02-26",
  "updated": "2026-02-26",
  "template": "default",
  "excerpt": "Aprenda como configurar e personalizar os lançadores do widget web do Zendesk, desde configurações simples no Admin Center até implementações personalizadas avançadas com código.",
  "categories": [
    "Zendesk",
    "Guides"
  ],
  "tags": [
    "Zendesk",
    "Web Widget",
    "Customer Support",
    "Live Chat",
    "Customization"
  ],
  "readTime": 11,
  "author": 16,
  "reviewer": 14,
  "seo": {
    "title": "Opções do lançador do widget web do Zendesk: um guia completo para 2026",
    "description": "Aprenda como configurar e personalizar os lançadores do widget web do Zendesk, desde configurações simples no Admin Center até implementações personalizadas avançadas com código.",
    "image": "https://wmeojibgfvjvinftolho.supabase.co/storage/v1/object/public/public_assets/blog-gen/banner-fc6fe60c-cb21-453a-b9b3-037aefae85a9"
  },
  "coverImage": "https://wmeojibgfvjvinftolho.supabase.co/storage/v1/object/public/public_assets/blog-gen/banner-fc6fe60c-cb21-453a-b9b3-037aefae85a9",
  "coverImageAlt": "Imagem do banner para opções do lançador do widget web do Zendesk: um guia completo para 2026",
  "coverImageWidth": 1920,
  "coverImageHeight": 1080,
  "faqs": {
    "heading": "Perguntas Frequentes",
    "type": "blog",
    "answerType": "html",
    "faqs": [
      {
        "question": "Posso alterar a configuração do meu lançador depois que o widget estiver ativo?",
        "answer": "Sim. As alterações feitas no Admin Center entram em vigor imediatamente em todas as páginas com o widget instalado. Para lançadores personalizados, você precisará implantar as alterações de código em seu site."
      },
      {
        "question": "Os lançadores personalizados funcionam com o Classic Web Widget?",
        "answer": "Sim, mas os comandos da API são diferentes. O Classic Widget usa zE('webWidget', 'open') em vez de zE('messenger', 'open'). Consulte a documentação da API do Classic Widget para obter detalhes."
      },
      {
        "question": "Posso usar diferentes estilos de lançador em diferentes páginas?",
        "answer": "Com o lançador padrão, você obtém uma configuração por canal do Web Widget. Para lançadores específicos da página, você precisaria criar vários canais de widget ou usar um lançador personalizado com lógica específica da página."
      },
      {
        "question": "O que acontece se o código do meu lançador personalizado tiver erros?",
        "answer": "Se o seu lançador personalizado falhar, o widget permanecerá oculto (já que você selecionou 'Lançador personalizado' no Admin Center). Sempre teste completamente e considere um fallback que mostre o lançador padrão se o seu código não carregar corretamente."
      },
      {
        "question": "Posso rastrear análises sobre cliques no lançador?",
        "answer": "Sim. Para lançadores personalizados, adicione seu código de rastreamento de análise ao manipulador de eventos de clique. Para o lançador padrão, você pode usar o evento zE('messenger:on', 'open') para rastrear quando o widget é aberto."
      },
      {
        "question": "Existe uma maneira de mostrar o lançador apenas durante o horário comercial?",
        "answer": "Não diretamente através das configurações do lançador. Você precisaria de JavaScript personalizado que verifica a hora atual e mostra/oculta seu elemento lançador de acordo. O próprio widget pode ter respostas diferentes com base no horário comercial configurado na guia Respostas."
      }
    ],
    "supportLink": null
  }
}

O que você aprenderá sobre as opções do lançador do widget

O lançador é a primeira coisa que seus clientes veem quando precisam de ajuda. É aquele botão no canto do seu site que abre a porta para o suporte. Mas aqui está a questão: o Zendesk oferece mais controle sobre esse botão do que a maioria das pessoas imagina.

Você tem opções que variam desde configurações simples sem código até implementações totalmente personalizadas que se integram perfeitamente à sua interface do usuário existente. Esteja você executando o moderno Messaging Web Widget ou o legado Classic Web Widget, este guia o orienta por todas as opções de lançador disponíveis e ajuda você a escolher a abordagem certa para suas necessidades.

Vamos detalhar o que você pode realmente fazer com o lançador do seu widget e como implementar cada opção.

Entendendo suas opções de lançador do widget web do Zendesk

O lançador padrão

Imediatamente, o Zendesk oferece três formatos de lançador para escolher no Admin Center:

• Quadrado com um raio de canto ajustável (0px para cantos afiados até 20px para totalmente arredondado)
• Círculo para uma aparência moderna e compacta
• Lançador personalizado que oculta o botão padrão para que você possa construir o seu próprio

O posicionamento é direto: canto inferior esquerdo ou canto inferior direito da janela do navegador. Você também pode definir o espaçamento de deslocamento das bordas se precisar evitar conflitos com outros elementos da interface do usuário, como banners de cookies ou widgets de chat.

O lançador padrão oferece suporte a rótulos de texto opcionais (como "Ajuda" ou "Converse conosco") e você pode escolher se deseja exibir esse texto em dispositivos móveis. Para branding, você define uma cor primária que se aplica tanto ao botão do lançador quanto ao cabeçalho do widget, além de cores de mensagem e ação para a interface de conversação.

Quando escolher um lançador personalizado

O lançador padrão funciona bem para a maioria dos casos de uso. Mas existem situações em que construir um lançador personalizado faz sentido:

• Requisitos de branding específicos: você precisa que o lançador corresponda a elementos de design exclusivos que as cores do Admin Center não conseguem alcançar
• Posicionamento não padrão: você deseja o lançador em outro lugar que não os cantos inferiores ou integrado a um elemento de navegação existente
• Gatilhos complexos: você deseja que o widget seja aberto a partir de vários elementos na página, como um link "Fale Conosco" no seu cabeçalho e um botão flutuante
• Selos de mensagens não lidas: você deseja exibir contagens de notificações em seus próprios elementos de interface do usuário

A desvantagem é o tempo de desenvolvimento. Os lançadores personalizados exigem conhecimento de HTML, CSS e JavaScript. Você também precisará de manutenção contínua se o Zendesk atualizar sua API.

Resumindo? Comece com o lançador padrão, a menos que você tenha um requisito específico que ele não possa atender.

Configurando o lançador padrão no Admin Center

Passo 1: Acesse as configurações do Web Widget

Navegue até Admin Center > Canais > Mensagens e redes sociais > Mensagens, então clique no nome do seu canal do Web Widget.

Você verá várias abas na parte superior: Básico, Estilo, Respostas, Preferências e Instalação. Para a configuração do lançador, você precisa da aba Estilo.

Passo 2: Personalize a aparência do lançador

Na aba Estilo, role até a seção Lançador. Aqui está o que você pode configurar:

Posição na janela do navegador: Escolha canto inferior direito ou canto inferior esquerdo. Considere o que mais existe nos cantos da sua página. Se você tiver um banner de cookies ou outra ferramenta de chat, talvez precise ajustar os deslocamentos ou escolher o canto oposto.

Forma: Selecione quadrado, círculo ou lançador personalizado. Se você escolher quadrado, um controle deslizante aparece para ajustar o raio da borda de 0px (cantos afiados) a 20px (totalmente arredondado).

Texto (opcional): Adicione um rótulo que aparece ao lado do botão do lançador. Algo como "Ajuda" ou "Converse conosco" pode aumentar o engajamento, tornando o propósito do botão mais claro.

Mostrar no celular: Alterne se o rótulo de texto aparece em dispositivos móveis. Em telas pequenas, você pode preferir apenas o ícone para economizar espaço.

Passo 3: Defina cores e branding

Ainda na aba Estilo, a seção Frame controla a identidade visual do widget:

Cor primária: Isso colore o botão do lançador e o cabeçalho do widget. Insira um código hexadecimal ou use o seletor de cores. Se você estiver migrando do Classic Widget, ele usará suas configurações de marca anteriores por padrão.

Cor da mensagem: A cor de fundo das bolhas de mensagens do cliente.

Cor da ação: A cor dos botões e opções selecionadas na conversa.

Logotipo (opcional): Envie um JPG ou PNG para aparecer na parte superior do frame do widget. Esta é sua chance de reforçar o reconhecimento da marca.

Título: O texto que aparece na parte superior do widget. Este pode ser o nome da sua empresa ou uma chamada para ação como "Fale conosco".

Clique em Salvar configurações e suas alterações entrarão em vigor imediatamente em qualquer página com o widget instalado.

Criando um lançador personalizado

Preparando-se para a implementação personalizada

Antes de escrever qualquer código, você precisa fazer duas coisas no Admin Center:

1. Navegue até a mesma aba Estilo descrita acima
2. Defina Forma para Lançador personalizado

Isso remove o botão do lançador padrão do seu site. O widget ainda está lá, apenas oculto até que você o acione programaticamente.

Para a implementação técnica, você precisará de:

• Acesso para editar o HTML e CSS do seu site
• Conhecimento básico de JavaScript
• Familiaridade com a API do Web Widget do Zendesk

Construindo o lançador

Um lançador personalizado tem três componentes:

1. Elemento HTML: O botão ou link clicável que aciona o widget
2. CSS: Estilo para corresponder à sua marca e posicionar o elemento
3. JavaScript: Chamadas de API para abrir, fechar e monitorar o estado do widget

Aqui está uma implementação básica:

<!-- Seu botão de lançador personalizado -->
<button id="custom-launcher">Converse conosco</button>

<script>
  // Ocultar o lançador padrão (já feito no Admin Center, mas isso garante)
  zE('messenger:set', 'hideLauncher', true);

  // Adicionar manipulador de clique ao seu botão personalizado
  document.getElementById('custom-launcher').addEventListener('click', function() {
    zE('messenger', 'open');
  });

  // Opcional: Atualizar o texto do botão quando o widget fechar
  zE('messenger:on', 'close', function() {
    console.log('Widget fechado');
  });
</script>

Você pode estilizar o botão como quiser com CSS. Posicione-o em qualquer lugar da página, use as cores da sua marca, adicione efeitos de foco ou integre-o à navegação existente.

Exemplo de código: Lançador personalizado básico com selo de não lidas

Um exemplo mais completo que mostra contagens de mensagens não lidas:

<button id="custom-launcher">
  Converse conosco
  <span id="unread-badge" style="display: none;">0</span>
</button>

<script>
  // Rastrear mensagens não lidas
  zE('messenger:on', 'unreadMessages', function(count) {
    const badge = document.getElementById('unread-badge');
    if (count > 0) {
      badge.textContent = count;
      badge.style.display = 'inline';
    } else {
      badge.style.display = 'none';
    }
  });

  // Alternar widget ao clicar no botão
  let isOpen = false;
  document.getElementById('custom-launcher').addEventListener('click', function() {
    if (isOpen) {
      zE('messenger', 'close');
    } else {
      zE('messenger', 'open');
    }
  });

  // Rastrear o estado do widget
  zE('messenger:on', 'open', function() { isOpen = true; });
  zE('messenger:on', 'close', function() { isOpen = false; });
</script>

Isso lhe dá um lançador que se comporta como o padrão, mas com controle total sobre a aparência e o posicionamento.

Opções avançadas de personalização

API de temas para Messaging Widget

Além das configurações de cores do Admin Center, o Messaging Widget oferece suporte a uma API de temas JavaScript para personalização dinâmica. Isso é útil se você quiser:

• Alterar as cores com base nas preferências do usuário (como o modo escuro)
• Aplicar temas diferentes em páginas diferentes
• Atualizar o branding dinamicamente sem recarregar

A API usa o comando set customization:

zE("messenger:set", "customization", {
  theme: {
    primary: "#FE5E41",
    onPrimary: "#FFFFFF",
    message: "#F3C178",
    onMessage: "#5F0F00",
    action: "#B0DB43",
    onAction: "#000000",
    background: "#DFE0E2",
    onBackground: "#F10404"
  }
})

Propriedades-chave do tema:

• primary: Cor principal da marca para lançador e cabeçalho
• onPrimary: Cor do texto em elementos primários
• message: Fundo da bolha de mensagem do cliente
• onMessage: Cor do texto nas mensagens do cliente
• action: Cores de botões e elementos interativos
• onAction: Cor do texto nos botões de ação
• background: Cor de fundo do widget
• onBackground: Cor do texto no fundo

Você não precisa especificar todas as propriedades. Qualquer uma que você omitir usa as cores padrão, o que significa que você pode substituir apenas o que precisa.

Fonte: API de Personalização do Web Widget do Zendesk

Diferenças na API do Classic Widget

Se você ainda estiver usando o Web Widget (Classic), a estrutura da API é diferente:

• Os comandos usam zE('webWidget:*') em vez de zE('messenger:*')
• As configurações são definidas em um objeto window.zESettings antes que o widget seja carregado
• A personalização é mais limitada: apenas cor do tema e cor do texto do tema
• Sem suporte para modo incorporado

Exemplo de comando do Classic Widget:

zE('webWidget', 'show');
zE('webWidget', 'hide');
zE('webWidget', 'open');
zE('webWidget', 'close');

Fonte: API do Web Widget (Classic)

Modo incorporado

Em vez de um lançador flutuante, você pode incorporar o widget diretamente em um elemento da página. Isso é útil para páginas de suporte dedicadas, onde você deseja que a interface de conversação esteja visível imediatamente.

Para usar o modo incorporado:

1. Adicione um elemento de contêiner ao seu HTML:

<div id="my-messenger-container"></div>

2. Desative a renderização automática antes que o widget seja carregado:

<script>
  window.zEMessenger = { autorender: false };
</script>

3. Chame o método de renderização com o modo incorporado:

zE("messenger", "render", {
  mode: "embedded",
  widget: {
    targetElement: "#my-messenger-container"
  }
})

O widget se ajusta automaticamente para preencher seu contêiner. Você também pode renderizar apenas a lista de conversas ou o registro de mensagens separadamente se quiser um layout de visualização dividida.

Fonte: Documentação do Modo Incorporado

Melhores práticas para implementação do lançador

Responsividade móvel

Teste seu lançador em dispositivos móveis reais, não apenas nas ferramentas de desenvolvimento do navegador. O lançador padrão lida com dispositivos móveis razoavelmente bem, mas os lançadores personalizados precisam de atenção cuidadosa:

• Garanta que os alvos de toque tenham pelo menos 44x44 pixels
• Considere se os rótulos de texto fazem sentido em telas pequenas
• Teste se o widget não obscurece a interface do usuário móvel crítica

Acessibilidade

Seu lançador deve funcionar para todos:

• Adicione atributos aria-label adequados aos lançadores personalizados
• Garanta que a navegação pelo teclado funcione (Tab para focar, Enter/Space para ativar)
• Teste com leitores de tela para verificar se o widget se anuncia corretamente
• Mantenha contraste de cor suficiente (mínimo WCAG AA)

Evitando conflitos de interface do usuário

Os cantos inferiores dos sites são imóveis lotados. Antes de colocar seu lançador:

• Verifique se há banners de consentimento de cookies
• Procure ferramentas de chat ao vivo de outros provedores
• Considere seus próprios elementos de navegação
• Use as configurações de deslocamento para criar espaço livre

Impacto no desempenho

O widget do Zendesk carrega de forma assíncrona, então ele não bloqueará a renderização da sua página. Mas lançadores personalizados que verificam o estado do widget ou atualizam com frequência podem adicionar sobrecarga. Mantenha seus manipuladores de eventos simples e reduza qualquer atualização rápida.

Aprimorando seu widget com eesel AI

Depois de configurar seu lançador, a próxima pergunta é o que acontece quando os clientes clicam nele. É aí que podemos ajudar.

Na eesel AI, nós nos integramos com mensagens do Zendesk para fornecer respostas alimentadas por IA através do seu widget web. Veja como funciona:

Você conecta o eesel à sua conta do Zendesk e nossa IA aprende com seus tickets anteriores, artigos da central de ajuda, macros e qualquer documentação conectada. Quando os clientes iniciam uma conversa através do seu widget, o eesel pode lidar com a resposta inicial, responder a perguntas comuns e apenas encaminhar para agentes humanos quando necessário.

A IA mantém a voz da sua marca porque é treinada em como sua equipe realmente escreve. E continua aprendendo: quando você corrige uma resposta ou atualiza sua documentação, o eesel incorpora esse feedback automaticamente.

Isso funciona com qualquer configuração de lançador, esteja você usando o botão padrão ou uma implementação totalmente personalizada. A IA fica por trás da interface do widget que seus clientes veem, então você obtém o benefício da automação sem alterar sua configuração de frontend.

Para equipes que buscam reduzir o volume de tickets, mantendo a qualidade, combinar um lançador bem projetado com respostas alimentadas por IA pode reduzir significativamente a carga de suporte. De acordo com os dados de referência do Zendesk, o autoatendimento e a automação eficazes podem reduzir o volume de tickets em até 25%.

Escolhendo a opção de lançador certa para suas necessidades

Aqui está a versão curta de como decidir:

Use o lançador quadrado ou círculo padrão se:

• Você deseja uma configuração rápida com manutenção mínima
• As opções de branding padrão são suficientes
• Você ainda não tem certeza do que precisa

Construa um lançador personalizado se:

• Você tem requisitos de branding específicos
• Você precisa de posicionamento não padrão ou vários pontos de gatilho
• Você deseja exibir selos de notificação personalizados

Use o modo incorporado se:

• Você está construindo uma página de suporte dedicada
• Você deseja que a interface de conversação esteja visível imediatamente
• Você precisa de um layout de visualização dividida com lista de conversas e mensagens lado a lado

Comece simples. O lançador padrão é bom para a maioria das equipes e você sempre pode atualizar para uma implementação personalizada posteriormente. O importante é colocar o suporte na frente de seus clientes rapidamente e, em seguida, iterar com base no que você aprende.

Lembre-se: o lançador é apenas a porta de entrada. O que importa é o que acontece do outro lado. Se você optar por manter as configurações padrão ou construir algo completamente personalizado, certifique-se de que a experiência de conversação agregue valor quando os clientes passarem por essa porta.