How to add a pricing calculator to WordPress

Most pricing calculators (also known as quote calculators, cost estimators, or quote generators) which have been produced by TargaCalc work within an iFrame.

An iFrame is a very well established method of allowing features to display within a web page.

But let’s keep it simple...

You don't need to know all about iFrames, because all you really need to be aware of is how to apply the implementation tag which is described below.

This TargaCalc implementation guide has been written to make the process as smooth as possible, and if you already know how to copy and paste, you'll find this pretty easy!

But we welcome any questions which you might still have after reading this implementation guide, so feel free to ask.

Let’s begin with what we call the implementation tag

Please don't worry if the following piece of code makes no sense to you. You're not expected to understand it, and it's okay if you don't.

So keeping it simple...

You'll receive your own unique TargaCalc implementation tag which is ready to use. We will have already been set it so so it will access your very own pricing calculator, and you won’t need to change a thing!

This is what it will look like...

The following description of the implementation tag has been provided in case you're curious:

Start and End comments (green):

• These two comments do nothing, other than make it clear to anyone who views your website's source code that TargaCalc code sits between these two comments. In other words, they're just notes for reference.

div tag (purple):

• This where the action takes place.
• Your calculator will display from within this div which you can think of like a virtual box which sits on your web pages.

JavaScript (orange):

• This is what makes things happen.
• A JavaScript file which lives on TargaCalc.com is used to display your pricing calculator on your website.
• Your own pricing calculator will be given a unique reference, and this will be used in place of YOURCALC01 which you'll see in the above example.

Unlike some website builders, WordPress does not block iFrames by default, but the method depends on whether your website is using:

• Block Editor (Gutenberg): Use the Custom HTML block and paste in the implementation tag.
• Page Builders (Elementor, Divi, Beaver, etc.): Use their HTML or Code Embed widget and paste in the implementation tag.
• Classic Editor: Switch to the Text tab (not “Visual”) before pasting in the implementation tag.

Therefore, depending on which of the above types of editor you or your web designer are using in WordPress, you simply need to follow the guidelines described above. Then you can locate page and position where you want your calculator to display, and add the implementation tag described above.

Designed to work on your website's domain

For security reasons, your calculator will have been configured to work on the specific domain name of your website.

Testing within your development environment.

If you have an offline development environment for your website, you can advise us of the domain of your development environment. We should then be able to extend access so that your pricing calculator will work correctly on both your live website and also within your development area.

If your development area is simply something like https://www.your-domain.co.uk/wp-admin/ the pricing calculator should still display correctly. But if things don't look like you expect, let us know and help you to get things working.

For the iFrame to automatically resize depending on height (or length) of the calculator’s display area, it will use JavaScript which we host on the TargaCalc platform as part of your pricing calculator code base.

The JavaScript will not only allow automatic resizing of the iFrame, but it will also allow your webpage to automatically scroll to the top of the calculator display, each time the user moves between the selection and results parts of the calculator.

The following information is more likely to be understood by your web developer, but it has been written to make it more generally understandable.

Besides the resizing and scrolling, trust is another very important thing which the JavaScript takes care of.

Because the calculator will be hosted on targacalc.com and displayed within an iFrame on your website, two pieces of JavaScript will have been coded to allow cross-domain communication.

This simply means that your domain will trust targacalc.com, and targacalc.com will trust your domain.

You can apply your TargaCalc pricing calculator to other pages on your website at no additional cost!

This also means that although you will be able to apply your pricing calculator to more than one page on your website, you won't be able to apply it to another website and expect it to work. That's because of the trust aspect described in the previous section.

Compatibility

At time of writing, it is understood that the only place “trust” issues can arise is if the platform strips out iFrames or scripts.

• Self-hosted WordPress.org sites (the majority) have no issue.
• There could be an issue on WordPress.com free/standard plans, which block custom scripts.
• WordPress.com (hosted version) is stricter and may block third-party scripts, but in most cases implementing a TargaCalc calculator onto a WordPress website doesn’t encounter this problem.
• Theme interference: Some WordPress themes (especially heavy page builders) apply extra CSS like to control iFrames, but in most cases this can be overcome with the CSS (styling code) which comes as part of the TargaCalc implementation tag.

Any Questions or Concerns?

If you have any questions or concerns about compatibility and want to be sure that a TargaCalc pricing calculator will actually work on your WordPress website, please get in touch and we will configure a demo calculator for you to try.

This will be completely free of charge!

Of course a demo calculator will not have been configured for your specific business and pricing model, but at least you’ll know whether it would work. It will also give us the opportunity to iron out anything which doesn’t go as smoothly as we would expect it to.