Embedding your calculator on a Webflow website

Learn how to embed a calculator on your Webflow website

Getting the calculator

  1. Navigate to the ConvertCalculator app
  2. Go to the editor of your calculator by clicking on your calculator's title.
  3. Click on the button "Embed on your website" in the top of the page.
  4. Click on the code found in the pane and copy it.

Displaying the calculator

  1. If you are not in the page editor of the page where you want to integrate the calculator in head over there by clicking on the page title via pages in the left sidebar
  2. In the top left click on the + sign (Add Elements) and scroll down to Components. There you will see the "Embed comonent"
  3. Drag and drop the Embed component to the place on the page you want the calculator to be visible at.
  4. Open the embed settings by clicking on the cogs icon and Paste the embed script (copied in step 4 of "Getting the calculator") in the "HTML code editor".

Congratulations! You now have a working web calculator on your website.

Note that scripts are maybe disabled in preview mode. This means that, while editing page content, the calculator will not be visible. To view the calculator you need to save your content, exit the editor an refresh the page.

Also see this guide: https://university.webflow.com/article/embed?utm_source=element-panel

No luck?

Are you have trouble with embedding a calculator on your website? Don't hesitate to contact us by sending a chat message (via the bubble in the bottom right corner).

    ConvertCalculator is a powerful calculator form builder for your website