Adding your calculator to your Webflow project

Have you built an interactive web calculator and want to integrate it into your Webflow project? It's really easy! All you have to do is copy your calculator’s code snippet and paste it in a specific place of your Webflow project. Follow the instructions below to do this.

And if you don't have a custom interactive calculator yet, learn how to create your first interactive calculator by following our step-by-step tutorial.

Step 1 | Retrieve your calculator’s code snippet:

1. Login to your CALCONIC account.
2. Click My Calculators.
3. Choose the calculator you want to embed to your Webflow project.
4. Make sure that the calculator is activated. If it isn’t, click the Inactive label to activate it.
5. Click the Embed calculator button.
6. (Optional) Click the Whitelist Your Website and + New Website button and add your website address to whitelist it. Note, website address whitelisting doesn't work with iFrame embedding.
7. Click on Embed Calculator and copy your calculator’s code snippet.

Step 2 | Embed the snippet code to your website:

1. Login to your Webflow account and choose your project.
2. Click the Add Elements icon or hit the A key to open Elements Panel.
3. Add the Embed element from the Components section.
4. Paste your code snippet, and click the Save & Close button.

NOTE: Webflow disables embedded scripts while in editor mode, therefore you might see the following placeholder instead of your calculator in your project:

However, once you publish or export your website, the placeholder will be replaced with your custom calculator.