Como criar o widget de suporte e instalar no site

O widget de suporte põe um botão de ajuda no site ou no sistema do seu cliente. Quem está usando o site clica, descreve o problema e manda print, vídeo, áudio e arquivos, e o chamado chega no seu quadro com os detalhes técnicos da página. Só o administrador da organização cria widgets: um por site, até 20 por organização.

Criar o widget

1. 1
   Passo 1: No topo do painel, clique em Compartilhar e escolha Widget para o seu site. Ou abra Configurações e a aba Widget.
2. 2
   Passo 2: Clique em Novo widget.
3. 3
   Passo 3: Em Nome do site, escreva algo como Site da loja ou Sistema interno. O nome aparece no selo dos chamados.
4. 4
   Passo 4: Em Domínios permitidos, digite o endereço do site e clique em Adicionar (ou tecle Enter). Use o endereço completo com https:// e sem caminho, por exemplo https://www.cliente.com.br.
5. 5
   Passo 5: Ajuste o Texto do botão (até 40 caracteres; o padrão é Precisa de ajuda?) e o Setor dos chamados.
6. 6
   Passo 6: Em Posição do botão, escolha Canto direito ou Canto esquerdo (útil quando o chat do site já ocupa a direita).
7. 7
   Passo 7: Em O que o widget captura, marque o que vale para este site. Com Vídeo da tela ligado, escolha a Duração máxima do vídeo, de 30 segundos a 5 minutos (o padrão é 2 minutos).
8. 8
   Passo 8: Ligue Identidade obrigatória só se o widget for para uma área logada. Veja Como identificar o usuário logado.
9. 9
   Passo 9: Clique em Criar widget. A tela Widget criado mostra o trecho para colar no site e o Link direto.

Colar o trecho no site

Copie o trecho do cartão do widget e cole em todas as páginas em que o botão deve aparecer, antes do fechamento da tag body (no modelo ou no rodapé comum do site). Ele tem esta forma, com a chave do seu widget:

<script src="https://benflow.net/widget.js" data-benflow-key="wk_suachave" crossorigin="anonymous" async></script>

O script carrega sem travar a página e fica isolado: não mexe no visual do site. Para registrar também os erros que acontecem enquanto a página carrega, cole o trecho dentro do head, antes dos outros scripts.

No cartão, Como instalar no site traz o passo a passo em abas: HTML, React e Next.js, WordPress (com um plugin de código no rodapé, como o WPCode), Google Tag Manager (tag de HTML personalizado acionada em All Pages) e Botão próprio.

Link direto, para quem não mexe no site

Cada widget tem um Link direto, no formato https://benflow.net/w/ seguido da chave do widget. Ele abre o mesmo atendimento numa página inteira, sem instalar nada: mande por e-mail ou mensagem, ou ponha num botão do site. O link direto funciona mesmo sem domínio na lista. Use Abrir link direto no cartão para conferir.

Como a página aberta pelo link direto é a do Benflow, e não a do site do cliente, o chamado que chega por ele leva os dados do navegador, mas não o endereço da página, os erros do console, as falhas de rede nem a trilha de cliques.

Botão próprio e dados do seu sistema

Qualquer botão ou link do site pode abrir o widget. Cole o atalho uma vez e chame Benflow('open'); Benflow('open', 'meus') abre direto em Meus chamados e Benflow('close') fecha o painel. Para tirar o botão flutuante, acrescente data-benflow-button="false" ao trecho do script.

<script>
  window.Benflow = window.Benflow || function () { (window.Benflow.q = window.Benflow.q || []).push(arguments) }
</script>
<button type="button" onclick="Benflow('open')">Falar com o suporte</button>

Para mandar dados do seu sistema junto com o chamado, como plano, número do pedido ou versão, use setContext. Não mande senhas nem tokens.

window.Benflow = window.Benflow || function () { (window.Benflow.q = window.Benflow.q || []).push(arguments) }
Benflow('setContext', { plano: 'Empresarial', pedido: '12345' })