Popup Teasers: The Small Nudge Before the Big Ask

What is a popup teaser?

Think of it as splitting a popup into two jobs. The attention job — "we have an offer" — is done by something tiny that costs the visitor nothing. The conversion job — the headline, the field, the button — is done by the full popup, and only for people who have already raised their hand.

Three patterns, one idea: something small and permanent that opens something bigger on demand.

The three teaser patterns

1. The pre-play teaser screen

This one lives inside the campaign. Every ChilliPopup prize game — the spin wheel, the scratch card, the slot machine and the claw machine — can show an optional teaser screen before the game surface appears: a headline, an image, and one button that starts the play.

It exists because a game surface is a lot to land on cold. A wheel with eight slices demands that the visitor work out the rules before they know whether they care. A teaser screen says "One free spin. Up to 30% off." first, and only then shows the machinery.

2. The persistent teaser tab

A small tab or button fixed to the corner of the page. It stays put while the visitor browses and opens the offer on click. This is the classic "popup teaser" people mean when they use the phrase, and it is the one you build yourself out of a small element plus one line of JavaScript (below).

3. The teaser bar

A thin strip along the top or bottom of the page carrying one line and a call to action. It is the least intrusive of the three and the one that survives mobile best, because it never fights the content for space. If the strip is the whole offer rather than a doorway to one, you want an announcement bar instead.

When a teaser beats an interruption

Be honest about the trade: a teaser will usually produce fewer signups than a well-timed overlay, because it depends entirely on the visitor taking the initiative. What it produces instead is a higher-quality conversion and a zero-cost impression. Reach for one when:

• The visitor is mid-task. Checkout, account pages, a long article, a booking flow — anywhere an overlay costs you more than it earns.
• The offer is always on. A permanent 10% newsletter code does not need to ambush anyone; it just needs to be findable.
• They already said no. Someone who dismissed your popup should not meet it again — but a small tab in the corner keeps the door open without arguing.
• The ask is optional by nature. Feedback, support, a wishlist, a "notify me" — things people do when the mood strikes.
• Your traffic is mobile-heavy. A full-screen overlay on a phone is the harshest interruption on the web; a bar or a tab is not.

The hybrid is the one most sites should run: interrupt once, politely, then leave a teaser behind for the people who said no.

How to build a persistent teaser

ChilliPopup does not minimise a dismissed popup into a tab for you. You build the teaser as a small element of your own and let it call the player's open API — which is the same mechanism the dashboard's own share-and-embed panel gives you for opening a form, survey or quiz from a link.

Step one: stop the campaign opening by itself

Build the popup you actually want people to see, then go to its display rules and turn the automatic trigger off. From that moment the campaign only ever appears when something asks for it.

Step two: add the teaser and wire it up

One anchor, one call. Style it however you like — this is your page, so the teaser can look exactly like your brand rather than like a widget.

<!-- the pixel, already on every page -->
<script id="chillipopup-pixel" src="https://player.chillipopup.com/javascript/pixel.js?id=YOUR_WORKSPACE_ID"
        data-api="https://api.chillipopup.com" async="true"></script>

<!-- the teaser -->
<a href="#" class="cp-teaser"
   onclick="ChilliPopup.open('YOUR_CAMPAIGN_UUID'); return false;">🌶️ Get 10% off</a>

<style>
  .cp-teaser {
    position: fixed; left: 20px; bottom: 20px; z-index: 9998;
    background: #f93a00; color: #fff; font: 600 15px/1 system-ui, sans-serif;
    padding: 14px 20px; border-radius: 999px; text-decoration: none;
    box-shadow: 0 10px 24px -10px rgba(0,0,0,.45);
  }
</style>

ChilliPopup.open() takes the campaign's id and opens it immediately, bypassing its triggers. Two details worth knowing:

• It is a forced open. If something else is already on screen, call ChilliPopup.close() first or the two will stack.
• You can override the presentation. Pass { mode: 'lightbox' } to force a centered, dimmed overlay, or { mode: 'sidebar' } to slide it in as a panel docked to the edge — handy when the teaser sits in a corner and you want the panel to appear beside it.

<a href="#" onclick="ChilliPopup.open('YOUR_CAMPAIGN_UUID', { mode: 'sidebar' }); return false;">
  Give feedback
</a>

The no-code alternative

If you would rather not touch the page at all, every campaign also gives you a direct link that launches it on arrival. Put that link in your navigation, your footer, an email or a social bio and it behaves like a teaser you did not have to build — the visitor arrives and the campaign opens for them.

The teaser is tiny; the popup behind it is a normal campaign, designed in the usual editor with the usual blocks.

Teaser copy that earns the click

You have roughly four words and a verb. A teaser is read in peripheral vision while someone is doing something else, so it has to name the reward, not the mechanic.

Three rules that hold everywhere:

1. Reward first, mechanic second. Nobody wants a popup; plenty of people want 10% off.
2. Give it a shape. A number — "10%", "2 questions", "30 seconds", "1 free spin" — makes a vague offer concrete.
3. One idea only. A teaser that lists two offers gets read as an ad and ignored as one.

A worked example: the polite hybrid

An online homeware shop wants the discount code in front of new visitors without hounding anyone.

Campaign 1 — the triggered popup.

Exit intent on desktop, 50% scroll on mobile, new visitors only, frequency capped at once every seven days, "show again after conversion" off. Copy: "First order? Have 10% on us." One email field.

Campaign 2 — the same offer, teaser-launched.

A duplicate of the popup with its automatic trigger switched off, opened by a bottom-left tab reading "🌶️ Get 10% off". It is always available, on every page, including checkout — because it never opens by itself, it cannot get in the way.

What the visitor experiences.

• Interested on the first visit → they take the popup, and the conversion gate means they never see it again.
• Busy on the first visit → they dismiss it once, and it stays dismissed. The tab in the corner is the only reminder.
• Ready three visits later, at checkout → they tap the tab, the popup opens, and they get the code without ever having been interrupted.

What to measure

A teaser has its own funnel, and it is shorter than a popup's: it either gets clicked or it does not. Three numbers tell you everything.

• Campaign views. With the automatic trigger off, every view is a deliberate open. That number is your teaser click count.
• Conversion rate on the opened campaign. Expect it to be well above your triggered popup's rate. If it is not, the teaser is over-promising and the popup is under-delivering.
• Views over time. Teaser clicks decay when a tab becomes furniture. If the line flattens, change the copy or the colour, not the position.

Judge a teaser on rate and on what it does to your dismissal count, never on raw volume. Its job is to earn the conversions your triggered popup was never going to get.

Six mistakes to avoid

1. Stacking it on live chat. Check the bottom-right corner before you put anything in it.
2. Leaving the automatic trigger on. Then the popup opens by itself and has a tab. That is not a teaser, that is two interruptions.
3. Making the teaser as big as the popup. If it needs a close button of its own, it has stopped being a teaser.
4. Describing the mechanic. "Open our signup form" has never persuaded anybody.
5. Forgetting the keyboard. A bottom teaser on mobile can sit under the on-screen keyboard or over the sticky add-to-cart bar. Test it on a real phone.
6. Ignoring keyboard and screen-reader users. A teaser is a control: it needs to be a real link or button, reachable by tab, with text that makes sense out of context. Our popup accessibility guide covers the rest.

Related reading

Frequently asked questions