keyboard_arrow_left back to knowledge base

Adding your calculator to your Webflow project

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:

  1. Sign in to your CALCONIC account.
  2. Click My Calculators.
  3. 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.
  4. Make sure that the calculator is activated. If not, click on Inactive label to activate it.
  5. Click Embed button.
  6. Click +New Website button and add the address of your website.
  7. Click Next.
  8. Copy a code snippet of your calculator.


Step 2 | Embed the snippet code to your website:

  1. Sign in to your Webflow account and choose a project.
  2. Click Add Elements icon or press A to open the Elements Panel.
  3. Add an Embed element from the Components section.
  4. 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.