> ## Documentation Index
> Fetch the complete documentation index at: https://docs.partnero.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embeddable earnings calculator

Help prospective partners see the earning potential before they join. Visitors move a slider to see projected earnings, calculated from your actual commission rates and pricing plans.

***

### How it works

Visitors move the slider to adjust a variable, such as the number of referrals, and the calculator shows projected earnings in real time. Because it's pulling from your actual commission rates and pricing plans, the numbers reflect what a partner could realistically earn in your program.

<img src="https://mintcdn.com/partnero/Dc3Hef7arGDy54au/images/image.png?fit=max&auto=format&n=Dc3Hef7arGDy54au&q=85&s=a4de13a5e2f6bdf4867936ada602c6ce" alt="Image" width="2170" height="1340" data-path="images/image.png" />

***

### How to customize the calculator

Customize the layout, branding, colors, and text, with a live preview that updates as you make changes.

1. Go to **Partner portal** > **Forms** tab > **Earnings calculator**.
   <img src="https://mintcdn.com/partnero/Dc3Hef7arGDy54au/images/image-1.png?fit=max&auto=format&n=Dc3Hef7arGDy54au&q=85&s=cce89840583f8b55c6a4224b7ca8e993" alt="Image" width="2874" height="1540" data-path="images/image-1.png" />
2. Scroll to the **Appearance and content** section.  Expand **Appearance** to customize branding, layout, and colors.\\

   <img src="https://mintcdn.com/partnero/Dc3Hef7arGDy54au/images/image-3.png?fit=max&auto=format&n=Dc3Hef7arGDy54au&q=85&s=346a7596c2a5fbbf8379bddf72a0cb56" alt="Image" width="2874" height="1538" data-path="images/image-3.png" />

   Expand **Plans** to add your pricing plans and customize the slider defaults.

   <img src="https://mintcdn.com/partnero/Dc3Hef7arGDy54au/images/image-5.png?fit=max&auto=format&n=Dc3Hef7arGDy54au&q=85&s=df800362bfcdc201bfc9e0a2cf1c12d6" alt="Image" width="2874" height="1538" data-path="images/image-5.png" />

   Click **+Add plan**, and enter your pricing options.  You can add as many pricing plans, as needed. <br />Then customize the widget slider by defining start and end points and where the default lands.  You'll see the changes reflected in the preview on the right.

   <img src="https://mintcdn.com/partnero/Dc3Hef7arGDy54au/images/image-14.png?fit=max&auto=format&n=Dc3Hef7arGDy54au&q=85&s=d648287a6f912158b5e413881092f213" alt="Image" width="2874" height="1536" data-path="images/image-14.png" />
3. Expand **Content** to edit the calculator's copy.
   <img src="https://mintcdn.com/partnero/Dc3Hef7arGDy54au/images/image-15.png?fit=max&auto=format&n=Dc3Hef7arGDy54au&q=85&s=ef85589cace91086917d91af6c6b2f15" alt="Image" width="2878" height="1552" data-path="images/image-15.png" />
4. Click **Update** to save your work.

***

### Getting the calculator on the page

To add the calculator to your page:

1. Go to Partner portal > **Forms** tab > **Earnings calculator**.
2. Copy the embed code and add it to your site. Once it's live, visitors can use the slider to see their projected earnings right there on the page.
   <img src="https://mintcdn.com/partnero/Dc3Hef7arGDy54au/images/image-17.png?fit=max&auto=format&n=Dc3Hef7arGDy54au&q=85&s=76cb2eeea2588dbf3d0be3633e23f557" alt="Image" width="2878" height="1544" data-path="images/image-17.png" />


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.