Articles on: Troubleshooting

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

Solution



Steps



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


Video Tutorial





Other languages



German: So integrieren Sie Stylish Cost Calculator 2024
Spanish: So integrieren Sie Stylish Cost Calculator 2024
French: Comment intégrer Stylish Cost Calculator 2024

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 shortcode 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.



Additional Information



All Elements & Features



Learn more about All Elements
Learn more about All Features

Need Support?



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




Updated on: 21/06/2024

Was this article helpful?

Share your feedback

Cancel

Thank you!