Embedding your calculator on a Wordpress website

Learn how to embed a calculator on your Wordpress website

Preferred method

  1. Make sure are on your website's admin area, navigate to plugins and click on the "Add new" button.
  2. Search for the plugin "ConvertCalculator", click on "Install now" and when it's installed on "Activate".*
  3. Activate the plugin through the "Plugins" menu in WordPress
  4. Insert a shortcode into the page or post content like this [convertcalculator id="CALC_ID"].

NB. Replace CALC_ID with your unique Calculator ID which you can find in the Install tab in the Calculator Editor.

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

Alternative Methods

There are times when you don't want or can't use a shortcode to display your calculator. Here is what you can do:

1. Manual Embedding

Follow the following instructions:

  1. Go to the editor of the calculator you want to embed on https://app.convertcalculator.co
  2. Navigate to the install tab via the menu placed in the top-right of the screen.
  3. Select "other" for a platform
  4. Copy/paste the embed code that appears in the screen.
  5. Go to the page or post in your WordPress website via the WP Admin
  6. Find the option "Edit as HTML" and paste the embed code on the place where you want the calculator to appear.

NB. Make sure you disabled the ConvertCalculator plugin before you manually embed the calculator.

2. Plugin Function

If you are a developer, and have access to your WordPress theme PHP files, you can use the following function in PHP to display the calculator:

php
<?php
  convertcalculator_add_calculator(CALC_ID)
?>

NB. Replace CALC_ID with your unique Calculator ID which you can find in the Install tab in the Calculator Editor.

This method gives you a lot more freedom in where to display the calculator.

Troubleshooting

Still having trouble installing the calculator on your WordPress website? Follow the following steps:

  1. Make sure you tried the "Preferred Method" and "Manual Embedding Method".
  2. Before going to step 3, temporarily disable other third-party plugins to make sure the issue isn't caused by something else.
  3. Send this page + your Calculator ID (found in the Install tab) to your web designer so they can debug the issue.
  4. If your web designer can't find the issue, please ask if they can contact the ConvertCalculator support team via support@convertcalculator.co

Issues due to a WordPress plugin caching our embed code

In cases where the embed code has changed after an update, the calculator can stop working. In order to fix this, make sure you either disable the plugin that's caching the external scripts or make sure our script (https://scripts.convertcalculator.com/embed.js) is not cached. In order to find out which plugin is causing the issue, disable plugins one by one and refresh the page. When you've found the plugin, exclude our domain from caching (*.convertcalculator.com).

ConvertCalculator Icon