Widget configuration
Configure how your widget appears and behaves on your website with display modes, positioning, sizing, and behavioral options
Widget configuration gives you complete control over how your forms and surveys are displayed to users. From choosing between inline, popup, or modal modes to configuring animations and behaviors, you can create the perfect user experience for your specific use case.
All configuration options are set through data attributes on the widget container element, making integration simple and flexible.
Visual Configuration Interface
You don't need to write configuration code manually! When you create or edit a survey/form, click the Preview button to access our visual configuration interface. Simply adjust settings using intuitive controls, and the code will be generated automatically for you.
Display modes
The display mode determines how your widget appears on the page. Choose from three different modes based on your use case.
Inline mode
Inline mode embeds the widget directly into your page content. The widget is always visible and flows with your page layout, perfect for dedicated feedback pages or embedded forms.
Example: Inline widget
<div
class="askusers-survey-widget"
data-survey-id="your-survey-id"
data-display-mode="inline"
data-width="600px"
data-max-width="100%"
></div>Best for: Dedicated survey pages, embedded forms in blog posts, contact forms on your contact page, or any scenario where the form is the primary focus of the page.
Popup mode
Popup mode displays a floating trigger button that users can click to open the widget. The widget appears in a popup overlay at your specified screen position (9 positions available).
Example: Popup widget with icon trigger
<div
class="askusers-survey-widget"
data-survey-id="your-survey-id"
data-display-mode="popup"
data-trigger-style="icon"
data-position="bottom-right"
data-icon-type="feedback"
data-icon-bg-color="#3B82F6"
data-icon-color="#FFFFFF"
data-icon-size="medium"
data-animation="slide"
data-backdrop="true"
data-close-on-submit="true"
data-close-on-backdrop="true"
></div>Best for: Website-wide feedback collection, support requests, quick surveys that shouldn't interrupt the user's current task, or persistent feedback options.
Modal mode
Modal mode displays as a centered overlay that can be triggered by a button or automatically based on conditions. Unlike popup mode, modals are always centered on the screen and typically have a backdrop overlay.
Example: Modal widget with auto-trigger
<div
class="askusers-survey-widget"
data-survey-id="your-survey-id"
data-display-mode="modal"
data-trigger-style="condition"
data-trigger-condition-type="scroll"
data-trigger-scroll-depth="75"
data-animation="fade"
data-backdrop="true"
data-close-on-backdrop="false"
data-frequency-show="oncePerSession"
></div>Best for: Exit intent surveys, time-based feedback requests, scroll-triggered engagement surveys, or important announcements that require user attention.
Position settings
Position settings only apply to popup mode. You can choose from 9 screen positions for your floating trigger and popup widget.
Top positions
- •
top-left - •
top-center - •
top-right
Middle positions
- •
center-left - •
center-right
Bottom positions
- •
bottom-left - •
bottom-center - •
bottom-right(default)
Example: Different positions
<!-- Bottom right (most common) -->
<div data-position="bottom-right"></div>
<!-- Top right (common for help widgets) -->
<div data-position="top-right"></div>
<!-- Center right (prominent placement) -->
<div data-position="center-right"></div>Note: The position attribute is ignored in modal mode since modals are always centered on the screen. It only applies to popup mode.
Size configuration
Control the dimensions of your widget with width, max-width, and max-height attributes. These work across all display modes.
Width
Set the preferred width of the widget
data-width="400px"Default: 400px
Max width
Limit maximum width, useful for responsiveness
data-max-width="90%"Default: 90%
Max height
Prevent widget from being too tall
data-max-height="80vh"Default: 80vh
Example: Size configurations
<!-- Small widget (300px wide) -->
<div
data-width="300px"
data-max-width="95%"
data-max-height="600px"
></div>
<!-- Medium widget (default) -->
<div
data-width="400px"
data-max-width="90%"
data-max-height="80vh"
></div>
<!-- Large widget (600px wide) -->
<div
data-width="600px"
data-max-width="85%"
data-max-height="90vh"
></div>
<!-- Percentage-based width -->
<div
data-width="50%"
data-max-width="600px"
data-max-height="700px"
></div>Tip: Use viewport units (vh, vw) for responsive sizing, or combine fixed pixel widths with percentage max-widths for the best mobile experience.
Animation options
Add smooth animations when your widget appears and disappears. Animations only apply to popup and modal modes.
Slide
Slides in from the position edge (default)
data-animation="slide"Fade
Fades in with opacity transition
data-animation="fade"Scale
Grows from small to full size
data-animation="scale"None
Appears instantly without animation
data-animation="none"Example: Different animations
<!-- Slide animation (smooth and professional) -->
<div data-animation="slide"></div>
<!-- Fade animation (subtle and elegant) -->
<div data-animation="fade"></div>
<!-- Scale animation (attention-grabbing) -->
<div data-animation="scale"></div>
<!-- No animation (instant display) -->
<div data-animation="none"></div>Behavior settings
Control how users interact with your widget using these behavioral options. These settings apply to popup and modal modes.
Backdrop overlay
Show a semi-transparent overlay behind the widget to focus user attention and dim the page content.
data-backdrop="true"Default: true
Close on submit
Automatically close the widget after the user successfully submits their response.
data-close-on-submit="true"Default: true
Close on backdrop click
Allow users to close the widget by clicking outside of it (on the backdrop overlay).
data-close-on-backdrop="true"Default: true
Example: Behavior settings
<!-- Standard behavior (all enabled) -->
<div
data-backdrop="true"
data-close-on-submit="true"
data-close-on-backdrop="true"
></div>
<!-- Important survey (prevent easy dismissal) -->
<div
data-backdrop="true"
data-close-on-submit="true"
data-close-on-backdrop="false"
></div>
<!-- Multi-response survey (keep open after submit) -->
<div
data-backdrop="true"
data-close-on-submit="false"
data-close-on-backdrop="true"
></div>Display options
Fine-tune what content appears in your widget with these display control options.
Hide title
Hide the form or survey title to save space or if the title is already visible on your page.
data-hide-title="true"Hide description
Hide the form or survey description for a more compact appearance.
data-hide-description="true"Auto-submit
Automatically submit the form after the last question is answered. This hides the submit button and creates a seamless, conversational experience.
data-auto-submit="true"Use form layout
Apply the form's configured layout settings (e.g., split layout with media panel).
data-use-form-layout="true"Use form appearance
Apply the form's configured appearance settings (fonts, colors, button styles, etc.).
data-use-form-appearance="true"Example: Display options
<!-- Minimal widget (hide title and description) -->
<div
data-hide-title="true"
data-hide-description="true"
></div>
<!-- Quick feedback widget (auto-submit) -->
<div
data-auto-submit="true"
data-hide-description="true"
></div>
<!-- Branded widget (use custom appearance) -->
<div
data-use-form-layout="true"
data-use-form-appearance="true"
></div>Context tracking
Add custom context information to track where responses are coming from. This is useful for segmenting responses by page, product, campaign, or any other contextual dimension.
Context type
Category or type of context (e.g., "product-page", "blog-post", "checkout")
data-context-type="product-page"Context ID
Specific identifier for this context (e.g., product ID, page slug, campaign name)
data-context-id="product-123"Example: Context tracking
<!-- Product page feedback -->
<div
data-context-type="product"
data-context-id="running-shoes-123"
></div>
<!-- Blog post survey -->
<div
data-context-type="blog-post"
data-context-id="introducing-new-features"
></div>
<!-- Campaign tracking -->
<div
data-context-type="campaign"
data-context-id="summer-sale-2024"
></div>
<!-- Page-specific feedback -->
<div
data-context-type="page"
data-context-id="pricing"
></div>Tip: Use context tracking to segment your responses in analytics and identify which pages, products, or campaigns generate the most feedback or have specific issues.