Embedding your calculator on a Wix website

Learn how to embed a calculator on your Wix website.

Embedding your calculator using our plugin

We build a Wix plugin that makes embedding your calculator a breeze:

  1. Navigate to the ConvertCalculator app, and open your calculator.
  2. Go to Share → Embed, and copy your Calculator ID.
  3. Open the “Add Apps” window within Wix and search for “Convert: Calcs & Configurators”, or add the plugin to your website from the Wix Marketplace.
  4. Paste in the Calculator ID.
  5. Give the Embed component the desired width and height, so the embedded calculator will work according to your responsive design. Be sure to update the width and height of your calculator in the Wix mobile breakpoint, to make sure your calculator also works as expected on mobile devices.
  6. Note that the following features don’t work when embedded in Wix:

You can also log in using your ConvertCalculator account, to easily select calculators from your ConvertCalculator Workspace.

Note that embedded scripts don’t always update to the latest version while looking at your website in the canvas. Please open Preview mode to see and interact with your calculator.

Embedding your calculator using our HTML code snippet

  1. Navigate to the ConvertCalculator app, and open your calculator
  2. Copy the following code:
HTML
<div class="calculator" data-calc-id="your-calc-id" data-type="framed" ></div> <script src="https://scripts.convertcalculator.com/embed.js" async="true"></script>
  1. Go to Share → Embed, and copy your Calculator ID. Replace your-calc-id with the Calculator ID you just copied.
  2. Open the “Add Elements” window within Wix, and add the “HTML / iFrame” element to your page.
  3. Paste in the Calculator ID.
  4. Save the code by clicking on the "Apply" button.
  5. Resize the iFrame block to make it fit.

Managing your pricing plan

If you signed up via the ConvertCalculator Wix plugin (for example by clicking “Pick a template” or “Start from scratch”), instead of directly from our dashboard, your payments are handled by Wix, instead of directly with us. This means upgrading, downgrading, and canceling your plan works a bit differently:

  • To upgrade your plan from Free, you’ll be redirected to Wix’s hosted pricing page
  • All payments go through Wix, not through ConvertCalculator directly
  • Wix does not support mid-cycle upgrades or downgrades from paid pricing plans. You’ll first need to cancel your current plan and then choose your new plan. We’ll refund the unused time of your current plan within a few business days.

You can access your current subscription and manage your plan in Wix’s billing and subscriptions dashboard.

If you didn’t sign up via the Wix plugin, but directly opened convertcalculator.com, you’ll be able to upgrade normally using our in-app billing flow.

Common problems

The calculator shows scrollbars when viewing it on my live website

Unfortunately, Wix doesn't allow for direct embedding via JavaScript. Instead, Wix uses an iFrame. This means you need to set a fixed height of the calculator block to make it "fit". This fixed height will not change, when the height of your calculator changes, e.g. because you’re using ViewContainers or when resizing your screen.

To remove the scrollbars, make sure you set the height of the block in Wix to at least the height of the calculator. If the block is smaller than the calculator, scrollbars will appear.

Note that you have to also set-up the correct height for the mobile breakpoint within Wix.

Opening external links when added to button components, Wix only allows us to open links in a new tab using link in text elements, like this: <a href="https://www.convertcalculator.com/" target="_blank">my link</a>

No luck?

Are you having trouble embedding a calculator on your website, or questions about your payment? Don't hesitate to contact us by sending a chat message (via the bubble in the bottom right corner).

Related articles

Learn more about wix in one of the following articles