Why Use Monthly/Yearly Toggle?
📸 Screenshot: Billing Toggle
Live pricing table with monthly/yearly toggle switch in action
Pricing toggles let customers switch between monthly and annual billing, which:
- Shows value of annual plans (save 2 months!)
- Increases customer lifetime value
- Reduces churn with annual commitments
- Provides flexible payment options
💡 Industry Data: Companies offering annual discounts see 40% of customers choose yearly billing, dramatically increasing revenue predictability.
Setting Up the Toggle
1 Enable Toggle Feature
In table settings, find Billing Toggle and check Enable Monthly/Yearly Toggle.
2 Enter Monthly Prices
In each column, enter the monthly price as normal.
3 Enter Annual Prices
Below monthly price, you'll see Annual Price field. Enter yearly amount.
Example:
- Monthly: $29
- Annual: $290 (save $58 = 2 months free!)
4 Show Savings
Enable Show Savings Badge to display "Save 20%" or "Save $58" on annual options.
Pricing Strategies
Common Discount Structures
- 2 months free: 12 months for price of 10 (16.7% off)
- 20% off: Standard SaaS discount
- 25% off: Aggressive annual push
- 3 months free: 12 months for price of 9 (25% off)
Psychology Tips
- Default to annual: Pre-select yearly option
- Highlight savings: Make discount very visible
- Use "Save" language: "Save $100" beats "$100 off"
✅ Best Practice: Default the toggle to "Yearly" and show how much customers save. This nudges them toward higher-value annual plans.
Testing Your Toggle
- Publish table and view on front-end
- Click toggle switch
- Verify all prices update correctly
- Check savings badges display
- Test on mobile devices