Iniciar o widget quando um botão é clicado

Criada por Suporte Bravo, Modificado em Seg, 4 Jul, 2022 na (o) 4:13 PM por Isabelle Fernandes

Disponível em todos os planos.

Com o widget de ajuda do Freshdesk, você pode incorporar artigos de solução e um formulário de contato em seu site ou produto. Quando seus clientes precisam de ajuda, eles podem abrir o widget para pesquisar artigos de solução ou enviar um tíquete. Você pode assistir a este vídeo para aprender como configurar o widget de ajuda ou ler mais sobre como configurar o widget de ajuda aqui .

Você também pode fazer o widget abrir quando seus clientes clicarem em um botão em seu site ou produto, como "Clique aqui para obter ajuda". Este artigo de solução o guiará pelo processo de configuração de um botão que pode abrir o widget.

Aqui está um exemplo de site com isso implementado:

1. Criação de um botão

Primeiro, decida em qual botão seus clientes terão que clicar para abrir o widget. Se ainda não tiver um botão, você terá que criar um primeiro.

Amostra de código para um botão:

 <button type = "button">
 Isto é um botão
 </button>

A propósito, isso não precisa ser um botão. Você também pode usar qualquer outro elemento, como um link, se preferir.

2. Criação de uma função que abre o widget

Agora que criou um botão, você pode definir o que precisa acontecer. Você pode usar uma função JavaScript para fazer isso.

 Uma função JavaScript é um pedaço de código para completar uma ação específica ou um conjunto de etapas.

No código de amostra abaixo, definimos uma função chamada openWidget (). A função openWidget () diz ao widget para abrir usando a API do widget : FreshworksWidget ('open');

O nome da função é apenas para sua referência e pode ser alterado como desejar.

Código de amostra para a função openWidget ():

 <script>
 / * Esta é a função para abrir o widget * /

 function openWidget () {
 FreshworksWidget ('aberto');
 }
 </script>

Coloque esta função acima do código de incorporação (que você teria copiado do Freshdesk) e dentro das tags <script>

Se você deseja abrir o formulário de contato diretamente, pode usar a API para abrir o formulário de contato.

Código de amostra para a função openWidget ():

 <script>
 / * Esta é a função para abrir o widget * /

 function openWidget () {
 FreshworksWidget ('aberto', 'ticketForm');
 }
 </script>

3. Abrindo o widget quando o botão é clicado

Até agora, fizemos duas coisas:

criou um botão na página
criou uma função que abre o widget

A próxima coisa que precisamos fazer é executar a função quando seus clientes clicarem no botão. Você pode usar onclick para fazer isso.

Podemos executar uma função usando o evento onclick quando o usuário clica em um elemento (como um botão).

Código de amostra para um botão com o evento onclick:

 <button onclick = "openWidget ()" type = "button">
 Clique neste botão para abrir o widget
 </button>

Aqui está um exemplo de como a tag <script> se parecerá com o código embutido do widget, junto com a função openWidget () do JavaScript que criamos.

 / * Esta é a função para abrir o código do widget * /
function openWidget () {
FreshworksWidget ('aberto');
}

/ * Este é o código de incorporação do widget * /
window.fwSettings = {
'widget_id': 47000000016
};
! function () {if ("function"! = typeof window.FreshworksWidget) {var n = function () {nqpush (arguments)}; nq = [], window.FreshworksWidget = n}} ()
</script>
<script type = 'text / javascript' src = 'https: //widget.freshworks.com/widgets/47000000016.js' async defer> </script>

Aqui está uma página de amostra com isso implementado.

4. Escondendo o widget

Além disso, você também pode ocultar o widget para que seus clientes não o vejam até clicarem em um botão para pedir ajuda. Para isso, usaremos a API ocultar widget : FreshworksWidget ('ocultar', 'lançador');

Você pode chamar a API do widget de ocultação sempre que a página for carregada. Dessa forma, o widget, junto com o inicializador, fica oculto por padrão para seus clientes. O widget será aberto apenas quando o botão for clicado.

Exemplo do código da API do widget de ocultação incluído na tag body

 <body onload = "FreshworksWidget ('hide', 'launcher');">

Aqui está uma página de amostra com a API de widget ocultar e a API de widget aberta implementada:

Se você preferir mostrar o iniciador quando o widget abre quando seus clientes clicam em um botão, você pode remover o parâmetro 'lançador' ao ocultar o widget: FreshworksWidget ('ocultar')

Exemplo de uso da API de widget de ocultação na tag body sem o parâmetro de inicialização

 <body onload = "FreshworksWidget ('hide');">