Embedding your calculator on a Squarespace website

Learn how to embed a calculator on your Squarespace website

Getting the calculator

  1. Navigate to the ConvertCalculator app
  2. Go to your calculator editor by clicking on your calculator's title.
  3. Click on the button "Embed on your website" (floppy disk icon) 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, head over to it by clicking on the page title in the left sidebar.
  2. When you move your mouse over your page's content, a black menu appears called "Page Content". Click on "Edit".
  3. Go to the place you want to embed the calculator and click on the black "drop" to add a "Content Block". Select the "Code" content block.
  4. Paste the embed script (copied in step 4 of "Getting the calculator") in the content block. Replace existing code. Make sure that the "Display Source" checkbox is NOT checked and that the language is set to HTML.
Embed on SquareSpace

Important: Scripts are 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.

Congratulations! You now have a working calculator on your website.

Common problems

The calculator works when I refresh the page but not when I navigate to it.

This probably happens because of AJAX loading. There are two solutions to this problem:

1. Change the embed script

  1. Add the following code to the footer of every page (find instructions here):
HTML
<script type="text/" src="https://app.convertcalculator.co/embed.js"></script>
2. In your original embed code, remove everything except the first line. This means that should look a little like this:
HTML
<div class="calculator" data-calc-id="CALCULATOR_ID"></div>

NB. If you replace the entire snippet, make sure that "CALCULATOR_ID" is replaced with your own calculator id. You can find your CALCULATOR_ID in the embed instructions.

If your website navigation runs on Mercury or PushState, this should work. If not, you should disable AJAX loading.

2. Disable AJAX loading

To disable AJAX, you need to do the following in the Squarespace Editor:

  1. In the Home Menu, click Design, and then click Style Editor.
  2. Scroll down to Site: Loading.
  3. Uncheck: Enable Ajax Loading.

Also, see this guide

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 squarespace in one of the following articles