## Zoho Billing - Product, solutions, integrations, support, and resources Index

Access the complete documentation index at:
https://www.zoho.com/qa/billing/llms.txt

Use this file to discover all available documentation pages before proceeding.

# Embed Pricing Widgets Using Zoho Sites

A [pricing widget](/qa/billing/help/product-catalog/pricing-widgets/overview.html) displays a list of various plans and addons available for a specific product, detailing the key features and their prices. Zoho Billing helps you create and manage pricing widgets effortlessly. You can copy and insert the pricing widget in your webpage to display different plans and pricing options. Customers can easily compare the plans and sign up directly from your website.

Zoho Sites allows you to create and customize a website of your choice, enabling you to embed existing pricing widgets effortlessly.

### Prerequisites:

To embed pricing widgets using Zoho Sites, ensure you have the following:

*   A pricing widget with all the details you want created in [Zoho Billing](/billing/).
*   A website created using [Zoho Sites](/sites/) to embed the pricing widget.

### Copy Pricing Widget Code From Zoho Billing

Here’s how to copy the code from an already created pricing widget:

*   Go to **Pricing Widgets** under _Product Catalog_.
*   Hover over the pricing widget that you want to embed on your website.
*   Click **Copy Code**.

![Copy Code](/billing/images/help/images/product-catalog/pricing-widget/zoho-sites/copy-code.png)

If you have not created a pricing widget already, you can create one in Zoho Billing. [Click here to learn how](/qa/billing/help/product-catalog/pricing-widgets/overview.html#create).

### Insert Pricing Widget in Zoho Sites

Here’s how to insert a pricing widget in Zoho Sites:

*   [Create a new website](https://help.zoho.com/portal/en/kb/zohosites/help-guide/welcome-to-sites/articles/site-creation#To_create_a_website_with_Zoho_Sites) or select a website which you’ve already created in Zoho Sites.
    
*   Go to **Pages** on the left sidebar.
    
*   Click **Add Page** at the top to create a new page, or hover over the page on which you want to embed the widget and click **Edit content**.
    
*   Click **+** at the top and select **Element**.
    
    ![Add Element](/billing/images/help/images/product-catalog/pricing-widget/zoho-sites/element.png)
*   Select **Code Snippet** under _Others_.
    
    ![Code Snippet](/billing/images/help/images/product-catalog/pricing-widget/zoho-sites/code-snippet.png)
*   Click **Add Snippet** at the top.
    
*   Enter a name for the code snippet and click **OK**.
    
    ![Add Snippet](/billing/images/help/images/product-catalog/pricing-widget/zoho-sites/add-snippet.png)
*   Paste the code of the pricing widget which you have [copied](/qa/billing/help/product-catalog/pricing-widgets/embed-zsites.html#copy) from Zoho Billing.
    
*   Click **OK**.
    
    ![Paste Code](/billing/images/help/images/product-catalog/pricing-widget/zoho-sites/paste-code.png)

The pricing widget will be placed on your website. Drag the snippet to position the widget wherever you want it on the website. You can preview the changes by clicking the **Preview** icon at the top.

![Preview](/billing/images/help/images/product-catalog/pricing-widget/zoho-sites/preview.png)

After preview, you can publish the site by clicking Publish at the top.

![Publish](/billing/images/help/images/product-catalog/pricing-widget/zoho-sites/publish.png)

**Note:** When you edit the pricing widgets in Zoho Billing, the changes will be automatically reflected on your website without the need to edit the code snippet in Zoho Sites everytime.

Was this document helpful?

![](/billing/images/ue-resources/common/thumbs.svg) Yes

![](/billing/images/ue-resources/common/thumbs.svg) No

Was this document helpful?

Enter your comments or feedback on this page

Enter your email address

![](#) Refresh

Type the characters you see in the image above

By clicking Submit, you agree to our [Privacy Policy](https://www.zoho.com/privacy.html) .

Submit Cancel

            Submit

         Submit

![](/billing/images/ue-resources/common/smiley.svg)

Thank you for your feedback!