CalculatorLeads

How to add your calculator to your website

You copy two lines of code and paste them into one page of your website. Most people are done in ten minutes. Below are the exact steps for the common website builders, and what to do if it doesn't show up.

1. Your code

This is the code for your calculator. Copy all of it, both lines.

<div data-calculator data-partner="your-key"></div> <script async src="https://calculatorleads.co.uk/embed.js"></script>

Your own code, with your firm's key in place of your-key, is in your welcome email. If you opened this page from one of our emails, it's already filled in above.

2. What is HTML, and what is an embed code?

Every web page is written in a plain-text language called HTML. You never see it, but it sits behind every page and tells the browser what to show: a heading here, a picture there, a box below. Your website builder writes it for you whenever you type text or drag in a photo.

An embed code is a short piece of HTML, written by someone else, that you paste into your own page. Ours does two things. The first line marks the spot on your page where the calculator should go. The second line fetches the calculator from our server and puts it in that spot. You don't need to understand the code. You only need to find the place in your website editor that accepts "code", "HTML" or "embed", paste it in, and publish.

One thing matters: the second line is a script. Your website builder has to allow scripts. A box that only asks for a web address (often called "embed a website" or "iframe") won't work. Some builders only allow scripts on paid plans; we say so below where that's the case.

3. Find your website builder

Not sure which one you use? Ask whoever built your site, or look at the address you log in to (for example wordpress.com, wix.com or squarespace.com).

WordPress (the version you or your web company installed)

Standard WordPress editor (blocks)

  1. Log in to WordPress and open the page where you want the calculator (Pages, then click the page name).
  2. Click where you want it, then click the + button. You can also type /html on an empty line and press Enter.
  3. Choose Custom HTML.
  4. Paste both lines of your code into the box. If the block has separate HTML, CSS and JS boxes, paste both lines into the HTML box.
  5. Click Update (or Publish) at the top right.
  6. Open the page on your live website in a new tab to check.

Older "Classic" editor

  1. Open the page and click the Text tab above the writing area (not Visual).
  2. Put your cursor where you want the calculator and paste both lines.
  3. Click Update straight away, without switching back to Visual first.

Elementor

  1. Open the page and click Edit with Elementor.
  2. In the left panel, search for HTML and drag the HTML widget onto the page.
  3. Paste both lines into the code box, then click Update (or Publish).

Divi

  1. Open the page and click Enable Visual Builder.
  2. Click the grey + inside a row, then search for and choose Code.
  3. Paste both lines, click the green tick, then save the page.

Watch out: you need to be logged in as an Administrator (or Editor). For other users, WordPress quietly removes the script when you save. In Elementor and Divi the calculator may look empty while you're editing; check the published page.

WordPress.com (hosted by WordPress)
  1. Check your plan in your dashboard under Upgrades, then Plans. You need Business or Commerce.
  2. If WordPress.com asks you to switch on hosting features, follow the prompt.
  3. Open the page, add a Custom HTML block (click + and search, or type /html) and paste both lines.
  4. Click Update or Publish, then check the live page.

Watch out: on the Free, Personal and Premium plans, WordPress.com removes scripts when you save, so the calculator can't appear. You'd need the Business plan.

Wix
  1. Open your site in the Wix Editor and go to the page.
  2. Click Add Elements (the + on the left), then Embed Code, then Embed HTML. (In Wix Studio: Embed & Social, then Embed Code.)
  3. Click the new box, then Enter Code.
  4. Make sure Code is selected (not Website address), paste both lines and click Apply.
  5. Drag the bottom edge of the box down to make it tall: about 1,200 pixels is a good start, and as wide as your page content.
  6. Click Publish, then check the live page on a computer and a phone.

Watch out: Wix puts pasted code in a box of a fixed height, so the calculator can't grow the box by itself. If you see a scroll bar or the calculator is cut off, make the box taller. Wix uses a separate layout for phones, so check and resize that too.

Squarespace
  1. Check your plan: scripts in a Code Block need Core, Plus or Advanced. They don't run on Personal or Basic.
  2. Open the page and click Edit.
  3. Click Add Block (the +) where you want the calculator and choose Code.
  4. Click the pencil on the block. Set Mode to HTML and make sure Display Source is off.
  5. Paste both lines, click outside the block, then Save and Exit.
  6. Check the page in a private browser window where you're logged out.

Watch out: Squarespace often hides scripts while you're logged in, so the calculator can look missing to you when visitors can see it. Always check in a private window.

Webflow
  1. Check your plan: the Code Embed element needs a paid Site plan.
  2. Open the page in the Webflow Designer.
  3. Click Add (the +) and drag a Code Embed element where you want the calculator.
  4. Paste both lines and click Save & Close.
  5. Click Publish to your live domain and check the live page.

Watch out: the Designer only shows a grey placeholder. The calculator appears in Preview and on the published site.

Shopify
  1. In Shopify admin, go to Online Store, then Themes, and click Customize.
  2. Use the menu at the top to open Pages and the template your calculator page uses. (Create a new page template if you only want it on one page.)
  3. In the left sidebar, click Add section and choose Custom Liquid.
  4. Paste both lines into the Custom Liquid box and click Save.
  5. Go to Online Store, then Pages, open your calculator page and set its Theme template to the one you just edited.
  6. Check the live page.

Watch out: Custom Liquid is in all current Shopify themes. If yours doesn't have it, your theme is older; ask whoever set up your shop.

GoDaddy Websites + Marketing
  1. Log in to GoDaddy, go to Websites + Marketing and click Edit Website.
  2. Go to the page and click Add Section (the + between sections).
  3. Search for HTML and click Add.
  4. Paste both lines into the Custom Code box.
  5. Click Publish and check the live page.

Watch out: the editor may show a placeholder; the calculator appears on the published site. If it looks cut off, set Forced Height to about 1,200 pixels.

Weebly and Square Online

Weebly

  1. Open the page in the Weebly editor.
  2. From the Build panel, drag an Embed Code element onto the page.
  3. Click it, choose Edit Custom HTML, paste both lines and click outside the element.
  4. Click Publish and check the live page.

Square Online

  1. Check your plan: the Embed code section needs Plus or Premium.
  2. In Square Dashboard go to Channels, Square Online, Website, then Edit site.
  3. Open the page, click + Add, then Section, and choose Embed code.
  4. Paste both lines into the box on the right, click Publish and check the live site.
Framer
  1. Open your project and go to the page.
  2. From the Insert menu, search for Embed and drag it onto the page.
  3. With the Embed selected, set Type to HTML in the right-hand panel and paste both lines.
  4. Make the box as wide as your content and tall, about 1,200 pixels.
  5. Click Publish and check the live site on a computer and a phone.
HubSpot
  1. Go to Content, then Website Pages (or Landing Pages), and open the page.
  2. Click into a Rich text module where you want the calculator.
  3. In the toolbar click Insert, then Embed, paste both lines and click Insert.
  4. Click Preview to check, then Update or Publish.

Watch out: HubSpot doesn't allow script embeds at full page width, so place it in a normal column.

Joomla and Drupal

Both remove scripts from pages by default, so this usually needs whoever set up the site. Send them these notes.

Joomla

  1. Log in to the administrator area as a Super User.
  2. Go to System, Plugins, open Editor - TinyMCE and remove script from Prohibited Elements. Save.
  3. Open the article, click Toggle Editor, paste both lines and save.

Drupal

  1. As an administrator, go to Configuration, Content authoring, Text formats and editors.
  2. Add a text format (for example "Raw HTML") with no editor and no filters, for administrators only.
  3. Edit the page, set the body's Text format to it, paste both lines and save.
A web developer, or a site built by hand
  1. Send your developer the two lines and the page you want the calculator on (forwarding our welcome email is easiest).
  2. They paste both lines into the page's HTML where the calculator should appear, inside the <body>.
  3. They publish the page as usual.

For your developer: if the site sends a Content Security Policy, allow scripts and frames from https://calculatorleads.co.uk. The calculator sizes itself to its content.

4. It's not showing. What now?

  1. Check the published page, not the editor. Most website builders don't run scripts while you're editing. Publish, then open your real web address in a new tab.
  2. Try a private window. Some builders, Squarespace in particular, hide scripts from you while you're logged in.
  3. Turn off ad blockers or privacy extensions on your own site and reload.
  4. Check both lines are still there. Open the page in your editor again. If the script line has gone, your builder or plan doesn't allow scripts (see the notes for your builder above).
  5. Clear your website's cache. If you use a WordPress caching plugin (such as WP Rocket, W3 Total Cache or LiteSpeed Cache) or Cloudflare, clear its cache. If it has a "delay JavaScript" setting, exclude calculatorleads.co.uk/embed.js.
  6. Cut off or a scroll bar? On Wix, GoDaddy and Framer, make the box on the page taller (about 1,200 pixels) and check on a phone.

Rather we helped? Email hello@calculatorleads.co.uk with your website address and which builder you use. We'll walk you through it, or do it with you on a quick call.