Using Triggers
Show overlays and switch component variants based on visitor behavior, conditions, and interactions.
Triggers let your published site react to visitor behavior in real-time. You can use them to show overlays or switch component variants based on a combination of interactions (what the visitor does) and conditions (who the visitor is or what context they’re in). Triggers are part of the Convert add-on.
Overview
A trigger is made up of three parts:
Action: what happens when the trigger fires (show an overlay or set a component variant).
Conditions: rules about who or when the trigger should apply (e.g., specific URL parameters, cookies, schedule, visited pages, or past activity).
Interactions: rules about what the visitor does to fire the trigger (e.g., waiting on the page, scrolling, or attempting to leave).
A trigger fires when all of its conditions are met and its interaction rules evaluate to true.
Where to find Triggers
Triggers appear in the properties panel for two types of elements:
Fixed overlays: Under the “Show On” section when an overlay is selected. Overlays already support event-based triggers (like Click or Hover on a parent component), and Triggers add condition/interaction-based options on top of that.
Components (Smart Components): Under the “Show On” section, triggers can switch a component to a specific variant.
To add a trigger, click the + button next to “Show On” and select Trigger.
Actions
When a trigger fires, it performs one of two actions.
Action | Description |
|---|---|
Show Overlay | Opens a fixed overlay. This is the default action when adding a trigger to an overlay. Use this to display modals, banners, toasts, notification bars, video players, or any other overlay. |
Set Component Variant | Switches a component to a specific variant. When this action type is selected, a Set Variant dropdown appears at the top of the trigger popout, letting you pick which variant the component should switch to. Use this to dynamically change hero sections, CTAs, navigation bars, or any component with variants. |
Conditions
Conditions are rules checked before a trigger can fire. All conditions must pass. Add them via the + button next to “Conditions” in the trigger popout.
Condition | Description |
|---|---|
Repeat | Limits how often a trigger fires per visitor. Set a cooldown in days (1 to 365, default 30). The visitor’s browser stores whether the trigger was already shown within that window. |
Cookie | Checks browser cookies. Each rule specifies a cookie key and a check type: Set (exists), Not Set (doesn’t exist), or Equals (matches a specific value). Multiple rules can be combined with All (AND) or Any (OR) matching. |
Parameter | Checks URL query parameters ( |
Visited Pages | Requires the visitor to have viewed a minimum number of pages during their session before the trigger can fire. |
Start At / End At | Restricts the trigger to a date and time window. Add a start date, end date, or both. You can choose a fixed timezone or use the visitor’s local timezone. |
Form Submit | Checks whether a visitor has submitted a specific form (identified by its tracking ID). Can require that the form was or was not submitted. |
Link Click | Checks whether a visitor has clicked a specific tracked link. Can require that the link was or was not clicked. |
Include / Exclude Page | Layout templates only. Restricts which pages the trigger applies to. Each rule matches either Exact (one specific page) or Wildcard (a page and all its subpages). |
Interactions
Interactions define what the visitor must do for the trigger to fire. They are evaluated only after all conditions pass. If no interactions are added, the trigger fires immediately on page load.
Interaction | Description |
|---|---|
Time | Fires after the visitor has been present for a set number of seconds. Scope to Site (time since first arriving on any page) or Page (resets on each navigation). You can add one of each. |
Scroll | Fires when the visitor scrolls past a percentage of the page (0% to 100%). One per trigger. |
Exit | Fires on exit intent. Three modes: Mouse Out (cursor leaves the browser window, desktop only), Page Hide (page becomes hidden, e.g. tab switch or minimize, works on mobile), or Both. One per trigger. |
When combining multiple interactions, each has an operator: And (both must be true) or Or (either suffices). For example, Time (30s, Site) AND Scroll (50%) fires when both conditions are met.
Tracking
Each trigger has a Tracking field. This is an optional identifier string that is sent as an analytics event when the trigger fires. Use this to track how often each trigger is invoked in your analytics or funnels.
Use case: Set the tracking ID to promo-banner-shown and then create a funnel in Framer Convert to measure how many visitors who saw the banner went on to sign up.
How Triggers are evaluated at runtime
When a published page loads, the trigger system:
Checks all conditions (cookies, URL parameters, page count, schedule, event history, route rules). If any condition fails, the trigger stays inactive.
Registers interaction listeners for any interactions that aren’t immediately satisfied (sets timers for Time delays, listens for scroll events, listens for exit events).
Fires the action as soon as all conditions pass and the interaction rules evaluate to true. A trigger fires at most once per page load.
Records the invocation in local storage (for Repeat condition tracking) and sends the tracking event (if a tracking ID is set).
Example: Product Hunt Welcome Banner
Suppose you want to show a special banner to visitors arriving from Product Hunt:
Create a component with two variants: a default state and a “Product Hunt” state.
Add a trigger and set the action to Set Variant → Product Hunt.
Add a Parameter condition: Key =
ref, Type = Equals, Value =ph.Optionally add a Repeat condition set to 7 days so the variant only switches once per week.
Set the Tracking ID to
product-hunt-banner.No interactions needed. the trigger will fire immediately when the conditions are met on page load.
FAQ
What are the different types of trigger conditions available?
Triggers support several condition types: Repeat (controls how often a trigger fires for the same visitor), Cookie (checks browser cookie presence or value), Parameter (checks URL query parameters), Visited Pages (requires a minimum number of pages viewed), Start At / End At (restricts the trigger to a date and time window), Form Submit (checks if a form was submitted), Link Click (checks if a link was clicked), and Include Page / Exclude Page (restricts which pages the trigger applies to, available in layout templates). All conditions must pass for the trigger to fire.
What interactions can I use to control when a trigger fires?
There are three interaction types: Time (fires after a set number of seconds, scoped to either the entire site visit or the current page), Scroll (fires when the visitor scrolls past a percentage of the page), and Exit (fires when the visitor shows intent to leave; via mouse leaving the window, switching tabs, or both). You can combine multiple interactions with And or Or operators.
What is the difference between the Exit interaction’s Mouse Out and Page Hide modes?
Mouse Out triggers when the visitor’s mouse cursor leaves the browser window, which is the classic “exit intent” detection used on desktop. Page Hide triggers when the page becomes hidden; for example, when the visitor switches to another browser tab, minimizes the window, or navigates away. Page Hide works on both desktop and mobile devices. You can also select Both to trigger on whichever event happens first.
Updated