Onboarding Popup

What it does

This onboarding popup shows new visitors how to use or get around your site or app. This way they can quickly see how it works and understand where to start.

That first welcome tour is what pros call an onboarding.

Because it's very common that first-time visitors feel lost and leave, a short guide helps them take that first step.

The preview is the real guide we use on this site. Yours follows your steps and can show:

• a help button to open it anytime
• a small corner card inviting new visitors to take the tour
• an animation, an image, an icon or nothing on each step
• a counter, dots or a bar showing how far along they are
• a last button that takes them where you want them to start

Try the preview above and pick your options. Then click the copy button to get the prompt (the instructions for your AI) and paste it in your AI (Copilot, Cursor, Gemini, any of them). It will build the popup in your site's colors and fonts with the options you picked.

How it works

1. 01

   A first-time visitor lands on your site, and a few seconds later a card slides into the corner to offer a quick tour, without covering what they came to see.

2. 02

   They click "Show me how" and the guide opens at step 1 over a dimmed page, so their eyes go straight to it.

3. 03

   They read one short step at a time, just a title and two lines of text, so they understand each one at a glance.

4. 04

   They click Next to move on, and the counter (like "2 / 4") shows how much is left, so they see the tour is short and keep going.

5. 05

   They click Back to see a step again if they missed something.

6. 06

   On the last step, they click "Get started" and land on the page where you want them to begin.

7. 07

   They can close it anytime with the X or a click outside the card, so they can get back to your page whenever they want.

8. 08

   Later, they can click the help button anytime to open the guide again from any page, if they need a reminder.

What you can customize

• How it opens: choose if the guide opens only from the help button, also from a small corner card for new visitors, or also by itself once they scroll a little, so it never covers the page before they've had a look. We put the help button and the corner card by default.
• Who sees it without asking: when the guide or the card shows up on its own, you get to decide who gets it: first-time visitors only, every visitor once per visit, or only visitors who aren't logged in. By default it's first-time visitors only, because people who already know your site don't need the tour twice.
• Illustration on each step: you can pick a small animation that shows the step happening, a still image of that step on your site, a simple icon, or nothing at all. We put the animation by default, because watching a step happen is easier than reading about it.
• Progress: by default we show a counter like "1 / 4", since seeing how short the tour is makes it easy to keep going. You can also switch to dots or a thin bar across the top of the card.
• Back button: keep a Back button from step 2 on, so visitors can check a step again, or turn it off so they only move forward. It's on by default.
• Last button text: write the words on the last step's button, like "Create my account" or "Start shopping". Or leave it empty and it says "Get started", like ours.
• Last button link: select the page that the visitor should open at the end of the onboarding, like your sign-up page, so they land right where they should begin. Or leave it empty and your AI will find the page where a new visitor really starts in your project, or ask you if it isn't sure.
• On phones: keep the card in the middle of the screen, or make it a panel that slides up from the bottom, right where their thumb can reach it. We put the card in the middle by default.

Note that our prompt will tell your AI to write the steps from how your site or app really works and show you the list before building. If it isn't sure, it will ask you for them, and it will never describe a feature or a button you don't have.

It will also make sure the guide and the corner card never open over another popup that's already on screen (like a cookie banner), so your visitors don't get two at once.

To greet first-time visitors with a discount code rather than a guide, show them a welcome popup with an offer.

To guide visitors through saving your site as an app on their phone, use a popup with the add to home screen steps.

If your tour works better as a video, play it instead in a video lightbox (a video that opens in a popup over the page).

When new users have tasks to complete, not just steps to read, track them with an onboarding checklist with a progress bar.