Ask Users - Online Forms and Surveys Builder

Ask users

BETA

Pesquisas Formulários Blog Documentação Integrações Planos e preços

Entrar ComeçarIniciar

Guia de integração de widgets

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

Documentação de widgets

Configuração de widgets

Aprenda sobre modos de exibição, posicionamento, dimensionamento, animações e configurações de comportamento

Saiba mais

Regras de exibição

Controle quando e para quem os widgets são mostrados usando regras de segmentação e gatilhos comportamentais

Saiba mais

Gatilhos de widgets

Configure gatilhos baseados em botão, ícone e condição com controle de frequência

Saiba mais

Estilos de widgets

Personalize ícones, botões, cores e crie belos designs de widgets

Saiba mais

Security and CSP

Configure Content Security Policy headers for widget integration

Saiba mais

Web Components

Use Shadow DOM para isolamento CSS completo ao incorporar em sites de terceiros

Saiba mais

docs.widgets.cards.reactLibrary.title

docs.widgets.cards.reactLibrary.description

Saiba mais

1

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.

Web Components (Shadow DOM)

Para isolamento CSS completo ao incorporar widgets em sites de terceiros, use nossos elementos personalizados Web Component. Eles usam Shadow DOM para evitar que os estilos do site host afetem a aparência do widget.

Quando usar Web Components

Use Web Components quando:

Incorporando em sites de terceiros onde você não controla o CSS
O site host tem estilos globais que conflitam com o widget
Você precisa de consistência visual garantida em diferentes sites

Use incorporação padrão com div quando:

Incorporando em seu próprio site onde você controla os estilos
Você quer que o widget herde alguns estilos do site host
Você prefere a sintaxe de atributos data-*

Uso de Web Components

Web Components usam atributos HTML limpos em vez de atributos data-*:

Widget de formulário

<askusers-form
  form-id="YOUR_FORM_ID"
  display-mode="inline"
  prefill-email="user@example.com"
  prefill-name="John Doe"
></askusers-form>

Widget de pesquisa

<askusers-survey
  survey-id="YOUR_SURVEY_ID"
  display-mode="popup"
  trigger-style="icon"
  position="bottom-right"
></askusers-survey>

Mapeamento de atributos

Atributo Web Component	Atributo data-* equivalente
`form-id`	`data-form-id`
`survey-id`	`data-survey-id`
`display-mode`	`data-display-mode`
`prefill-email`	`data-prefill-email`
`trigger-style`	`data-trigger-style`

Suporte a TypeScript

Se você está usando TypeScript com React/JSX e obtendo erros de tipo como:

Property 'askusers-form' does not exist on type 'JSX.IntrinsicElements'

Baixe nosso arquivo de declarações de tipo e adicione ao seu projeto:

// Download from: https://askusers.org/widget/askusers-widget.d.ts
// Then add to your project:
/// <reference path="path/to/askusers-widget.d.ts" />

As declarações de tipo incluem todos os atributos suportados para os elementos personalizados askusers-form e askusers-survey.

Habilitando Web Components na visualização

Vá para a página de visualização do formulário/pesquisa
Role até Configuração de exibição do widget
Encontre a seção Opções de incorporação
Marque Usar Web Component para isolamento CSS
O código de incorporação gerado usará a sintaxe Web Component

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