Embed Widget

A widget is a small piece of code which can be installed and executed within a web page. In Zoho Subscriptions, 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.

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.

Embed Widget

Customizing the Checkout Button

The checkout button can be customized in a lot of ways.

  1. In the Checkout button page, click Change Template and select a template to change the appearance of the button. Button Templates
  2. Select the Plan which you want to associate with the checkout button.
  3. Choose the Add-on(s) to be included with the plan.
  4. 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.

Show Code

Pricing Table

A pricing table shows a list of all the different plans available for a particular product, 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.

Embed Widget

Personalizing the Pricing Table

There are several ways in which you can personalize your pricing table.

  1. Click Change Template to choose a pricing table template from the given alternatives.
  2. 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 product will be grouped together under one tab.
  3. Choose which plans will be displayed on the pricing table in the left sidebar.
  4. Highlight the most popular plans by clicking the ‘Star’ icon next to the plan
  5. Customize the Text and Color of the subscribe button in the pricing table.

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.

Features

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.

Show Code

Was this document helpful?
Yes
No
Thank you for your feedback!
Want a feature?
Suggest