Embedding To Your Webpage: Deploying and adding the shortcode (calculator form) to your page.

Created by Mike B, Modified on Sun, 14 Apr 2024 at 08:24 PM by Génesis Gómez

Solution

Steps

Copy your embedded shortcode.
Add the shortcode or code module.
Paste the code.

Video Tutorial

Other languages

Additional Information

Limitations

Pop-Ups & Overlays

You cannot embed the shortcode on a pop-up or overlay. It will not load the plugin's CSS code properly and it will break. Please load the shortcode on its own landing page.

How to Embed Your Calculator Using Different Builders

Elementor

Step 1. In the elements side panel, locate the "Styled Cost Calculator" widget and drag it to the container.

Step 2. Choose the calculator you want to add. Then Click "Update" to preview the page and you're done! Your calculator is ready with Elementor.

You can also add the calculator directly via shortcode. Using elementor's native shorcotde widget. Paste the calculator's shortcode, obtainable from the "All Calculators" page of Stylish Cost Calculator.

Gutenberg

Step 1. Head to the page where you want the calculator and click "Add Block." Click the "Shortcode" option.

Step 2. Paste the calculator's shortcode, obtainable from the "All Calculators" page of Stylish Cost Calculator.

DIVI Theme's Builder

Step 1. Insert a new module, which will be a "Code" field. In the editor's pop-up window, replace the "Text" element's content with the calculator's shortcode obtainable from the "All Calculators" page of Stylish Cost Calculator.

WP Bakery (Visual Composer)

Step 1. Replace the "Text" element's content with the calculator's shortcode obtainable from the "All Calculators" page of Stylish Cost Calculator.

Note: First click on the "text" option in the text block. Then insert the shortcode.

Beaver Builder

Step 1. Insert a new module, which will be a "Text" field. In the editor's pop-up window, replace the "Text" element's content with the calculator's shortcode.

All Elements & Features

https://stylishcostcalculator.com/
Learn more about All Elements
Learn more about All the Features

Need Support?

Ask a question or request support
Request a feature or give feedback