Instalando o widget no seu site

11 min de leitura188
Copiar para a I.A.:

O widget é a pesquisa rodando dentro do seu próprio site, sem depender de o cliente abrir um e-mail. Você cola um trecho de código uma única vez e o WiseData NPS cuida do resto: quando aparecer, para quem, quantas vezes e o que fazer depois da resposta.

Este artigo usa um exemplo do começo ao fim: a Sanches Contabilidade quer medir a satisfação de quem usa o portal dela, em app.sanches.com.br.

Antes de começar

Três coisas precisam estar prontas:

  1. Uma pesquisa com o canal Site / Embed marcado na etapa Canais. O código só é gerado depois que a pesquisa é salva — antes disso a tela mostra "Salve a pesquisa para gerar o código de instalação".
  2. Acesso ao DNS do domínio (o painel onde o domínio está registrado ou hospedado), para publicar o registro que prova que o site é seu.
  3. Acesso ao HTML do site, ou a um gerenciador de tags. Se outra pessoa cuida do site e do DNS, o que você entrega a ela é o registro do passo 2 e o código do passo 3.

O embed não funciona para pesquisas de eNPS nem de Concorrência — a primeira é interna, a segunda é direcionada, e nenhuma das duas faz sentido aberta a qualquer visitante. Também não divide a pesquisa com e-mail ou WhatsApp: o site pode andar junto só com o canal Aplicativo.

Os passos abaixo aparecem numerados na própria tela, em dois lugares: na etapa de canais da pesquisa, dentro de Configuração de Site / Embed, e em Canais › Configurações do Embed (ali só os passos 1 e 2, porque não há pesquisa para gerar código). Os domínios são da conta, não da pesquisa: verificado uma vez, vale para todas as pesquisas.

Passo 1 — Informe o domínio do seu site

Em Informe o domínio do seu site, digite o endereço — no nosso exemplo, sanches.com.br — e clique em Adicionar. Pode colar a URL inteira: o sistema tira o https:// e o caminho sozinho.

Um domínio vale também para www e para os subdomínios. Ou seja, sanches.com.br já autoriza www.sanches.com.br e app.sanches.com.br — a Sanches não precisa cadastrar os três. É por isso que vale cadastrar o domínio raiz, e não o subdomínio específico.

Quantos domínios cabem depende do plano: um no Free e no teste gratuito, dois no Pro e sem limite a partir do Business. Domínio ainda não verificado também conta.

Passo 2 — Prove que o domínio é seu

Assim que o domínio entra na lista, a tela mostra um registro TXT com três campos — Tipo, Nome e Valor —, cada um com botão de copiar. Crie esse registro no painel de DNS do domínio, exatamente como está (o nome começa com _wisedata-nps, então ele não mexe nos registros de e-mail nem em outras verificações que você já tenha). Depois volte e clique em Verificar agora.

A propagação do DNS leva de alguns minutos a algumas horas. Enquanto isso o domínio aparece como Aguardando publicação (ainda não conferimos) ou Registro não encontrado (conferimos e não estava lá) — espere e verifique de novo. Quando passa a Verificado, o registro some da tela.

Enquanto nenhum domínio estiver verificado, nada funciona. Isso é proposital: sem essa prova, qualquer conta poderia cadastrar o domínio de outra empresa e pôr uma pesquisa no site dela, ou uma página qualquer copiaria o seu código e contaminaria a sua base. Pelo mesmo motivo, um domínio já verificado por outra conta não pode ser cadastrado; e se duas contas cadastram o mesmo domínio, fica com ele quem verificar primeiro — a outra é avisada por e-mail.

Não apague o registro depois. A posse é conferida de novo periodicamente. Se o TXT sumir, o widget continua funcionando, mas o domínio ganha um aviso na tela e os administradores da conta recebem um e-mail — republique o registro.

Passo 3 — Copie o código da pesquisa

O código aparece em Copie o código para o seu site, na etapa de canais da pesquisa, e só é liberado depois que pelo menos um domínio está verificado — antes disso ele fica esmaecido, sem o botão Copiar código, porque instalado antes não carregaria. Na pesquisa já salva, o mesmo código está no cartão Código do widget, com a mesma regra: sem domínio verificado, o cartão fica travado e mostra o link Verificar domínio em Canais. Ele tem esta cara:

<script src="https://cdn.wisedatanps.com/embed/widget.min.js" data-survey="SEU_ID_DA_PESQUISA" async></script>

O data-survey é o que amarra o código àquela pesquisa específica. Cada pesquisa tem o seu — não reaproveite o código de uma pesquisa antiga achando que é o mesmo.

Passo 4 — Cole no site

Cole antes do fechamento da tag </body>, em todas as páginas onde a pesquisa deve aparecer — é a mesma instrução que a tela mostra junto do código. O async garante que ele não segura o carregamento da sua página.

Não tente limitar as páginas escolhendo onde colar o código: para isso existe a Segmentação por página na configuração da pesquisa, que aceita curingas (/checkout/*) e tem regra de bloqueio com precedência sobre a de permissão. Colar em todo lugar e filtrar no painel é o caminho que você consegue mudar depois sem mexer no site.

Diga quem está respondendo

Este é o passo que mais muda o valor da pesquisa, e o único que o código copiado do painel não traz pronto. Do jeito que ele vem, toda resposta chega anônima: você fica com a nota, mas não sabe de quem.

Se o seu site tem área logada — como o portal da Sanches —, acrescente os dados da pessoa na própria tag:

<script src="https://cdn.wisedatanps.com/embed/widget.min.js" data-survey="SEU_ID_DA_PESQUISA" data-user-id="8421" data-user-email="maria@empresa.com.br" data-user-name="Maria Andrade" data-user-traits='{"plano":"Pro","cidade":"Goiânia"}' async></script>

Você ganha três coisas com isso:

  • O nome de quem respondeu aparece no cartão do feedback e no detalhe do cliente, em vez de "respondente anônimo".
  • Uma pessoa responde uma vez só, mesmo trocando de navegador ou de computador — a checagem passa a ser pelo data-user-id, não pelo aparelho.
  • Os traits viram recorte de análise: com plano preenchido, a Sanches consegue olhar a nota de quem está no plano Pro separada da de quem está no básico. Se um trait se chamar phone, o valor entra como telefone de contato do respondente.

Os traits têm teto: até 10 atributos, e valores simples (texto, número ou sim/não). O que passar disso é descartado em silêncio, então não use o campo como despejo de dados do usuário — use os poucos rótulos pelos quais você realmente vai querer segmentar.

Em pesquisas anônimas, nada disso aparece no painel: nome, e-mail e traits ficam ocultos mesmo tendo sido enviados. A promessa de anonimato vale acima da identificação.

Sites de página única (React, Vue, Angular)

Em sites que trocam de tela sem recarregar, o código roda uma vez só, na primeira carga. Isso tem três consequências práticas.

A identificação chega depois. Na primeira carga o visitante costuma nem estar logado ainda. Para esse caso, avise o widget assim que souber quem é a pessoa:

window.WiseDataNPS.identify({ id: '8421', email: 'maria@empresa.com.br', name: 'Maria Andrade', traits: { plano: 'Pro' } });

Pode chamar antes do widget terminar de carregar — a chamada fica na fila e é aproveitada. E chame de novo quando o usuário trocar (sair e entrar com outra conta), senão a resposta do segundo sai no nome do primeiro.

Quando alguém apenas sai da conta, avise também:

window.WiseDataNPS.reset();

Sem isso, a identificação do último usuário continua na memória do widget até a página ser recarregada — e uma resposta dada depois da saída chega no nome de quem já foi embora. O reset() só esquece quem estava identificado: ele não fecha uma pesquisa que já esteja aberta na tela. Para isso, veja o item abaixo.

A pesquisa aberta não sai da tela sozinha. Ela só desaparece quando o visitante responde ou fecha — até lá, atravessa as trocas de tela do seu site. Se a pesquisa é para quem está logado, monte o widget dentro da área logada, e não na raiz do aplicativo: na raiz, ele continua de pé quando a pessoa é levada para telas públicas como o login ou a redefinição de senha. E, ao sair da área logada, tire a pesquisa junto:

document.querySelectorAll('.wdnps-container') .forEach(function (el) { el.remove(); }); window.WiseDataNPS.reset();

Vale um cuidado extra com os gatilhos Após tempo na página e Intenção de saída: eles podem disparar depois que a pessoa já mudou de tela, e a pesquisa nasce onde você não queria.

Segmentação por página e "após N páginas" enxergam só a primeira tela. Como não há recarga, a URL avaliada é a da entrada e a contagem de páginas não avança. Nesses sites, prefira os gatilhos Imediato, Após tempo na página ou Intenção de saída, e evite depender de regras por URL. Repare que a URL gravada na resposta segue outra lógica: é a da tela em que a pessoa estava no instante do envio, e é ela que aparece em Origem da Resposta no painel.

Escolhendo onde a pesquisa aparece

O modo de exibição — Popup, Slide-in ou Inline — é definido na configuração da pesquisa e não precisa ser repetido no código. O popup abre centralizado após alguns segundos; o slide-in desliza no canto inferior direito; o inline nasce dentro da própria página, sem botão de fechar. Para popup e slide-in, a opção Fechamento decide se o visitante Pode fechar, Só pode adiar ou se a pesquisa é Obrigatória.

No modo inline, por padrão a pesquisa aparece exatamente onde você colou o código — não é preciso criar nenhuma caixa em volta. Se quiser mandá-la para outro ponto da página, indique o elemento:

<script src="https://cdn.wisedatanps.com/embed/widget.min.js" data-survey="SEU_ID_DA_PESQUISA" data-target="#area-da-pesquisa" async></script>

Existe também data-mode, que força um modo diferente do configurado no painel. Use com parcimônia: o dia em que alguém mudar o modo na pesquisa e nada mudar no site, a resposta estará nesse atributo esquecido no HTML.

Quando o widget não aparece

O widget falha em silêncio de propósito — ele nunca quebra a sua página nem mostra erro para o visitante. Confira nesta ordem, que é a da frequência:

  • O domínio está verificado? É a causa número um. Em Canais › Configurações do Embed, o domínio precisa estar como Verificado — cadastrado e Aguardando publicação ou Registro não encontrado ainda não carrega. Lembre que subdomínio é coberto pelo domínio raiz, mas isso não vale entre domínios diferentes.
  • A pesquisa está em execução? Pesquisa em rascunho, pausada, encerrada ou fora da janela de datas não exibe nada.
  • Você já respondeu ou já fechou? Quem responde não vê de novo, e quem fecha o widget entra nos Dias de descanso após fechar configurados. Para testar como um visitante novo, use uma janela anônima.
  • A taxa de amostragem está baixa? Em 20%, quatro de cada cinco visitantes não veem nada — e isso inclui você.
  • A segmentação por página bate com a URL atual? A lista de páginas bloqueadas tem precedência sobre a de permitidas.
  • O gatilho já disparou? Em "intenção de saída" no computador, o widget só aparece quando o cursor sai pelo topo da tela; no celular, ele espera dez segundos.

O que cada plano libera

O widget em si está disponível em todos os planos, e os envios por ele são ilimitados — não consomem cota de e-mail nem de WhatsApp. O que muda com o plano é:

  • Quantos domínios você pode cadastrar: um no Free e no teste gratuito, dois no Pro, sem limite a partir do Business. A tela deixa você digitar mais, mas o cadastro é recusado acima do que o seu plano permite. Para trocar de domínio num plano com limite, remova o antigo antes.
  • Frequência de exibição (não repetir a pesquisa para a mesma pessoa por N dias) está disponível a partir do Pro e no teste gratuito; no Free o campo aparece bloqueado.

Para onde ir depois

  • Canais de envio — como o embed se compara ao e-mail e ao WhatsApp, e as métricas de cada um.
  • Criando e enviando pesquisas — as regras de exibição, os gatilhos e as ações pós-resposta, passo a passo.
  • Resultados e relatórios — onde ler as respostas, incluindo o NPS por página do site.
  • Alertas — como ser avisado na hora em que um detrator responde.

Resumindo: cadastre o domínio, publique o registro TXT e verifique, cole o código da pesquisa em todas as páginas do site, acrescente os dados de quem está logado para não receber respostas anônimas, e resolva o resto — quando aparecer, para quem e com que frequência — pelas regras de exibição no painel, sem voltar a mexer no HTML.

Este artigo foi útil?