Callouts (slide-in widgets)
A callout is a widget anchored to a corner or an edge of the screen, without a backdrop, so visitors can keep browsing while it's open. It's also known as a slide-in or toaster. Use callouts for nudges that shouldn't interrupt: newsletter prompts, product suggestions, survey questions and reminders.
Available on: all platforms.
How it works
When a trigger fires and the rules pass, the callout appears at its position with its animation and moves keyboard focus to its first form field, or to itself. The page behind stays fully usable. The visitor closes it with the close button, Esc, a Close widget action or a close trigger. With a teaser, it can minimize to a small tab or box instead.
Positions
Callouts have 8 positions: the four corners and the center of each edge.
Position | Where it appears |
|---|---|
Top left · Top center · Top right | Along the top edge |
Left center · Right center | Vertically centered on the left or right edge |
Bottom left · Bottom center · Bottom right | Along the bottom edge |
The Margin setting keeps the callout away from the screen edges (default 20 px).
Configuration
Option | What it does | Values / default |
|---|---|---|
Position | Where the callout is anchored | 8 positions (see above) |
Animation | How the callout opens and closes | None, Fade, Slide up, Slide down, Slide left, Slide right, Bounce vertical, Bounce horizontal, Zoom in, Zoom out |
Duration | Animation length | 0.1–2 s. Default 0.6 s, or 0.2 s for bounce animations |
Close on Esc | Closes the callout when the visitor presses Esc | On |
Width / Height | Callout size | Width 390 px, height auto. Units px, %, vw or auto |
Overflow | What happens when content is taller than the callout | Default auto (scrolls inside) |
Margin | Space between the callout and the screen edges | 0–100 px, default 20 px |
Background, border, radius, shadow | Callout surface | From your branding |
The close button's options are described in Widget display options.
Behavior details and limitations
- No backdrop. Visitors can scroll and click the page while the callout is open. Keyboard focus isn't locked inside it, unlike a popup.
- Callouts never overflow the screen. Width and height are capped at the screen size minus the margin on each side, so a 390 px callout fills the width of a phone, minus margins.
- Pick a slide direction that matches the position. A bottom-right callout looks natural with Slide up or Slide left; mismatched directions make it travel across the screen.
- Watch for other corner elements. Chat bubbles, cookie banners and back-to-top buttons often sit in the bottom corners. The callout appears above them when it opens, which can hide them. Choose another position or use a Widget interaction rule.
- On phones, the close button moves to 8 px from the corner. See Mobile behavior.
Examples
- Newsletter nudge: a bottom-left callout after 50% scroll on blog posts, with a teaser tab on close so readers can come back to it.
- Cross-sell on product pages: a bottom-right callout with a products element showing complementary items, triggered after 20 seconds on product pages.
- One-question survey: a right-center callout with a survey element, shown once per visitor with Frequency set to stop once converted.