With the content toggle you give visitors the ability to switch between two views on your page themselves. Ideal for a pricing table with a monthly and yearly subscription: the visitor clicks the toggle and immediately sees the corresponding prices.
How does it work?
The 'content toggle' is built into a number of pricing block templates in the page builder. You cannot add this toggle as a standalone element; you choose a template that already contains a content toggle.
Each toggle is linked to two rows. Does a visitor click on option 1? Then they see the content of row 1 and row 2 is hidden. Do they click on option 2? Then row 2 appears and row 1 disappears.
Using the content toggle
Go to your landing page and add a new block. Choose a Pricing block template with a content toggle. Currently there are two templates to choose from 👇
Click on the content toggle in the block to edit it. The options in the toggle can be adjusted in the panel on the left. Here you can adjust the title and the label (for example a discount percentage), or add an extra option.
To adjust the content of each option, click on the title in the toggle. In the example below I can now adjust the content that falls under Monthly:
💡 Tip: Use the content toggle for a monthly/yearly switch in your pricing table. This way you show both options without visitors having to scroll.
Linking a payment page
The buttons in your pricing table will of course need to be linked to a payment page. Click on the button to directly link an existing payment page.
In the left panel, choose Payment page for Type and select the correct payment page.
Can I only show the monthly or yearly option on the payment page?
To ensure that the correct subscription option (monthly/yearly) is automatically selected on the payment page, you add a parameter.
Monthly subscription:
?plan=monthlyYearly subscription:
?plan=yearly
When your visitor has clicked the Yearly option and then wants to go to the payment page, this choice is pre-selected and your visitor can no longer choose Monthly on the payment page.
This way the visitor does not have to make the choice between monthly or yearly again on the payment page. This makes it easier for your visitor to check out straight away!
Example
Our payment page for Plug&Pay Premium normally contains the choice between monthly and yearly. If I add the parameter ?plan=yearly to the button on the landing page, the visitor automatically gets the yearly subscription as a choice.