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

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

Solution

Steps

  1. Add the shortcode or code module.
  2. 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





Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article