Embedding surveys
Learn how to embed surveys on your website using widgets with customizable display modes
What is embedding?
Embedding allows you to integrate your surveys directly into your website without requiring users to visit a separate page. The Ask Users widget is a lightweight JavaScript snippet that displays your survey in various modes based on your preferences.
Surveys can be embedded as inline elements within your page content, triggered as popups when users click buttons, or displayed as modal overlays. This provides flexibility to match your website's user experience and design requirements.
Note: The widget script is optimized for persurveyance, loads asynchronously, and won't impact your website's loading speed.
Display modes
The Ask Users widget supports three display modes, each suited for different use cases:
Inline mode
The survey is embedded directly into your page content, appearing as part of your website's layout. This mode is ideal for dedicated survey pages or when you want the survey to be immediately visible.
Use cases:
- • Contact pages with embedded contact surveys
- • Landing pages with lead capture surveys
- • Feedback sections at the bottom of blog posts
- • Application or registration pages
Popup mode
The survey appears in a small popup window when a user clicks a button or link. The popup slides in from the corner of the screen and can be minimized or closed. This is non-intrusive and keeps users on your current page.
Use cases:
- • "Contact us" buttons in navigation menus
- • Feedback buttons on any page
- • Newsletter signup prompts
- • Quick surveys or polls
Modal mode
The survey appears as a centered overlay that covers the entire screen with a backdrop. This mode focuses the user's attention entirely on the survey and is best for important surveys that require immediate action.
Use cases:
- • Important announcements with signup surveys
- • Exit-intent popups
- • Time-sensitive offers or registrations
- • Multi-step surveys that need full attention
Installation steps
Follow these steps to embed your survey on your website:
- 1
Get the embed code
Navigate to your survey in the dashboard, click the "Embed" button, and copy the provided code snippet.
<script src="https://widget.askusers.org/widget.js" async></script> <div data-askusers-survey="survey-id-here"></div> - 2
Add script to your website
Paste the widget script in your HTML, preferably just before the closing
</body>tag. The script only needs to be added once per page, even if you have multiple surveys. - 3
Add the survey container
Place the survey container
<div>wherever you want the survey to appear on your page. Configure the display mode using data attributes. - 4
Test your survey
Visit your website to ensure the survey loads correctly and test the submission process.
Important: Survey must be active
Make sure your survey is activated in the dashboard before embedding. Inactive surveys will not display or accept submissions.
Configuration options
Customize the widget behavior using these data attributes:
data-askusers-survey
RequiredYour survey's unique identifier. Get this from the embed code in your dashboard.
data-askusers-survey="your-survey-id"data-mode
OptionalDisplay mode for the survey. Options: inline (default), popup, modal
data-mode="popup"data-trigger
OptionalCSS selector for elements that should trigger the survey in popup or modal mode. Users click these elements to open the survey.
data-trigger=".contact-button"data-position
OptionalPosition of the popup window. Options: bottom-right (default), bottom-left, top-right, top-left
data-position="bottom-left"data-auto-height
OptionalAutomatically adjust survey height based on content. Options: true, false (default)
data-auto-height="true"Examples
Inline survey
Display a survey directly in your page content:
<div data-askusers-survey="contact-survey-123"></div>Popup triggered by button
Show a popup survey when users click a button:
<button class="contact-btn">Contact us</button>
<div
data-askusers-survey="contact-survey-123"
data-mode="popup"
data-trigger=".contact-btn"
data-position="bottom-right">
</div>Modal with multiple triggers
Show a modal survey triggered by any element with a specific class:
<button class="signup-trigger">Sign up</button>
<a href="#" class="signup-trigger">Join waitlist</a>
<div
data-askusers-survey="waitlist-survey-456"
data-mode="modal"
data-trigger=".signup-trigger">
</div>Auto-height inline survey
Display an inline survey that adjusts height automatically:
<div
data-askusers-survey="feedback-survey-789"
data-auto-height="true">
</div>Best practices
- Choose the right mode: Use inline for dedicated survey pages, popup for non-intrusive surveys, and modal for important actions requiring focus.
- Test on mobile devices: Ensure the widget displays correctly on mobile devices and tablets, not just desktops.
- Use clear trigger elements: Make buttons or links that trigger surveys visually prominent and clearly labeled.
- Position popups thoughtfully: Place popups in corners that don't obstruct important content or navigation.
- Don't overuse modals: Modal surveys interrupt user experience. Use sparingly and only for important actions.
- Match your brand: Customize survey appearance in the dashboard to match your website's design and branding.
- Load script once: Add the widget script only once per page, even if embedding multiple surveys.
- Test submissions: Always test the complete submission flow after embedding to ensure data is being captured correctly.