Instalando o Binds Web Widget

Ofereça a pesquisa em seu site durante o acesso de seus visitantes. Incorpore uma pesquisa no seu site, exibindo quando as pessoas acessarem uma página. A instalação é simples, basta copiar e colar o código Javascript do Widget em seu HTML, imediatamente antes da sua tag de encerramento em sua página.

Exemplo de tag HTML. 

<div> 
  <link href="https://widget.binds.co/css/app.css" rel=stylesheet>
  <div>
    <vue-widget widget_position="right" widget_title="feedback" buttons="#010101" width="400" text_buttons="#ffffff" background="#c3c3c3" texts="#535151" timeout="0" width_metric="px" survey_id="{surveyId}" from='{"name": "", "email": "", "phone":""}' is_to_post="true" metadata='{}'/>
  </div>
  <script src="https://widget.binds.co/js/app.js"></script>
</div>

Também é possível colar o código em seu Google Tag Manager ou outro gerenciador de tags, para utilizar o GTM é necessário algumas mudanças no código da Tag:

Exemplo de tag para uso no Google tag manager (GTM). 

                        
<div id="widgetBinds">
    <link href="https://widget.binds.co/css/app.css" rel="stylesheet">
    <div>
      <script>
        document.write("<div><vue-widget widget_position=\"right\" widget_title=\"feedback\" buttons=\"#010101\" width=\"400\" text_buttons=\"#ffffff\" background=\"#c3c3c3\" texts=\"#535151\" timeout=\"0\" width_metric=\"px\" survey_id=\"5d711fad9f531f2974e01d7f\" from=\"{}\" is_to_post=\"true\" metadata=\"{}\" /></div>");
        
        var widget = document.getElementById("widgetBinds").parentElement;
        widget.setAttribute("style", "display: init;visibility: ''")
      </script>
    </div>
    <script src="https://widget.binds.co/js/app.js"></script>
</div>

Parâmetro Descrição
survey_id Código identificador da pesquisa. Exemplo: survey_id=”a05fa4cc286de86011a265b1b849”
widget_position Determina a posição que o widget será aberto em sua página, pode receber os valore: right (direita da página), left (esquerda da página), lowerRight (a direita e no final da tela) e lowerLeft (a esquerda e no final da tela), exemplo: widget_position="lowerRight"
widget_title Você pode alterar o texto do botão do widget através dessa opção, aceita um conteúdo texto. Exemplo: widget_title="Feedback"
buttons Determina a cor que será utilizada nos botões do widget, devem ser passados valores no formato RGB, exemplo: buttons="#010101"
width Determina o tamanho horizontal do widget, o valor passado deve ser um número inteiro positivo, exemplo width="400"
text_buttons Determina a cor que será utilizada nos textos dos botões do widget, devem ser passados valores no formato RGB, exemplo: text_buttons="#010101"
background Determina a cor que será utilizada no fundo do widget, devem ser passados valores no formato RGB, exemplo: background="#010101"
texts Determina a cor que será utilizada nos textos do widget, devem ser passados valores no formato RGB, exemplo: texts="#010101"
timeout Determina o tempo, em segundos, que o widget vai esperar para abrir a pesquisa, os números devem ser números positivos e inteiros, exemplo: timeout="15"
width_metric Determina o padrão de medida que será utilizado para o tamanho do widget, definido no parâmetro width, pode receber os valores px (pixels) ou %. Exemplo: width_metric="px"
from Através deste parâmetro você pode identificar os clientes que estão respondendo sua pesquisa, você deve passar as informações no formato Json. Você pode passar os dados de nome, email e telefone para identificação dos usuários. Exemplo: from='{"name": "João", "email": "joao@exemplo.com", "phone":"1122222222"}'
metadata Através deste parâmetro você pode salvar junto da resposta do cliente outras informações, previamente identificadas na plataforma Binds. As informações devem ser passadas no formato Json. Exemplo: metadata='{"loja":"sao paulo","email":"exemplo@exemplo.co","id":"666666"}'