Qual é o meu plano?
Suite Qualquer plano
Support Qualquer plano

Quick Look: Central de administração > Canais > Clássico > Web Widget

Depois de o administrador concluir a configuração inicial dos componentes do Web Widget (clássico) na Central de administração e colaborar com o desenvolvedor para adicionar o Web Widget (clássico) ao website, ele pode personalizar ainda mais o Web Widget (clássico) se desejar.

Este artigo é uma visão geral das personalizações avançadas disponíveis no Web Widget (clássico) para os administradores. O objetivo do artigo é responder à pergunta "O que mais posso fazer com meu Web Widget (clássico)?" Ele explica o processo de personalização para administradores e também lista a documentação que os desenvolvedores web precisam consultar.

Se você for um desenvolvedor web (ou um administrador com conhecimentos de desenvolvimento) e estiver procurando a documentação completa sobre as configurações da API e os comandos descritos no artigo, além de outras amostras de código, consulte a documentação do desenvolvedor para a API do Web Widget (clássico).

Este artigo aborda os seguintes tópicos e personalizações do widget:

  • Planejamento da personalização do Web Widget (clássico)
  • Navegação pela documentação da API do Web Widget (clássico)
  • Exibição do seu widget em um idioma diferente
  • Preenchimento de formulários com informações de contato do usuário
  • Desativação de anexos de ticket
  • Reposicionamento do inicializador
  • Deslocamento da posição do widget
  • Personalização da cor dos elementos do widget
  • Alteração do ordenamento visível no widget
  • Supressão de recursos em páginas específicas
  • Personalização de texto no widget
  • Inclusão da linha de assunto no formulário de contato
  • Ocultamento do botão "Visualizar o artigo original"
  • Limitação de resultados de pesquisa
  • Personalização do texto do placeholder na caixa de pesquisa da central de ajuda
  • Configuração avançada do Talk no Web Widget (clássico)
  • Configuração avançada do Chat no Web Widget (clássico)
  • Oferta de várias opções de contato para usuários finais
  • Formatação de código de vários elementos do Web Widget (clássico)

Para obter informações sobre como adicionar o Web Widget (clássico) ao seu site, consulte Uso do Web Widget (clássico) para incorporar o atendimento ao cliente no seu website.

Para obter uma lista completa da documentação do Web Widget (clássico), consulte Recursos do Web Widget (clássico).

Planejamento da personalização do Web Widget (clássico)

Muitos administradores do Support não são desenvolvedores web e trabalham com outra pessoa para implementar as personalizações do Web Widget (clássico). Eles não personalizam o Web Widget (clássico) e os websites sozinhos. Eles trabalham com o desenvolvedor web da empresa ou terceirizado, contratado para implementar as alterações.

O desenvolvedor web é quem faz o trabalho de personalização, adicionando o código (API do Web Widget (clássico)) ao HTML do website. No entanto, o administrador ainda é necessário para o trabalho. Ele precisa saber quais personalizações são possíveis para o Web Widget (clássico) e dizer ao desenvolvedor web o que quer.

Alguns administradores têm experiência com HTML e escolhem realizar as personalizações sozinhos, agindo como desenvolvedores. No entanto, personalizar o Web Widget (clássico) é um processo para o administrador, que requer planejamento e envolve as seguintes etapas:

  1. Estudar as informações nesse artigo para se informar das personalizações avançadas disponíveis.
  2. Reunir-se com os principais interessados da empresa para criar uma lista de requisitos para o Web Widget (clássico). Quais cores devem ser usadas? Como deve ser o comportamento do Web Widget (clássico)?
  3. Preparar uma lista das personalizações desejadas, sendo o mais específico possível e incluindo links para a documentação da API que o desenvolvedor web pode consultar.
  4. Passar a lista para o desenvolvedor que personalizará o Web Widget (clássico) modificando o HTML do website.

Navegação pela documentação da API do Web Widget (clássico)

Temos algumas informações importantes para ajudar os desenvolvedores a navegar pela documentação da API do Web Widget (clássico) no site do desenvolvedor da Zendesk.

Documentação do desenvolvedor e sintaxe da API atualizadas e organizadas — a sintaxe da API do Web Widget (clássico) mudou e reorganizamos a documentação do desenvolvedor da API do Web Widget (clássico) para facilitar a busca pelo comando ou configuração desejado. Agora, a documentação está organizada por canal de produto (Central de Ajuda, Tickets, Chat e Talk) ou por comandos e configurações principais. Para obter mais informações, consulte a documentação do desenvolvedor sobre a API do Web Widget (clássico).

Novas APIs do Chat — para obter informações sobre o mapeamento das APIs do antigo Chat (Zopim) para as APIs do Web Widget (clássico), consulte Migração da sintaxe do widget do Chat para a sintaxe unificada do Web Widget (clássico).

Exibição do seu widget em um idioma diferente

Por padrão, o Web Widget (clássico) incorporado no website exibe o texto no idioma do usuário final, com base no idioma do navegador dele. Por exemplo, se o idioma do navegador do usuário final estiver configurado como de para alemão, o widget será exibido em alemão para o usuário. Se o widget está incorporado na central de ajuda, ele exibe o texto com base na configuração do idioma da central de ajuda.

O Web Widget (clássico) oferece suporte a um subconjunto de idiomas com suporte pelo Zendesk. Se o idioma do navegador do usuário final não tiver suporte do Web Widget (clássico), o widget ficará em inglês por padrão. Se o widget não puder obter o idioma do navegador do usuário final, o widget retorna para o idioma especificado no Zendesk Support por padrão.

Você pode personalizar o widget para que ele seja sempre exibido em um idioma específico usando o comando setLocale. Esse comando define o idioma apenas para o widget e não anula o idioma da sua página principal.

Para obter mais informações, consulte a documentação do desenvolvedor sobre o comando setLocale.

Preenchimento de formulários com informações de contato do usuário

Economize o tempo dos visitantes do seu site e evite seu aborrecimento e frustração com o preenchimento prévio do nome, e-mail e telefone dos clientes nos formulários de contato. Isso inclui os formulários de ticket, formulários pré-chat e formulários offline do Chat. Use as configurações identify e prefill.

Você também pode definir as informações do usuário como somente leitura com a configuração prefill. Isso é ótimo, pois evita a criação de contas de usuário duplicadas no Support.

Para obter mais informações, consulte a documentação do desenvolvedor sobre as configurações identify e prefill.

Desativação de anexos de ticket

Se você permite anexos nos tickets, os usuários podem anexar arquivos aos tickets enviados do Web Widget (clássico), por padrão. No entanto, se precisar, você pode desativar essa opção.

Para obter mais informações, consulte a documentação do desenvolvedor sobre a configuração attachments do objeto contactForm.

Reposicionamento do inicializador

A posição padrão do Web Widget (clássico) está no canto inferior direito do navegador. Quando um usuário clica no inicializador do Web Widget (clássico), ele abre se expandido para cima.

Você pode selecionar um local para o Web Widget (clássico) que varie de acordo com a página (na esquerda ou direita da página, ou no topo, expandindo para baixo quando aberto). Use a configuração position para colocar o Web Widget (clássico) no canto superior esquerdo, superior direito, inferior esquerdo ou inferior direito da página.

Para obter mais informações, consulte a documentação do desenvolvedor sobre a configuração position.

Deslocamento da posição do widget

É possível usar a configuração offset para reposicionar o Web Widget (clássico) em seu computador ou dispositivos móveis. Use a configuração position inicial como ponto de referência e use a configuração offset para mover o Web Widget (clássico) horizontalmente, verticalmente ou ambos (em pixels).

Para obter mais informações, consulte a documentação do desenvolvedor sobre a configuração offset.

Personalização da cor dos elementos do widget

Você pode especificar um esquema de cores geral para o Web Widget (clássico) (cor do tema) e uma cor personalizada para o texto no inicializador, no botão de contato e no cabeçalho (cor do texto do tema) na página de administração do Web Widget (clássico). Consulte Configuração dos componentes no Web Widget (clássico).

No entanto, se desejar personalizar elementos específicos, precisa usar a configuração color. Você pode escolher uma cor exclusiva para cada um destes componentes do Web Widget (clássico):

  • Inicializador
  • Botão
  • Texto do botão
  • Lista de resultados
  • Cabeçalho
  • Links para artigos

Para melhor acessibilidade, o Web Widget (clássico) ajusta automaticamente as cores usando um algoritmo que garante uma taxa de contraste mínimo, conforme especificado nas diretrizes de WCAG.

Para obter mais informações sobre a personalização de cores de elementos do Web Widget (clássico), consulte a documentação do desenvolvedor sobre a configuração color.

Alteração do ordenamento visível no widget

Você pode usar a configuração zIndex, uma das principais do Web Widget (clássico), para definir um novo valor e alterar a exibição do Web Widget (clássico) em comparação a outros elementos no mesmo local do site.

Para obter mais informações, consulte a documentação do desenvolvedor sobre a configuração zIndex.

Supressão de recursos do widget em páginas específicas

É possível ativar o Formulário de contato, o Chat, o Talk e a central de ajuda na página de administração do Web Widget (clássico) e usar a configuração suppress para alterar os recursos oferecidos em determinadas páginas do seu site para melhor atender às suas necessidades.

Por exemplo, você pode usar suppress para:
  • Aumentar a deflexão de tickets com a central de ajuda em algumas páginas
  • Oferecer o Chat ou Formulário de contato sem deflexão em outras páginas
  • Oferecer diferentes níveis de atendimento para usuários conectados ou identificados

Para obter mais informações, consulte a documentação do desenvolvedor sobre a configuração suppress.

Personalização de texto no widget

Você também pode alterar o texto dos componentes do Web Widget (clássico) na tabela abaixo e personalizar o texto do placeholder na pesquisa da central de ajuda.

Componente Detalhes

Objeto: launcher

Configuração: chatLabel

Descrição: texto no botão do inicializador quando o Chat estiver ativado e a Central de Ajuda não estiver ativada

Texto padrão: Chat

Objeto: launcher

Configuração: label

Descrição: texto no botão do inicializador

Texto padrão: Ajuda, Suporte ou Feedback, conforme definido na página de administração do Web Widget (clássico)

Objeto: helpCenter

Configuração: title

Descrição: título da página da Central de Ajuda

Texto padrão: Ajuda

Objeto: contactForm

Configuração: title

Descrição: título do formulário de contato

Texto padrão: Deixe uma mensagem ou Entre em contato conosco, conforme definido na página de administração do Web Widget (clássico)

Objeto: helpCenter

Configuração: messageButton

Descrição: texto no botão do formulário da central de ajuda que carrega o formulário de contato (limite aproximado de 20 caracteres)

Texto padrão: Deixe uma mensagem ou Entre em contato conosco, conforme definido na página de administração do Web Widget (clássico)

Objeto: helpCenter

Configuração: chatButton

Descrição: texto no botão exibido no formulário da central de ajuda que carrega o Chat (limite aproximado de 20 caracteres)

Texto padrão: Ajuda, Suporte ou Feedback, conforme definido na página de administração do Web Widget (clássico)

Use o objeto translations para alterar partes do texto padrão exibido no Web Widget (clássico). As traduções são agrupadas por recurso como, por exemplo, Inicializador, central de ajuda ou Formulário de contato.

Observação: se você especificar o caractere coringa (*) para o nome do idioma, a cadeia de caracteres será aplicada a todos os idiomas.

Consulte a lista de códigos de idioma mais usados em Códigos de idioma para os idiomas suportados pelo Zendesk.

As traduções de idiomas locais são ativadas pelo idioma do navegador do usuário final. Você também pode forçar o widget a ser exibido sempre em um idioma específico, anulando a configuração de idioma do navegador do usuário final. Para obter mais informações, consulte Exibição do seu widget em um idioma diferente.

Inclusão da linha de assunto no formulário de contato

Com a configuração subject no objeto contactForm, você pode configurar o Web Widget (clássico) para incluir um campo de assunto no formulário de contato padrão.

O formulário de contato padrão é projetado para gerar engajamento e oferecer uma experiência de usuário elegante ao preencher o formulário. Embora o formulário de contato padrão não tenha linha de assunto, você poderá adicioná-la para melhorar a experiência de suporte para alguns clientes.

Para obter mais informações, consulte a documentação do desenvolvedor sobre a configuração subject no objeto contactForm.

Ocultamento do botão "Visualizar o artigo original"

O botão Visualizar o artigo original cria uma ponte entre o artigo no Web Widget (clássico) e na central de ajuda. Você pode ocultar esse botão usando o objeto helpCenter e configurar a propriedade originalArticleButton como false.

Para obter mais informações, consulte a documentação do desenvolvedor sobre a configuração originalArticleButton do objeto helpCenter.

Limitação de resultados de pesquisa

Com a configuração filter no objeto helpCenter, você pode limitar os resultados das pesquisas realizadas no Web Widget (clássico) a artigos com base em categorias, seções e rótulos. Para obter mais informações, consulte a documentação do desenvolvedor sobre a configuração filter.

Role para ver exemplos que não estão inclusos na documentação do desenvolvedor e que ilustram algumas maneiras como você pode limitar os resultados de pesquisa.

Observação: para especificar várias seções, categorias ou rótulos, use uma vírgula para separar os valores (não são necessários espaços antes ou depois).

Como limitar a pesquisa a uma seção específica:

<script type="text/JavaScript">
window.zESettings = {
  webWidget: {
    helpCenter: {
      filter: {
        section: '200154474-Announcements'
      }
    }
  }
};
</script>

Como limitar a pesquisa a uma categoria específica:

<script type="text/JavaScript">
window.zESettings = {
  webWidget: {
    helpCenter: {
      filter: {
        category: '200053794-General'
      }
    }
  }
};
</script>

Como limitar a pesquisa ao conteúdo em várias categorias:

<script type="text/JavaScript">
window.zESettings = {
  webWidget: {
    helpCenter: {
      filter: {
        category: '115000669485,201742209' 
      }
    }
  }
};
</script>

Como limitar a pesquisa ao conteúdo com um rótulo específico:

<script type="text/JavaScript">
window.zESettings = {
  webWidget: {
    helpCenter: {
      filter: {
        label_names: 'orders'
      }
    }
  }
};
</script>

Como limitar a pesquisa ao conteúdo em uma categoria específica com rótulos específicos:

<script type="text/JavaScript">
window.zESettings = {
  webWidget: {
    helpCenter: {
      filter: {
        category: '200053794-General',
        label_names: 'Label One,Label Two,Label Three'
      }
    }
  }
};
</script>

Personalização do texto do placeholder na caixa de pesquisa da central de ajuda

Por padrão, o texto do placeholder exibido na caixa de pesquisa da central de ajuda diz Como podemos ajudar? Você pode personalizar esse texto para que corresponda ao idioma do usuário ou para que um texto específico seja exibido em alguns idiomas. Para obter mais informações, consulte a documentação do desenvolvedor sobre a configuração searchPlaceholder.



Se a Ajuda contextual estiver ativada, você pode configurar o Web Widget (clássico) para abrir artigos recomendados, facilitando o autoatendimento para os clientes. Para obter mais informações, consulte a documentação do desenvolvedor sobre o comando setSuggestions do objeto helpCenter.

Configuração avançada do Talk no Web Widget (clássico)

É possível criar várias configurações que definam como o Talk se comporta no Web Widget (clássico). Com cada configuração, você pode personalizar o encaminhamento de chamada e as opções de exibição para o Talk no Web Widget (clássico), com base em suas necessidades e preferências.

Os atributos principais que você pode personalizar em cada configuração são:

  • Grupo de agentes ao qual você deseja que as solicitações de retorno de chamada do Web Widget (clássico) sejam encaminhadas

  • Prioridade das solicitações de retorno de chamada do Web Widget (clássico)

  • Exibição de Solicitar um retorno de chamada, de Ligue para a gente ou das duas opções no Web Widget (clássico)

  • Exibição do tempo de espera estimado no Web Widget (clássico)

Se você tiver criado uma única configuração do Talk no Web Widget (clássico), essa será a configuração padrão exibida no Web Widget (clássico) sempre que o Talk estiver disponível.

Se você tiver criado várias configurações do Talk no Web Widget (clássico), poderá usar a definição de apelido do Talk para alcançar a configuração desejada.

Observação: o apelido na solicitação de API das configurações do Talk deve corresponder exatamente ao apelido da sua configuração do Talk, incluindo espaços e letras maiúsculas.

Para obter mais informações, consulte a documentação do desenvolvedor sobre o objeto talk, a configuração nickname e o artigo Definição das configurações do Zendesk Talk para o Web Widget (clássico).

Configuração avançada do Chat no Web Widget (clássico)

Se você está usando o chat em tempo real no Web Widget (clássico), pode disponibilizar as funções do Zendesk Chat no Web Widget (clássico) para que os visitantes do seu website possam conversar por chat com agentes, ou enviar e receber arquivos que podem ajudar na resolução do problema. Os agentes também podem enviar mensagens proativas para os visitantes para perguntar se eles querem ou precisam de ajuda.

Para obter mais informações, consulte a documentação do desenvolvedor sobre o objeto chat.

Com a experiência integrada do widget de chat e da web, você pode personalizar ainda mais o objeto chat com as seguintes configurações:
  • title
  • concierge
  • departments
  • prechatForm
  • offlineForm
  • notifications
  • tags
  • authenticate

Para obter informações sobre o mapeamento das APIs do antigo Chat (Zopim) para as APIs do Web Widget (clássico), consulte Migração da sintaxe do widget do Chat para a sintaxe unificada do Web Widget.

Oferta de várias opções de contato para usuários finais

Você pode permitir que os usuários finais escolham uma opção de contato. Também é possível personalizar seu website para que algumas páginas permitam que usuários finais façam uma escolha e noutras não. O comportamento exato depende de o Chat ou o Talk estar configurado para o Web Widget (clássico) e de o agente do chat estar online. Se necessário, você pode personalizar o texto padrão das opções de contato.

Listamos o texto padrão:

Opção de contato Texto padrão
Botão de contato Entre em contato conosco
Rótulo do chat (com agente online) Chat em tempo real
Rótulo do chat (com agente offline) Chat não disponível
Rótulo do formulário de contato Deixe uma mensagem

Para obter mais informações, consulte a documentação do desenvolvedor sobre a configuração contactOptions.

Oferecimento de opções de contato com o Chat

Se o Chat estiver configurado para o Web Widget (clássico), os usuários finais serão encaminhados automaticamente para um chat, se um agente do Chat estiver disponível. No entanto, você pode permitir que os usuários finais escolham entre conversar por chat com um agente ou preencher um formulário de contato, mesmo se um agente do Chat estiver disponível. Se um agente do Chat estiver disponível quando o usuário clicar no inicializador, mas esse agente sair do chat antes de seu início, o usuário final poderá ver uma mensagem informando que o agente não está disponível.

É um problema conhecido: quando os usuários finais escolhem conversar por chat, eles não podem usar o botão de retorno para escolher outras opções de contato. Para tal, eles precisam encerrar o chat completamente ou atualizar a página.

Oferecimento de opções de contato com o Talk

Se o Talk e outras opções de contato estiverem ativadas no Web Widget (clássico) e agentes estiverem online, as opções de contato serão ativadas automaticamente.

Formatação de código de vários componentes do widget

Observação: esta seção destina-se apenas a fins educacionais. A Zendesk não oferece suporte nem garantia ao código. Ela também não fornece suporte a tecnologias terceirizadas como JavaScript, jQuery ou CSS. Publique problemas encontrados nos comentários ou pesquise por uma solução online.

Os itens específicos do Formulário de contato, da Central de Ajuda e do Zendesk Chat ficam aninhados nesses cabeçalhos (contactForm, helpCenter e chat) no HTML do seu site, enquanto os itens globais são inclusos separadamente.

Por exemplo, as seguintes personalizações foram definidas:
  • A posição do Web Widget (clássico) na tela foi alterada usando a configuração “offset”. Offset é um item global, com entrada própria.
  • Pesquisa da central de ajuda — não inclui o botão Visualizar o artigo original. O título “Search for help” para usuários cujo idioma é inglês e “Have your say” para os outros idiomas.
  • O Chat está desativado.
  • O título do formulário de contato é “Message us” para inglês e “Contact us” para outros idiomas.
  • O texto do botão do inicializador é “Make a request” em inglês e “Get help” em outros idiomas.
<script type="text/JavaScript">
window.zESettings = {
  webWidget: {
    offset: { horizontal: '400px', vertical: '400px' },
    helpCenter: {
      originalArticleButton: false,
      title: {
        'en-US': 'Search for help',
        '*': 'Have your say'
      }
    },
    chat: {
      suppress: true
    },
    contactForm: {
      title: {
        'en-US': 'SMessage us',
        '*': 'Contact us'
      }
    },
    launcher: {
      label: {
        'en-US': 'Make a request',
        '*': 'Get help'
      }
    }
  }
};
</script>
Powered by Zendesk