Embed Widget
A widget is a small piece of code which can be installed and executed within a web page. In Zoho Billing, you can use our Embed Widget to create a Checkout Button and Pricing Table for your plans. This Checkout Button and/or Pricing Table can then be embedded in your website. The main purpose of embedding this widget in your website is to make it easier for your customers to get information about your plans, through the Pricing Table and instantly subscribe to a plan of their choice, by clicking the Checkout Button.
Note: This feature is available in all plans that support Hosted Payment Pages. Visit the pricing comparison page to check whether your plan supports Hosted Payment Pages.
Checkout Button
Checkout Button is the one which customers click on your website to subscribe to a particular plan. When the Checkout button is clicked, your customers will be redirected to the hosted payment page, where they can enter their details and subscribe to your plan. Learn more about hosted payment pages.
- Navigate to Subscription Items module
- Click More > Embed Widget
Customizing the Widget
The widget can be customized in a lot of ways.
In the Pricing Table page, go to Widget Template and click Change.
Select a template to change the appearance of the widget.
- Select the plan which you want to associate with the checkout button.
- Choose the addons to be included with the plan.
- Change the text and colour of the button.
Once you’ve customized your checkout button, you can view the code by clicking Show Code on the top right corner. Copy the entire code by clicking Copy Code and paste it in your website to embed the widget.
Pricing Table
A pricing table shows a list of all the different plans available for a particular subscription item, highlighting the price and key features of each. Your customer can view the table to learn about the plans and choose to subscribe to a plan.
- Navigate to Subscription Items module
- Click More > Embed Widget
- Click Pricing Table at the top of your screen.
Personalizing the Pricing Table
There are several ways in which you can personalize your pricing table.
- Click Change Template to choose a pricing table template from the given alternatives.
- You can choose to group plans based on their frequency by checking the Group by Frequency checkbox. For example, when the option is enabled, all the monthly plans for the subscription items will be grouped together under one tab.
- Choose which plans will be displayed on the pricing table in the left sidebar.
- Highlight the most popular plans by clicking the ‘Star’ icon next to the plan
- Customize the text and color of the subscribe button in the pricing table.
Note: You can display the salient features of your plans in the pricing table by adding them in the plan description. Use ’|’ to separate multiple points. For example, entering ‘Feature 1 | Feature 2 | Feature 3’ in the plan description displays the features as shown below.
Once you’ve customized your pricing table, you can view the code by clicking Show Code on the top right corner. Copy the entire code by clicking Copy Code and paste it in your website to embed the widget.
Thank you for your feedback!