To add your interactive calculator widget to a Webflow project you need to retrieve a code snippet of your calculator and paste it on a specific element of you Webflow project. Find the instructions below about how to add your calculator widget:
Step 1 | Retrieve a code snippet of your calculator:
- Sign in to your CALCONIC account.
- Click My Calculators.
- Choose a calculator you want to embed to your Webflow project. If you don't have any calculator built yet, learn how to create your first interactive calculator by following our step-by-step tutorial.
- Make sure that the calculator is activated. If not, click on Inactive label to activate it.
- Click Embed button.
- Click +New Website button and add the address of your website.
- Click Next.
- Copy a code snippet of your calculator.
Step 2 | Embed the snippet code to your website:
- Sign in to your Webflow account and choose a project.
- Click Add Elements icon or press A to open the Elements Panel.
- Add an Embed element from the Components section.
- Paste your code snippet and click Save & Close button.
NOTE: Webflow disables embedded scripts while in editor mode, therefore you might see a placeholder instead of a calculator in your project:
However, once you publish or export your site, the placeholder will replaced with your custom calculator.