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" at 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 to it 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 component"
  3. Drag and drop the Embed component to the place on the page you want the calculator to be visible.
  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 Webflow website.

Note that scripts can be 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, and refresh the page.

Also, see this guide on the Webflow University.

No luck?

Are you having trouble 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).

Related articles

Learn more about webflow in one of the following articles