Widget triggers
Control when and how your widgets appear to users with manual triggers, automatic conditions, and frequency settings
Widget triggers determine how users interact with your widget. You can use manual triggers like buttons and icons for user-initiated interactions, or automatic condition-based triggers that display your widget at the perfect moment based on user behavior.
Triggers only apply to popup and modal display modes. Inline widgets are always visible and don't need triggers.
Visual Configuration Interface
You don't need to write trigger code manually! When you create or edit a survey/form, click the Preview button to access our visual configuration interface. Configure triggers, conditions, and frequency using easy-to-use dropdowns and controls, and the code will be generated automatically for you.
Trigger styles
Choose how users will open your widget. Each trigger style serves different use cases and user experiences.
Button trigger (text)
Display a floating button with customizable text. Optionally include an icon alongside the text for better visual recognition.
Button configuration options
- • Button text: Custom text for the button (e.g., "Give Feedback", "Contact Us")
- • Show icon: Display an icon alongside the text (default: true)
- • Border radius: Control button roundness (e.g., "8px", "50%", "0")
- • Colors: Background and text/icon colors (inherited from icon style)
Example: Button trigger with icon
<div
class="askusers-survey-widget"
data-survey-id="your-survey-id"
data-display-mode="popup"
data-trigger-style="text"
data-button-text="Give Feedback"
data-button-show-icon="true"
data-button-border-radius="50px"
data-icon-type="feedback"
data-icon-bg-color="#3B82F6"
data-icon-color="#FFFFFF"
></div>Example: Text-only button (no icon)
<div
class="askusers-survey-widget"
data-survey-id="your-survey-id"
data-display-mode="popup"
data-trigger-style="text"
data-button-text="Contact Support"
data-button-show-icon="false"
data-button-border-radius="8px"
data-icon-bg-color="#10B981"
data-icon-color="#FFFFFF"
></div>Best for: Clear call-to-action scenarios where you want to be explicit about the purpose ("Give Feedback", "Get Help", "Contact Us"). More prominent than icon-only triggers.
Icon trigger
Display a compact floating icon button. Choose from 9 pre-defined icon types or use a custom icon/emoji.
Available icon types
chatformfeedbacksurveyemailphonemessagehelpsupportcustomExample: Icon trigger with feedback icon
<div
class="askusers-survey-widget"
data-survey-id="your-survey-id"
data-display-mode="popup"
data-trigger-style="icon"
data-icon-type="feedback"
data-icon-bg-color="#3B82F6"
data-icon-color="#FFFFFF"
data-icon-size="medium"
></div>Example: Custom icon (emoji)
<div
class="askusers-survey-widget"
data-survey-id="your-survey-id"
data-display-mode="popup"
data-trigger-style="icon"
data-icon-type="custom"
data-icon-custom="🚀"
data-icon-bg-color="#F97316"
data-icon-color="#FFFFFF"
data-icon-size="large"
></div>Best for: Unobtrusive persistent feedback options that don't take up much screen space. Common for website-wide feedback collection or support widgets.
Condition-based trigger (automatic)
Automatically display the widget when specific conditions are met, without requiring manual user interaction. Perfect for targeted surveys and feedback collection at key moments.
Example: Show on page load with 3-second delay
<div
class="askusers-survey-widget"
data-survey-id="your-survey-id"
data-display-mode="modal"
data-trigger-style="condition"
data-trigger-condition-type="pageLoad"
data-trigger-delay="3"
data-frequency-show="oncePerSession"
></div>Best for: Capturing feedback at specific moments (exit intent, scroll depth, time spent), welcome surveys, or any scenario where you want to proactively engage users without waiting for them to click a button.
Trigger conditions
When using condition-based triggers, you can choose from five different trigger types based on user behavior.
Page load
Trigger the widget when the page loads, with an optional delay.
Configuration
- • Type:
pageLoad - • Delay: Number of seconds to wait before showing (0 for immediate)
- • Options: 0 (immediate), 3, 5, 10, 30 seconds
Example: Immediate page load
<div
data-trigger-style="condition"
data-trigger-condition-type="pageLoad"
data-trigger-delay="0"
></div>Example: 5-second delay
<div
data-trigger-style="condition"
data-trigger-condition-type="pageLoad"
data-trigger-delay="5"
></div>Scroll depth
Trigger the widget when the user scrolls to a specific percentage of the page.
Configuration
- • Type:
scroll - • Scroll depth: Percentage of page scrolled (0-100)
- • Options: 25%, 50%, 75%, 100%
Example: Show at 75% scroll
<div
data-trigger-style="condition"
data-trigger-condition-type="scroll"
data-trigger-scroll-depth="75"
></div>Tip: Use 50-75% scroll depth for blog posts or long-form content to capture feedback from engaged readers who have consumed most of your content.
Exit intent
Trigger the widget when the user's mouse moves toward the browser's address bar or window edge, indicating they might be about to leave the page.
Configuration
- • Type:
exitIntent - • No additional parameters needed
Example: Exit intent trigger
<div
data-trigger-style="condition"
data-trigger-condition-type="exitIntent"
data-frequency-show="onceEver"
></div>Tip: Perfect for exit surveys asking why users are leaving, or for last-chance conversion opportunities. Combine with "once ever" frequency to avoid annoying repeat visitors.
Time on page
Trigger the widget after the user has spent a specific amount of time on the page.
Configuration
- • Type:
timeOnPage - • Duration: Time spent on page in seconds
- • Options: 10, 30, 60, 120, 300 seconds
Example: Show after 30 seconds
<div
data-trigger-style="condition"
data-trigger-condition-type="timeOnPage"
data-trigger-duration="30"
></div>Tip: Use longer durations (60+ seconds) to capture feedback from engaged users who are actually interacting with your content, not just bouncing.
Page views
Trigger the widget on a specific visit number (e.g., show on the user's 3rd visit to your site).
Configuration
- • Type:
pageViews - • Visit count: Show on Nth page view
- • Options: 1st, 2nd, 3rd, 5th visit
Example: Show on 3rd visit
<div
data-trigger-style="condition"
data-trigger-condition-type="pageViews"
data-trigger-visit-count="3"
></div>Tip: Target return visitors (3rd or 5th visit) for loyalty surveys or feedback from users who are already familiar with your product.
Frequency control
Control how often users see your widget to avoid survey fatigue and improve response quality. Frequency control works with all trigger styles but is especially important for condition-based triggers.
Show frequency
Control when the widget appears to users
- • Always: Show every time conditions are met
- • Once per session: Show only once per browser session
- • Once ever: Show only once, never again
data-frequency-show="oncePerSession"Cooldown period
Don't show widget again for X days after dismissal
- • None (0 days): No cooldown
- • 1 day: Wait 1 day before showing again
- • 7 days: Wait 1 week
- • 30 days: Wait 1 month
data-frequency-cooldown="7"Example: Frequency control configurations
<!-- Show once per session (common for exit surveys) -->
<div
data-frequency-show="oncePerSession"
data-frequency-cooldown="0"
></div>
<!-- Show once ever (important one-time surveys) -->
<div
data-frequency-show="onceEver"
data-frequency-cooldown="0"
></div>
<!-- Show always, but with 7-day cooldown after dismissal -->
<div
data-frequency-show="always"
data-frequency-cooldown="7"
></div>
<!-- Conservative approach: once per session + 30-day cooldown -->
<div
data-frequency-show="oncePerSession"
data-frequency-cooldown="30"
></div>Important: Frequency settings are tracked using browser local storage. If a user clears their browser data or uses a different browser/device, the frequency limits will reset.
Best practices
Match trigger to context
Use manual triggers (button/icon) for persistent feedback options, and condition-based triggers for targeted surveys at specific moments. Don't use aggressive auto-triggers for general feedback.
Respect user attention
Always use frequency controls for condition-based triggers. "Once per session" or "once ever" with a cooldown period prevents survey fatigue and improves response quality.
Timing is everything
For page load triggers, use a 3-5 second delay to let users orient themselves. For time-based triggers, 30-60 seconds ensures users are actually engaged with your content.
Test your triggers
Always test your trigger conditions in a real environment. Check if they fire at the right moment and don't interfere with critical user actions like checkout or form submission.
Provide clear value
When using button triggers, use clear, benefit-focused text like "Help us improve" or "Share your feedback" rather than generic "Feedback" labels. Users should understand what they'll get from engaging.