Desenvolvedores

Web Widget

Ofereça a pesquisa dentro do seu site com um snippet simples. Você escolhe posição, estilo e o survey_id.

Ver Referência API Criar conta
Snippet (rápido)
Cole antes do </body>. Para o snippet completo com todos os parâmetros, use “Ver completo”. 
<link href="https://widget-v3.binds.co/css/app.css" rel="stylesheet">

<vue-widget
  survey_id="<survey_id>"
  widget_position="top-right"
  widget_title="feedback"
  buttons="#3e5c76"
  texts="#ffffff"
  text_buttons="#ffffff"
/>

<script src="https://widget-v3.binds.co/js/app.js"></script>
Ver completo

Demonstração

Essa seção carrega o Web Widget de verdade. Informe o survey_id (ou passe na URL como ?survey_id=SEU_ID) e ajuste os parâmetros abaixo.

Básico
Estilo
Comportamento
Dica: se você ainda não tiver um survey_id, crie uma pesquisa no admin e copie o ID.
Preview
O widget é injetado nesta página ao aplicar as configurações. Se não aparecer, confira o survey_id.
Gerar snippet
Copie o código abaixo e cole no seu site. Ele já sai com todos os parâmetros atuais.

Instalação

Adicione o CSS e o script do widget e inclua a tag <vue-widget> na página. Para disparar uma pesquisa, informe o survey_id.

Parâmetros

Principais
  • survey_id ID da pesquisa.
  • widget_position left ou right.
  • width Largura do widget.
  • timeout Delay de exibição (ms) ou 0.
  • metadata Campos livres para enriquecer relatórios.

Pré-preencher dados

Você pode informar o objeto from com nome, e-mail e telefone.

{
  "name": "Charlie Parker",
  "email": "hello@binds.co",
  "phone": "+5511000000000"
}

Google Tag Manager (GTM)

Você pode instalar o widget via GTM usando uma tag de HTML personalizado. Isso é útil quando você quer ativar o widget apenas em páginas específicas (ex.: pós-compra) ou controlar o survey_id dinamicamente.

1) Criar variáveis (recomendado)

No GTM, crie as variáveis abaixo (tipo Variável da Camada de Dados):

  • bindsWidget.survey_id survey_id do widget
  • bindsWidget.from objeto com dados do contato (ou string JSON)
  • bindsWidget.metadata objeto/JSON com metadata
Dica
Se você não usa data layer, dá pra começar só com survey_id fixo na tag.
2) Tag “HTML personalizado”

Crie uma tag e cole o código abaixo. Depois, escolha um gatilho (ex.: “Todas as páginas” ou “Página de obrigado”).

<script>
(function () {
  // Evita carregar mais de uma vez
  if (window.__bindsWidgetV3Loaded) return;
  window.__bindsWidgetV3Loaded = true;

  function loadCssOnce(href) {
    var id = 'binds-widget-v3-css';
    if (document.getElementById(id)) return;
    var link = document.createElement('link');
    link.id = id;
    link.rel = 'stylesheet';
    link.href = href;
    document.head.appendChild(link);
  }

  function loadJsOnce(src, cb) {
    var id = 'binds-widget-v3-js';
    if (document.getElementById(id)) return cb && cb();
    var s = document.createElement('script');
    s.id = id;
    s.src = src;
    s.async = true;
    s.onload = function () { cb && cb(); };
    document.head.appendChild(s);
  }

  // 1) survey_id pode vir do data layer (variável do GTM)
  var surveyId = '{{DLV - bindsWidget.survey_id}}' || '';
  // fallback: opcional (fixo)
  // var surveyId = 'SEU_SURVEY_ID';
  if (!surveyId) return;

  // 2) from/metadata (podem ser objeto ou string JSON)
  function normalizeJson(v, fallback) {
    if (!v) return fallback;
    if (typeof v === 'object') return JSON.stringify(v);
    try { return JSON.stringify(JSON.parse(v)); } catch (e) { return fallback; }
  }

  var fromJson = normalizeJson({{DLV - bindsWidget.from}}, '{}');
  var metadataJson = normalizeJson({{DLV - bindsWidget.metadata}}, '{}');

  loadCssOnce('https://widget-v3.binds.co/css/app.css');
  loadJsOnce('https://widget-v3.binds.co/js/app.js', function () {
    var mountId = 'binds-widget-v3-mount';
    var mount = document.getElementById(mountId);
    if (!mount) {
      mount = document.createElement('div');
      mount.id = mountId;
      document.body.appendChild(mount);
    }

    // Remove instância anterior (se houver)
    mount.innerHTML = '';

    var w = document.createElement('vue-widget');
    w.setAttribute('survey_id', surveyId);
    w.setAttribute('widget_position', 'top-right');
    w.setAttribute('widget_title', 'feedback');
    w.setAttribute('width', '400');
    w.setAttribute('width_metric', 'px');
    w.setAttribute('timeout', '0');
    w.setAttribute('buttons', '#3e5c76');
    w.setAttribute('text_buttons', '#ffffff');
    w.setAttribute('background', '#1d2d44');
    w.setAttribute('texts', '#fff');
    w.setAttribute('close_button', 'true');
    w.setAttribute('close_permanently', 'false');
    w.setAttribute('response_background', '#f0ebd8');
    w.setAttribute('response_font_color', '#0a0a0a');
    w.setAttribute('font_family', 'Arial, Helvetica, sans-serif');
    w.setAttribute('font_size', 'large');
    w.setAttribute('text_props', "{'bold':'false','italic':'false','underline':'false'}");
    w.setAttribute('border_radius', '0');
    w.setAttribute('from', fromJson);
    w.setAttribute('metadata', metadataJson);
    w.setAttribute('is_to_post', 'true');
    mount.appendChild(w);
  });
})();
</script>
Observação: se a sua página é SPA (React/Vue/etc.), prefira disparar a tag em um Custom Event (abaixo em “Data Layer”).

Data Layer (para survey_id dinâmico)

O jeito mais flexível é publicar os dados do widget via dataLayer.push e deixar o GTM montar o widget. Assim você consegue definir survey_id, from e metadata em runtime.

Exemplo de dataLayer.push

Dispare isso quando você quiser inicializar o widget (ex.: ao carregar a página de “Obrigado”).

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  event: "binds_widget_init",
  bindsWidget: {
    survey_id: "SEU_SURVEY_ID",
    from: {
      name: "Cliente Exemplo",
      email: "cliente@exemplo.com",
      phone: "+5511999999999"
    },
    metadata: {
      orderId: "12345",
      store: "Loja Centro"
    }
  }
});
Gatilho e variáveis no GTM
  1. Crie um gatilho do tipo Evento personalizado com nome binds_widget_init.
  2. Crie as variáveis de data layer: bindsWidget.survey_id, bindsWidget.from, bindsWidget.metadata.
  3. Use o gatilho no “HTML personalizado” (seção GTM acima).
LGPD/Consentimento
Se você controla consentimento no GTM, dispare o evento apenas após o consentimento (ou configure Consent Mode conforme sua política).