How to add a pricing calculator to WordPress
This implementation guide will show you how to add a TargaCalc pricing calculator to a WordPress website.
Last updated: January 14 2026
Page Navigator
Use the links below to quickly access sections of the page which are most relevant to you.
Adding a Quote Calculator to a WordPress Website
Most pricing calculators (also known as quote calculators, cost estimators, or quote generators) which have been produced by TargaWeb 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…
The more technical aspects of how an iFrame works can be found further down this document if you need them, but we realise that most people who use WordPress for their websites are not experts in code.
We have therefore written this TargaCalc implementation guide to make the process as smooth as possible, without the need for a lot of technical knowledge or development experience.
The TargaCalc Implementation Tag
Let’s begin with what we call the implementation tag
To many of you, the following piece of code will make no sense at all. But the good news is that you don’t need to understand it, and you won’t need to change a thing!
That’s because you will receive a unique TargaCalc implementation tag which is ready to go, and will have already been set up by us at TargaWeb to access your very own pricing calculator.
<!-- TargaCalc iFrame start -->
<style>
iframe {width: 100%;border: none;transition: height 0.3s ease-in-out}
</style>
<iframe>
id="child-frame"
src="https://www.targacalc.com/calcs/your-unique-calculator.php">
</iframe>
<script>
const iframe = document.getElementById('child-frame');
window.addEventListener('message', (event) => {
if (event.origin !== "https://www.targacalc.com") return;
const { height, scrollToIframe } = event.data;
const iFrameHeight = height + 28;
if (height) {
iframe.style.height = `${iFrameHeight}px`;
}
if (scrollToIframe) {
const iframeTop = iframe.getBoundingClientRect().top + window.scrollY;
window.scrollTo({
top: iframeTop - 150,
behavior: 'smooth'
});
}
});
</script>
<!-- TargaCalc iFrame end -->
Explaining the implementation tag
Don't worry if you don't understand any of what you have just seen, but in case you’re curious, the three main sections of the implementation tag are as follows:
Styling (orange):
- This simply controls the initial display of the iFrame in which your calculator will appear.
iFrame tag (green):
- This is the HTML tag for your iFrame, which includes the unique location of your calculator (red).
JavaScript (purple):
- Because each section of your calculator will vary in height, this piece of JavaScript allows each section to adjust the height of the iFrame as you or your potential customers use the calculator.
Embedding the TargaCalc iFrame in WordPress
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.
Automatic Resizing
For the iFrame to automatically resize depending on height (or length) of the calculator’s step/page, it will use the JavaScript which will be supplied as part of your unique implementation tag, as shown above:
<script>
const iframe = document.getElementById('child-frame');
window.addEventListener('message', (event) => {
if (event.origin !== "https://www.targacalc.com") return;
const { height, scrollToIframe } = event.data;
const iFrameHeight = height + 28;
if (height) {
iframe.style.height = `${iFrameHeight}px`;
}
if (scrollToIframe) {
const iframeTop = iframe.getBoundingClientRect().top + window.scrollY;
window.scrollTo({
top: iframeTop - 150,
behavior: 'smooth'
});
}
});
</script>
This code will work in conjunction with the JavaScript which be embedded into your very own calculator, which will be hosted and managed on our side.
It 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.
Trust & Cross-Domain Security
Besides the resizing and scrolling, there is another very important thing which the JavaScript takes care of…
TRUST
Because the calculator will be hosted on targacalc.com but displayed within an iFrame on your website, two pieces of JavaScript will have been coded to allow cross-domain communication
This simply means that the JavaScript which will have been applied to your website as part of the implementation tag shown above, will need to trust
any request for the calculator to adjust the size of the iFrame on your website.
That is the purpose of the line highlighted in red, below.
<script>
const iframe = document.getElementById('child-frame');
window.addEventListener('message', (event) => {
if (event.origin !== "https://www.targacalc.com") return;
const { height, scrollToIframe } = event.data;
const iFrameHeight = height + 28;
if (height) {
iframe.style.height = `${iFrameHeight}px`;
}
if (scrollToIframe) {
const iframeTop = iframe.getBoundingClientRect().top + window.scrollY;
window.scrollTo({
top: iframeTop - 150,
behavior: 'smooth'
});
}
});
</script>
But remember, you won’t need to touch this, because it will already have been set up for you.
The other part of the cross-domain
process is that the JavaScript which will have been embedded on your unique calculator will contain a reference to your specific domain (website’s address)
Without that cross-domain
communication, there would be no way for your pricing calculator to work correctly on your website. But that’s a good thing, because it provides security against unwanted control from other sources which do not have explicit permission to interact with your website.
This also means that although you will be able to apply the calculator implementation tag to more than one page on your website, you won’t be able to apply the calculator implementation tag to another website and expect it to work.
Notes
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 Doubts or Concerns?
If you have any doubts or concerns, or you simply want to confirm that a TargaCalc calculator will work on your 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, and would also give us the opportunity to iron out anything which doesn’t go as smoothly as we would expect it to.
Any Questions?
If you have any questions, we’d love to hear from you:
Either use the secure form on the right, or you can simply email, phone or book a 30 minute slot in the calendar for an obligation free chat:
Simply email, phone or use the secure form below, or book a timeslot in the calendar:
info@targaweb.com
01406 373511
07564 372222
