Pricing Widgets - Overview
A pricing widget is a visual pricing display that shows your product or service plans in a clear, easy-to-compare format which can be used on a website or landing page of your business.
Pricing widgets help you control how prices are displayed and applied across your sales and billing flows. They allow you to apply pricing logic dynamically without changing the original product prices.
Let’s take a look at how Pricing Widgets work in Zoho ERP.
Understanding Pricing Widgets
Pricing Widget Operations
Understanding Pricing Widgets
The Pricing Widgets module in Zoho ERP gives you full control over how your pricing is presented. Whether you’re showcasing your subscription plans or helping customers compare pricing options, you can display plans and addons side by side.
Creating and managing Pricing Widgets in Zoho ERP is simple and straightforward. You can create a pricing widget, customize how it looks, and embed it on your website, without the need of developer assistance. This helps you get your pricing page live faster and makes it easy for customers to explore plans and subscribe.
To use pricing widgets effectively, it’s important to understand the different configuration options available. Keep reading to know more.
How Pricing Widgets Work
The Pricing Widget can be embedded on your website or landing pages, allowing customers to compare plans and subscribe directly. This setup ensures you can update pricing presentation. Configuring a Pricing Widget involves three simple steps that help you control how plans and pricing are displayed to customers:
These steps help you present pricing clearly, guide customers toward the right plan, and deliver a seamless subscription experience.
Explore how you can configure these preferences to meet your business requirement.
Configuring Pricing Widgets in Zoho ERP
After creating a Pricing Widget, you can customize your pricing widget; from configuring plans to be displayed to how the prices and addons should appear, you can also decide how the widget should look and behave on your website. Each pricing widget tab focuses on a specific aspect of the pricing experience, ensuring clarity for both you and your customers.
Selecting Plans
The Select Plans tab allows you to choose which subscription plans need to be included in the Pricing Widget. You can group plans based on billing frequency, such as weekly or monthly.
You can also control the default billing frequency shown when the widget loads and reorder plans to define the sequence in which they appear. This helps you highlight only the required plans, and also help you create new custom plans for specific use cases or audiences.
Configuring Plans
In the Configure Plans tab, you can fine-tune how each selected plan appears in the widget. This includes defining the display price, configuring strike-through amounts for promotional pricing, and choosing which addons are shown alongside a plan.
You can also control the button action for each plan, such as redirecting customers to a hosted payment page, custom links and more. Additionally, pricing can be linked to specific currencies, price lists, and your business locations.
Customizing the Widget
The Customize Widget tab focuses on how your pricing widget will be displayed. You can highlight specific plans using labels such as “Most Popular,” customize button text and colors, and adjust the background color to match your brand.
You can also configure display options such as billing frequency visibility, decimal precision for prices, and addon labels. Language selection allows you to present the widget in a way that suits your target audience.
Learn how to set up pricing widgets for your business.
Pricing Widget Operations
Learn more about the different actions you can perform on the pricing widgets you create in your Zoho ERP organization.
Create Pricing Widget
Insight:
You can create multiple pricing widgets for a product. This will help if you have separate pricing widgets for standard pricing and discounted pricing.
Here’s how to create a pricing widget:
- Log in to your Zoho ERP organization.
- Click Items in the left sidebar.
- Switch to the Pricing Widgets tab on the top module bar.
- Click + New in the top-right corner.
- Enter a name and select a product.
- Click Proceed.
Now, a pricing widget will be created for the product.
Pro Tip:
When embedding more than one pricing widget on a single page, a single script code will be sufficient for all widgets you include to that webpage. This reduces redundant scripts, improves page load speed, and simplifies maintenance. You can remove the script code while pasting the pricing widgets’ codes.
Customize Pricing Widget
You can customize your pricing widgets in several ways. Here’s how:
- Change Templates
- Select Plans
- Customise Plans
- Customise Widget
Change Templates
You can change the template of your pricing widget. Here’s how:
- Log in to your Zoho ERP organization.
- Click Items in the left sidebar.
- Switch to the Pricing Widgets tab on the top module bar.
- Create or edit the pricing widget you’d like to configure.
- Click Change next to the template name in the Pricing Widgets page.
- Select the desired template.
The theme of the template will be changed.
Select Plans
Here you can add, reorder, and create custom plans you want in the pricing widget.
Group Plans
Here’s how you can group plans in your pricing widget:
- Log in to your Zoho ERP organization.
- Click Items in the left sidebar.
- Switch to the Pricing Widgets tab on the top module bar.
- Create or edit the pricing widget you’d like to configure.
- Go to the Select Plans tab on the Pricing Widgets page.
| Field | Description |
|---|---|
| Group plans by frequency | Check this box to group plans based on their frequency. For example, when you check this option, all the monthly plans for the subscription items will be grouped together under one tab separately. |
| Frequency Selector Style | Select the format (Tab or Dropdown) for displaying the frequency selector on the pricing page. |
| Default Frequency | Choose the default plan frequency you want to show when customers visit the pricing page. |
Select & Reorder Plans
Here’s how you can select and reorder plans in your pricing widget:
- Log in to your Zoho ERP organization.
- Click Items in the left sidebar.
- Switch to the Pricing Widgets tab on the top module bar.
- Create or edit the pricing widget you’d like to configure.
- In the Select Plans tab, you can change the plan frequency name in the textbox under Select & Reorder Plans.
- Slide the toggle for the plans that should be displayed on the pricing widget table.
- Click and drag the plan using the Six-dot reorder handle to reorder them on the pricing page.
- Click the Star icon next to the plan to highlight the most popular plan.
Custom Plan
Here’s how you can create a custom plan for your pricing widget:
- Log in to your Zoho ERP organization.
- Click Items in the left sidebar.
- Switch to the Pricing Widgets tab on the top module bar.
- Create or edit the pricing widget you’d like to configure.
- Click + Add a custom plan to create a custom plan.
- Fill in the following fields:
- Plan Name: Enter a name for your custom plan.
- Plan Description: Provide a short description about your plan, this will be displayed above the plan in your pricing widgets.
- Button Name: Enter the label that will appear on the action button.
- Button Action: Choose the action that should be performed when customers click the button, such as opening a phone call, sending an email, or redirecting them to a custom link.
- Plan Features: Enter the features included in your custom plan. Use the bar symbol (|) or press Enter to separate multiple feature points. These features will be listed under the plan in the Pricing Widget.
- Click Save.
A new custom plan will be created.
Configure Plans
You can add currencies, addons, and button action for each plan in your pricing widget.
Strike Amount
Scenario:
Charles offers a 30% discount on a clothing line during the end-of-season sale. The strike amount is ₹1,000, and the sale price is ₹700. This makes it clear to his customer that the original price was ₹1,000, and they are saving ₹300. Showing a discount like this makes the deal more appealing and encourages customers to buy.
Here’s how to do this:
- Log in to your Zoho ERP organization.
- Click Items in the left sidebar.
- Switch to the Pricing Widgets tab on the top module bar.
- Create or edit the pricing widget you’d like to configure.
- Go to the Configure Plans tab.
- Select the plan which you want to configure.
- You can indicate the price change or discount by entering the old amount in the Strike Amount field.
Addons
Here’s how to include addons in the pricing widgets:
- Log in to your Zoho ERP organization.
- Click Items in the left sidebar.
- Switch to the Pricing Widgets tab on the top module bar.
- Create or edit the pricing widget you’d like to configure
- Go to the Configure Plans tab.
- Select the plan which you want to configure.
- Select + Click to associate addons under Addons.
- Mark the addons that you want to associate with the plan.
- Click Save.
Currencies
Here’s how to add multiple currencies to the pricing widgets:
- Log in to your Zoho ERP organization.
- Click Items in the left sidebar.
- Switch to the Pricing Widgets tab on the top module bar.
- Create or edit the pricing widget you’d like to configure.
- Go to the Configure Plans tab and select the plan for which you’d like to configure currencies.
- Hover over the Currencies field and click Configure.
- Mark the currencies that you want to associate with the plan.
- Click + Add Currency to add a price list with a new currency.
- Click Save.
Note:You cannot associate more than one price list with the same currency.
Here’s how you can configure the currency selector:
| Field | Description |
|---|---|
| Currency Selector Style | Select the format (Tab or Dropdown) for displaying the currency selector on the pricing page. |
| Default Currency | Choose the default currency you want to show when customers visit the pricing page. |
To delete an associated currency:
- Hover over the Currencies field and click Configure.
- Click the Trash icon next to the currency that you want to delete.
Your customers can switch between the associated currencies from the currency selector.
Button Action
Here’s how to add a button action in the pricing widgets:
- Log in to your Zoho ERP organization.
- Click Items in the left sidebar.
- Switch to the Pricing Widgets tab on the top module bar.
- Create or edit the pricing widget you’d like to configure.
- Go to the Configure Plans tab.
- Select the plan which you want to configure.
- Click the dropdown next to the Button Action and select the action which you want the button to perform.
The button actions include:
| Button Action | Description |
|---|---|
| Hosted Payment Page | Your customers will be redirected to the plan’s Hosted Payment Page when you select this as a button action. |
| Custom Link | Your customers will be redirected to the link that you enter in the field. You can enter your checkout page or any specific page to which you want to redirect your customers. |
| Email Address | Your customers will be redirected to a mail app with the email address that you entered in the field automatically set as the recipient email. |
| Phone Number | Your customers will be redirected to call the phone number that you entered in the field. Note: Here’s where your customer will be redirected once they click the button: |
Customize Widget
You can add a caption, change the name of the highlight label and button label for each plan in your pricing widget. Here’s how:
- Log in to your Zoho ERP organization.
- Click Items in the left sidebar.
- Switch to the Pricing Widgets tab on the top module bar.
- Create or edit the pricing widget you’d like to configure.
- Go to the Customise Widgets tab and fill in with necessary details.
| Field | Description |
|---|---|
| Highlight Label | Customize the name of the highlight label in the textbox. |
| Caption | Enter a caption for the plans, which will be common to all plans, and will be displayed right above the checkout button. Note:If your plans include a setup fee, you can use the %setupfee% placeholder to display it. |
| Button Label | Customize the name of the checkout button in the textbox. |
| Button Colour | Customize the colour of the checkout button. |
| Language | Select the language in which the default information should be displayed in. Note: The content that you provide will not be translated. |
| Background Color | Customize the colour of the background of the pricing widget. |
| Decimal Places | Select how many decimal places should be displayed for prices in the widget, or choose Default to follow your organization’s display preference. |
| Addons Label | Customize the label that is displayed above the addons section in the Pricing Widget. |
| Show Billing Frequency | Mark this option to show the plan frequency inside the pricing table. |
| Include features from the previous plan in the next plan | Mark this option to automatically add “Everything of %Previous Plan% +” to the next plan’s pricing column, indicating that the higher plan includes all features from the previous plan along with additional benefits. |
| Show monthly prices for yearly plans | Mark this option to display monthly prices for yearly plans. |
You can preview changes you made and click Save at the top to save all the changes.
Then, a popup with the code appears. Click Copy Code to copy and paste it in your website’s code to embed the widget.
Mobile View
Use this option to see how the pricing widget appears on mobile devices.
Here’s how:
- Log in to your Zoho ERP organization.
- Click Items in the left sidebar.
- Switch to the Pricing Widgets tab on the top module bar.
- Create or edit the pricing widget you’d like to preview.
- Click on the Mobile icon on the top right corner of the page.
Your pricing widget will be displayed exactly as it appears on a mobile screen.
Desktop View
Use this option to preview the pricing widget as seen on desktops or laptops.
Here’s how:
- Log in to your Zoho ERP organization.
- Click Items in the left sidebar.
- Switch to the Pricing Widgets tab on the top module bar.
- Create or edit the pricing widget you’d like to preview.
- Click on the Laptop icon on the top right corner of the page.
Your pricing widget will be shown in desktop view.
Preview Full Screen View
This option lets you view the mobile or desktop version in full screen for a clearer preview.
Here’s how:
- Log in to your Zoho ERP organization.
- Click Items in the left sidebar.
- Switch to the Pricing Widgets tab on the top module bar.
- Create or edit the pricing widget you’d like to preview.
- Click on the Full Screen icon on the top right corner of the page.
Your pricing widgets will be open in full screen.
Edit Pricing Widget
Here’s how you can edit a pricing widget:
- Log in to your Zoho ERP organization.
- Click Items in the left sidebar.
- Switch to the Pricing Widgets tab on the top module bar.
- Hover over the pricing widget that you want to edit.
- Click the dropdown and select Edit.
- Make the necessary changes.
- Click Update at the top.
Clone Pricing Widget
Here’s how you can clone a pricing widget:
- Log in to your Zoho ERP organization.
- Click Items in the left sidebar.
- Switch to the Pricing Widgets tab on the top module bar.
- Hover over the pricing widget that you want to edit.
- Click the dropdown and select Clone.
- Enter a name and click Clone.
- Make the required changes.
- Click Save at the top.
Now, the pricing widget will be cloned.
Delete Pricing Widget
You can delete the pricing widget if you want. Here’s how:
- Log in to your Zoho ERP organization.
- Click Items in the left sidebar.
- Switch to the Pricing Widgets tab on the top module bar.
- Hover over the pricing widget that you want to delete.
- Click the dropdown and select Delete.
- Click Delete in the popup that appears.
The pricing widget will be deleted.