How to add a calculator to the page

This guide will help you to insert calculators into the page of your website.

Embedding calculators from 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.

• Selecting existing pages to embed Calculator.

• Creating a new page to insert Calculator.

Inserting manually with Shortcode

You can use shortcodes to show created calculators in some pages or posts manually.

First, click on the embed button of the desired calculator:

Next, in 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.

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.

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 opened Pop Up window expand "Select existing pages" option and select pages and click on Apply button to embed calculator:

The Calculator will be added to the end of the page.

Creating new page

You can add a Calculator by creating new page. First, click on the embed button of the desired calculator:

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

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

Embedding calculators with page builders.

You can use "Cost Calculator Builder" widget to inset the calculator with page builder plugins.

Adding calculator with Elementor

In this page builder, there is a special element called Cost Calculator Builder, find that element and drag it.

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

NOTE: In Elementor, you should initially save the calculator and then open it in the page in order to preview the calculator

The result is following:

Adding calculator with WPBakery

In WPBakery page builder, there is also a special element called Cost Calculator Builder, find that element, and choose your calculator.

After selecting the necessary calculator, press the Save changes button.

As a result, you can see the calculator when you preview the page.