Ask Users - Online Forms and Surveys Builder

<!-- 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>

Note: Only include the scripts for the widget types you plan to use.

Add widget HTML

Place the widget HTML wherever you want the widget to appear on your page.

Online 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 (waitlist, contact, feedback)

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

Create your form in the dashboard and use templates like "Waitlist / Email Signup", "Quick Feedback (Thumbs)", "Contact Form", or "Feature Request". Replace YOUR_FORM_ID with your form's ID.

Test your integration

Once you've added the scripts and HTML, test your widgets to make sure they're working correctly:

Check that widgets load and display properly
Test form submissions (they'll appear in your dashboard)
Verify styling matches your site design
Test on different devices and screen sizes

Advanced configuration

Custom styling

Customize widget appearance using CSS custom properties. Add them to your widget element's style attribute.

Example: Custom brand colors

<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>

Multiple widgets on one page

You can use multiple widgets on the same page by giving each a unique context-id.

<!-- 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>

Framework integration

For single-page applications (React, Vue, Angular, etc.), you need to manually initialize widgets when components mount or routes change, since auto-initialization only happens on page load.

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"
/>

Important: Call the appropriate init method each time you render a widget component. The widgets handle multiple initializations gracefully and will only initialize new widgets that haven't been processed yet.

Web Components (Shadow DOM)

For complete CSS isolation when embedding widgets on 3rd party sites, use our Web Component custom elements. These use Shadow DOM to prevent host site styles from affecting the widget appearance.

When to use Web Components

Use Web Components when:

Embedding on 3rd party sites where you don't control the CSS
The host site has global styles that conflict with the widget
You need guaranteed visual consistency across different sites

Use standard div embed when:

Embedding on your own site where you control styles
You want the widget to inherit some host site styles
You prefer the data-* attribute syntax

Web Component usage

Web Components use clean HTML attributes instead of data-* attributes:

Form widget

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

Survey widget

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

Attribute mapping

Web Component attribute	Equivalent data-* attribute
`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`

TypeScript support

If you're using TypeScript with React/JSX and getting type errors like:

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

Download our type declarations file and add it to your project:

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

The type declarations include all supported attributes for both askusers-form and askusers-survey custom elements.

Enabling Web Components in the preview

Go to the form/survey preview page
Scroll to Widget display configuration
Find the Embed options section
Check Use Web Component for CSS isolation
The generated embed code will use the Web Component syntax

Need help?

If you run into any issues during setup, we're here to help. Check out our documentation or get in touch with support.

View examples Contact support