keyboard_arrow_left Back to Knowledge Base

Adding your calculator to a Squarespace website

Have you built an interactive web calculator and want to integrate it into your Squarespace website? 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 Squarespace website. 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 Squarespace website.
  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. Activate your calculator before embeding
  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. Whiteliste the address of your website
  7. Click on Embed Calculator and copy your calculator’s code snippet. Retrieve your calculator’s code snippet

Step 2 | Embed the snippet code to your website:

  1. Login to your Squarespace account and choose your website.
  2. Click Pages.
  3. Click the page you want to embed your calculator.
  4. Click Edit. Embed your interactive calculator
  5. Hover your mouse over the place you want to add your calculator and click the label. Choose where you want to place your calculator
  6. Click Code from the list. Click Code to embed your custom calculator
  7. Paste your code snippet and click the Apply button. Paste your calculator's code snippet

NOTE: Squarespace disables all embedded scripts while you are logged in and editing your site. Log out to review your calculator on your live website.

Squarespace disables all scripts on its editor

 

Troubleshooting: the calculator doesn't show up unless the page is refreshed or reloaded.

Some newer Squarespace templates use Ajax technology that helps enrich a website with great features, thus improving the user experience and turning old-fashioned static HTML pages into modern web applications. The downside is that when a website has Ajax enabled, most embedded JavaScripts doesn't load properly. Therefore your calculator doesn't appear on a page unless it is refreshed or reloaded. The only solution in such case is to disable Ajax on your website:

  1. Login to your Squarespace account and choose your website.
  2. Click Design.
  3. Click Site Styles.
  4. Uncheck the checkbox next to the Enable Ajax Loading label. Disable Ajax loading

General FAQ

How to create a calculator for Squarespace webpage?

Create and add a calculator to your Squarespace website using our easy-to-use, drag & drop calculator builder which requires no programming knowledge. You can choose from a wide selection of calculator templates or build your custom calculator.

What are the examples of a web calculator?

The most popular types of web calculators used by Squarespace users are Instant Price Quote Calculators, ROI Calculators, Quantity Calculators, Saving Calculators. With CALCONIC_ Calculator Builder you can create any custom calculator that fits your needs.

What are the benefits of using an interactive calculator on your website?

A web calculator allows potential customers to make informed decisions. In other words, a web calculator helps to make pricing easy and transparent, collect potential sales leads and increase customer engagement.

Are online calculators mobile-friendly?

Yes. Online calculators created using CALCONIC_ Calculator Builder are mobile-friendly. Additionally, you can adjust the calculator style and settings separately for different device types (desktop, tablet, and mobile).

Build calculator for free!