6 Ways Companies Use UI Announcement Modals to Inform

You may not like announcement modals as a user, and you're not wrong: a modal stops whatever you were doing. That's why the useful question isn't "how do I design a modal" but "does this announcement deserve one". Most don't. A modal earns its interruption when the news concerns the whole product, when the user must decide something now, or when you need an answer before onboarding can go on.

This post gives a rule for that choice, the parts every announcement modal needs, six real examples and the no-code tools that build them.

What is a UI modal?

A UI modal (or modal window) is a window that opens on top of an application and stops the user from interacting with anything behind it until they act on it or close it. The background usually stays visible under a dark or translucent layer, so users know where they are.

That blocking is what separates a modal from its quieter relatives:

Used well, modals help with feature announcements, account creation and cancellation, and welcomes. Used carelessly, they become the pop-ups users close without reading.

When is an announcement modal the right choice?

Use a modal when the message can't wait and isn't tied to one spot on the screen. Ask three questions:

1. Does it concern the whole product? A redesign, a new plan or a welcome: yes, a modal fits. A new button: no, use a tooltip or a hotspot on the button.
2. Must the user decide something now? Cancelling, downgrading, confirming a risky action or answering a setup question: a modal fits.
3. Is the user in the middle of a task? Then wait until it's finished, or use a slideout that doesn't stop them.

If the answer to the first two is no, the announcement belongs in a tooltip, a slideout, a banner, a changelog or an email.

What should every announcement modal include?

The modals in this post and in our inspirations library share the same parts. A good announcement modal has:

1. A headline that names the change, such as "New: Follow-up Emails" (Calendly) or "Book your trip instantly" (Airbnb).
2. One to three lines of body copy, or three short bullets, about what the user can now do.
3. One primary button that does the thing ("Show Instant Book Listings"), plus one way out ("Got it", "Not right now").
4. A close icon, and the Esc key working. The accessible modal pattern also moves keyboard focus into the modal, keeps it there and returns it to where the user was on close.
5. A once-only rule. Show an announcement once per user; anything they've dismissed shouldn't come back.
6. A fallback for personalisation. If the copy uses the user's name, decide what shows when the name is missing (see BacklinkManager below).

6 examples of UI modals used well

These six screens were added to this post in 2022 (Airbnb's dates from 2017). The products have likely changed since, so each is described as it was at the time of the screenshot.

1. Airbnb: a feature announcement with a tooltip

Airbnb announced Instant Book with a "modal, then tooltip" pattern. The modal, shown over search results, was titled "Book your trip instantly" and explained in two sentences that Instant Book removes the wait for host approval. Its one button, "Show Instant Book Listings", applied the filter.

 

The background stayed visible behind a translucent layer, so the user never lost track of the search they came for.

 

Later, on a listing page, a small tooltip above the price repeated the idea where it applied: "Book without waiting for the host to respond".

Why does this modal work?

The modal handles the product-wide news, and the tooltip handles the detail in context. Neither repeats the other, and the button in the modal takes the user straight to the result.

2. Timely: a cancellation survey

When users cancelled, Timely, a time-tracking app, showed a modal asking "What made you decide to cancel your subscription?". It asked for an honest answer in a free-text box, then offered an orange Cancel Account button and a plain-text way back: "Nevermind, I don't want to cancel."

 

 

Cancelling is a decision, which is exactly when a modal is justified, and asking why tells the team what's driving churn. For modals that pair the question with an offer to stay, see ClickUp's downgrade modal and Jarvis' churn modal.

3. Slack: a tooltip that opens a help panel

Slack announced Huddles without a modal at all.

 

A small tooltip next to the huddle switch read "Start a voice-only huddle with the people here", with one line of copy and a "Learn More" link. A modal would have taken over the screen for a feature tied to one switch; the tooltip sat right beside it.

 

 

Clicking Learn More opened a help panel, "Introducing Slack Huddles, a new way to have live audio discussions", with who can use it, a screenshot and what to expect. Users who wanted detail got it; everyone else got one line.

 

 

4. Calendly: a new feature modal

 

Calendly announced automated follow-up emails with a simple modal: the headline "New: Follow-up Emails", one sentence ("Automatically send your invitees a follow-up email after you meet."), and two buttons, Learn more and Got it, plus a close icon.

The headline is the whole message; users who read nothing else still know what changed. Calendly used the same pattern for other launches, such as Meeting Polls, with a tooltip as backup.

 

 

5. BacklinkManager: a welcome modal that asks a question

 

BacklinkManager's welcome modal did three jobs at once: it greeted the new user, asked "What do you need BacklinkManager for?" with four options, and offered a five-minute tutorial video. A single button at the bottom named the first task: "Add your target URLs you want to build links to!"

The answers to that question let the product send each user down a different onboarding path. The screenshot also shows a mistake worth avoiding: the greeting read "Hey {{name}}!", a merge field that never filled in. If your modal personalises, set a fallback.

6. Zapier: a welcome modal with two ways forward

 

When a user started a Zapier for Teams trial, a modal said "Welcome to Teams!" and explained in two sentences that the team could use it free for 14 days. It offered two buttons: View Zaps for users who wanted to get to work, and Open Guide for users who wanted a walkthrough.

 

A welcome is product-wide by definition, so a modal fits. Letting users choose between the guide and the dashboard keeps it from feeling like a gate. If you have more to show, a short series of modals with a progress indicator can lead into a product tour.

 

Which tools build modals without coding?

Most user onboarding tools build modals with a visual editor, alongside tours, tooltips and checklists. These four were listed in this post's first version; they're shown in alphabetical order with facts from our reviews. The screenshots are from their websites in 2022.

Prices, trials and ratings were read from each tool's pricing page and G2 on 19 October 2026. The price comparison covers the rest of the tools we review.

1. Appcues

 

Appcues builds modals as steps inside its flows, next to tooltips and slideouts, without code changes once it's installed. Its 2022 product page, below, showed a "Welcome to the App!" modal being edited in the builder.

 

 

 

2. Userflow

 

Userflow builds step-based flows, checklists, banners and announcements. Its 2022 product page, below, said each step of a flow could be a modal, a tooltip or a speech bubble, and showed a welcome modal with "Let's do it" and "Not right now" buttons.

 

 

3. UserGuiding

 

UserGuiding is a no-code onboarding tool for web products with guides, hotspots, checklists, a resource centre and surveys. Its banners are on every plan, and its site menu lists announcement modals. In 2022 its theme editor, below, set a modal's colours, backdrop, progress indicator and corner style.

 

4. Userpilot

 

Userpilot lists flows, banners and spotlights under in-app engagement on its pricing page, along with checklists and, on higher plans, a resource centre. Its 2022 site, below, showed a "What's New" in-app announcement with a "Got it!" button.