In-app modal & slideout tool
When something deserves the spotlight, use a centered modal. When it shouldn't interrupt, slide a card in from the corner. Lay either one out in one, two, or three columns.
Faster, clearer, and exportable.
Take a lookModal or slideout
Command full attention, or nudge gently from the corner.
Flexible layouts
One, two, or three columns for text, media, and actions.
Built for launches
Perfect for welcomes, feature announcements, and promos.
Live in three steps.
Pick a layout
Start from a template or build from scratch.
Add your content
Copy, image, columns, and buttons.
Publish
Show it where and when it matters.
A welcome modal and a follow-up slideout, correctly cast.
The same message at two intensities: a modal for the first session, a slideout for the reminder. Casting each surface right is most of the craft.
The modal, once
A centered modal greets first-session users: your promise in one sentence, a product screenshot, and two buttons — "Show me around" (starts the tour) and "I'll explore" (dismiss). Backdrop dimmed to focus.
Lay it out properly
Use a two-column layout: copy left, image right. Three-column works for a "choose your path" welcome — each column a persona with its own button.
The slideout, later
For users who dismissed and have not created anything by day three, a corner slideout: "Your workspace is still empty — two minutes to your first project?" No backdrop, no interruption.
Split the audiences
Modal: logged-in users, first session, once. Slideout: a segment where projects_count equals 0, trigger on page load, once. Two surfaces, two moments, one goal.
What to expect: Completion and dismissal rates per surface tell you if the casting worked — modals should convert strongly on step one, and a polite slideout typically out-converts a nagging second modal.
When not to use modals & slideouts.
No pattern fits every job. Here’s where we’d point you at something else — sometimes ours, sometimes not.
While the user is mid-task
A modal interrupts by definition. Never fire one on a screen where users are entering data or finishing a checkout — use a slideout there, or wait for a quieter trigger.
Recurring announcements
If you ship weekly, weekly modals will train users to close them unread. Move routine news to a banner or the release-notes pattern, and save modals for the launches that deserve a full stop.
Tiny confirmations
"Saved" does not need a dialog. Toasts and inline feedback belong to your product; Wakeline surfaces are for guidance and announcements, not transactional noise.
When do I pick a slideout over a modal?
Ask whether the user must decide something before continuing. Yes — modal, with a dimmed backdrop. No — slideout, pinned to a corner, letting people keep working. Most messages honestly answer no.
What layouts are possible?
One, two, or three columns per step — text plus an image side by side, or a multi-column chooser with a button per column. Layout is per step, so a tour can mix a two-column welcome with plain tooltip steps.
Can users interact with the page behind a modal?
Modals dim and block the page by design (you control how dark, 0–80%). If users should keep working, that is the signal you wanted a slideout — which never blocks — or a tooltip with page interaction allowed.
Which corner do slideouts use?
Your choice per step — any corner. Pick the quiet one for your layout: bottom-right for most left-nav apps, away from your primary actions and chat widget.
Do modals hurt conversion?
Badly-timed ones do. Fired at natural pauses (first session, post-completion, after an explicit click) with one clear action, modals are the highest-attention surface you have. The frequency caps and audience rules exist so the timing stays honest.
See it on your own app.
Ship your first guide in minutes. Free to start — no credit card.