Guia de integração de widgets

Instruções completas para integrar pesquisas online e widgets de feedback no seu site.

Widget documentation

Widget configuration

Learn about display modes, positioning, sizing, animations, and behavior settings

Learn more

Display rules

Control when and to whom widgets are shown using targeting rules and behavioral triggers

Learn more

Widget triggers

Configure button, icon, and condition-based triggers with frequency control

Learn more

Widget styling

Customize icons, buttons, colors, and create beautiful widget designs

Learn more

Crie sua conta

Cadastre-se no Ask Users e escolha o plano que atende suas necessidades. Você receberá uma chave de API que usará para autenticar seus widgets.

Cadastre-se agora

Adicione os scripts ao seu site

Adicione estas tags de script à seção <head> do seu HTML. Substitua YOUR_API_KEY pela sua chave de API real do painel.

<!-- Add these to your <head> section -->
<script src="https://askusers.org/widget/widget-common.js"></script>

<!-- For survey widgets -->
<script src="https://askusers.org/widget/survey-widget.js?api-key=YOUR_API_KEY"></script>

<!-- For form widgets (waitlist, feedback, contact forms, feature requests, etc.) -->
<script src="https://askusers.org/widget/form-widget.js?api-key=YOUR_API_KEY"></script>

Nota: Inclua apenas os scripts para os tipos de widget que você planeja usar.

Adicione o HTML do widget

Coloque o HTML do widget onde você quiser que o widget apareça na sua página.

Widget de pesquisa online

<div class="askusers-survey-widget"
     data-survey-id="YOUR_SURVEY_ID"
     data-context-id="product-feedback"
     data-context-type="survey">
</div>

Widget de formulário (lista de espera, contato, feedback)

<div class="askusers-form-widget"
     data-form-id="YOUR_FORM_ID"
     data-context-id="product-launch"
     data-context-type="product">
</div>

Crie seu formulário no painel e use modelos como "Lista de Espera / Cadastro de Email", "Feedback Rápido (Curtidas)", "Formulário de Contato" ou "Solicitação de Recursos". Substitua YOUR_FORM_ID pelo ID do seu formulário.

Teste sua integração

Depois de adicionar os scripts e o HTML, teste seus widgets para garantir que estejam funcionando corretamente:

Verifique se os widgets carregam e são exibidos corretamente
Teste os envios de formulário (eles aparecerão no seu painel)
Verifique se a estilização corresponde ao design do seu site
Teste em diferentes dispositivos e tamanhos de tela

Configuração avançada

Estilização personalizada

Personalize a aparência do widget usando propriedades CSS customizadas. Adicione-as ao atributo style do elemento do widget.

Exemplo: Cores personalizadas da marca

<div class="askusers-form-widget"
     data-form-id="YOUR_FORM_ID"
     data-context-id="my-product"
     data-context-type="launch"
     style="
       --askusers-color-primary: #8b5cf6;
       --askusers-color-background: #ffffff;
       --askusers-color-text: #1f2937;
       --askusers-color-success: #10b981;
     ">
</div>

Múltiplos widgets em uma página

Você pode usar múltiplos widgets na mesma página atribuindo a cada um um context-id único.

<!-- Survey widget -->
<div class="askusers-survey-widget"
     data-survey-id="YOUR_SURVEY_ID"
     data-context-id="product-feedback"
     data-context-type="survey">
</div>

<!-- Form widget for feedback -->
<div class="askusers-form-widget"
     data-form-id="YOUR_FEEDBACK_FORM_ID"
     data-context-id="article-123"
     data-context-type="article">
</div>

<!-- Form widget for feature requests -->
<div class="askusers-form-widget"
     data-form-id="YOUR_FEATURE_REQUEST_FORM_ID"
     data-context-id="product-roadmap"
     data-context-type="roadmap">
</div>

Integração com frameworks

Para aplicações de página única (React, Vue, Angular, etc.), você precisa inicializar manualmente os widgets quando os componentes montam ou as rotas mudam, já que a inicialização automática só acontece no carregamento da página.

React

function MyComponent() {
  useEffect(() => {
    // Manual initialization required for SPAs
    if (window.AskUsersWidget) {
      // Initialize survey widgets
      window.AskUsersWidget.initializeSurveyWidgets?.();
      // Initialize form widgets (handles all form types)
      window.AskUsersWidget.initializeFormWidgets?.();
    }
  }, []);

  return (
    <div
      className="askusers-form-widget"
      data-form-id="YOUR_FORM_ID"
      data-context-id="my-component"
      data-context-type="feedback"
    />
  );
}

Vue.js

<template>
  <div
    class="askusers-form-widget"
    data-form-id="YOUR_FORM_ID"
    data-context-id="my-component"
    data-context-type="feedback"
  />
</template>

<script>
export default {
  mounted() {
    // Manual initialization required for SPAs
    if (window.AskUsersWidget) {
      window.AskUsersWidget.initializeSurveyWidgets?.();
      window.AskUsersWidget.initializeFormWidgets?.();
    }
  }
}
</script>

Angular

@Component({
  selector: 'app-my-component',
  template: `
    <div
      class="askusers-form-widget"
      data-form-id="YOUR_FORM_ID"
      data-context-id="my-component"
      data-context-type="feedback">
    </div>
  `
})
export class MyComponent implements OnInit {
  ngOnInit() {
    // Manual initialization required for SPAs
    if ((window as any).AskUsersWidget) {
      (window as any).AskUsersWidget.initializeSurveyWidgets?.();
      (window as any).AskUsersWidget.initializeFormWidgets?.();
    }
  }
}

Svelte

<script>
  import { onMount } from 'svelte';

  onMount(() => {
    // Manual initialization required for SPAs
    if (window.AskUsersWidget) {
      window.AskUsersWidget.initializeSurveyWidgets?.();
      window.AskUsersWidget.initializeFormWidgets?.();
    }
  });
</script>

<div
  class="askusers-form-widget"
  data-form-id="YOUR_FORM_ID"
  data-context-id="my-component"
  data-context-type="feedback"
/>

Importante: Chame o método init apropriado cada vez que renderizar um componente de widget. Os widgets lidam com múltiplas inicializações de forma elegante e só inicializarão novos widgets que ainda não foram processados.

Precisa de ajuda?

Se você encontrar problemas durante a configuração, estamos aqui para ajudar. Confira nossa documentação ou entre em contato com o suporte.

Ver exemplos Contatar suporte