Annual billing hint
Show the benefit of annual billing on the pricing page.
What this template is for
The "monthly / yearly" switch is easy to miss, and so is the saving. One tooltip at the switch names the saving in money — which works better than an abstract percentage.
What the user sees
| Step | Anchored to | Copy |
|---|---|---|
| 1 | [data-tour="billing-period"] | Yearly is cheaper Two months free: you pay for 10 months instead of 12. |
The step anchors in a template are [data-tour="…"] placeholders. In the visual editor you point them at your own elements by clicking, or add that attribute in your markup; the copy is edited in the same place.
Why these defaults
- One tooltip at the switch — right where the decision is made.
- After 4 seconds: first the prices, then the saving.
- The /pricing page.
- Once: a discount reminder should not repeat.
Template settings
| Format | tooltip |
| Trigger | after a delay |
| Frequency | once per visitor |
| Pages | /pricing* |
| Audience | everyone |
| Priority | 0 |
What to measure after launch
The share of annual payments before and after launch. Tooltip views are in Clew; payments are in your billing.
Plan
How to set it up
- Sign up and add a site — you get one
Product tours, popups and onboarding in the age of AI
7 patterns with step counts, copy rules and what to measure, what AI changes, and a checklist before you publish. PDF, 2 pages. What is inside →
Done — here is your link
The link is yours: it works once, for one hour. The file opens right here, nothing is sent by mail.
Download the PDF · 2 pagesTry the patterns on your own site — the Free plan is free forever.
Create your free accountYour email is already filled in.