# How to Add a Calculator to the Page {% embed url="" %} This guide will help you to insert calculators into the page of your website. There are several ways to do it. ## Embedding calculators from the Cost Calculator dashboard. Calculators can be added to the page with easy steps. To open Calculator embed options just click on the Embed button:

Following one of the options below in the Cost Calculator dashboard the calculator can be embedded: * [Inserting manually with Shortcode.](#inserting-manually-with-shortcode) * [Selecting existing pages to embed Calculator.](#select-existing-pages) * [Creating a new page to insert the Calculator.](#creating-new-page)

You can also get this menu inside the Calculator by clicking the Ember button:

### Inserting manually with Shortcode You can use shortcodes to show created calculators on some pages or posts manually. First, click on the embed button of the desired calculator:

Next, in the opened Pop Up window expand Insert manually option and copy the Calculator Shortcode:

Then go to the **Pages** and edit one of the existing pages or click on **Add New** to create a new page. ![](https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FLvrK393J28uTn8yW6WGq%2FCCBN%20-%20%20All%20pages.png?alt=media\&token=ed85dc0b-e64a-4522-9da4-72cf0081d655) You can paste the shortcode that you copied to the front page. To add that shortcode, you can use any page builder plugin (Gutenberg, Elementor, WPBakery) or you can use special elements instead of shortcode. ![](https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2F7MU6yOBmw0bpeuPzr23f%2FCCBN%20-%20%20shortcode%20added.png?alt=media\&token=4348a61b-4371-4535-b262-799b981862e1) ### Select existing pages You can add a Calculator to the existing pages automatically. First, click on the embed button of the desired calculator:

Next, in the opened Pop Up window expand the **"Select existing pages"** option select pages, and click on the **Apply** button to embed the calculator:

{% hint style="info" %} The Calculator will be added to the end of the page. {% endhint %} ### Creating new page You can add a Calculator by creating a new page. First, click on the embed button of the desired calculator:

Next, in the opened Pop Up window expand the **"Create new page"** option and by giving the name click on the **Create Page** button to embed the calculator to this new page:

After clicking on the Create Page button, you will be redirected to the newly created page with Calculator:

## Embedding Calculators with Page Builders. You can use the "Cost Calculator Builder" widget to inset the calculator with page builder plugins. ### Add Calculator with Elementor In this page builder, there is a special element called Cost Calculator Builder, find that element and drag it.

Then select the calculator that you want to add to the page and click the **Update** button.

{% hint style="warning" %} **NOTE:** In Elementor, you should initially save the calculator and then open it on the page in order to preview the calculator {% endhint %} The result is the following:

### Add Calculator with WPBakery In the WPBakery page builder, there is also a special element called Cost Calculator Builder. 1. First, edit the necessary page using WPBackery or you can also paste it to the empty page using the builder. Click on the **Add Element +** button**:** {% tabs %} {% tab title="Existing Page" %}

{% endtab %} {% tab title="Empty Page" %}

{% endtab %} {% endtabs %} 2. Search for **Cost Calculator Builder** element and click on it:

3. Choose the necessary calculator from the list and click on the **Save Changes** button:

4. Next, click on the Update button to reflect the changes on your webpage:

5. Here is the result, calculator pasted on a webpage successfully:

### Add Calculator with Gutenberg You can also use the Cost Calculator's special block for WordPress Default editor - Gutenberg. 1. Create a new page or edit any existing page using Gutenberg. It can be done just by following **WP Dashboard > Pages > All Pages Add New/Edit:**

2. Click on one of the :heavy\_plus\_sign: **plus** signs:

3. Search for **Cost Calculator Builder** and click on it:

4. Choose the desired calculator from the dropdown list in the inserted block:

5. Click on the **Publish** or **Update** buttons to save the changes:

6. Here is the result of our insertion: