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 16 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
Before you read any further, if you do not intend to add a TargaCalc calculator to a WordPress website, there is a separate implementation guide to help you.
A downloadable PDF of this implentation guide is available at implementation guide to help you.
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%;
display: block;
border: none;
transition: height 0.3s ease-in-out;
margin: 0 auto
}
@media (max-width:575px) {iframe {width: 100%}}
</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.
Adjusting the width
Within the orange styling section of the implementation tag, the width is set to 100% by default. This means that if you place the implementation tag inside a container block (<div> <section> or whatever you are using), it should fill the entire width of your container block.
If you do not intend to add the implementation tag inside a container block, it will expand to fit the width available to it.
You can control the width by changing width: 100%;
to a value which meets your needs.
Just be sure NOT to remove the semi-colon ;
from the end of the line.
Mobile display width
The calculator should display correctly on mobile devices, but if you decide to reduce the width of the iFrame as described above, you might still find it better to leave the width for mobile at 100%:
@media (max-width:575px) {iframe {width: 100%}}
Viewing the calculator in your development environment
Please be aware that your calculator will have been configured to work on the specific domain name of your website.
For reasons explained in more detail the section about Trust & Cross-Domain Security
the height of the iFrame displaying the calculator is controlled by JavaScript which will have been configured to work on your live website.
Therefore, by default, when you view the calculator in your development environment, the height of the iFrame will not change.
However...
If you can advise us of the domain of your development environment (for example http://localhost/
) we should be able to extend the access so that the calculator height control works in both your development area and on your live website.
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.
Your Implementation Questions Answered
How can I get an online quote calculator for my website?
If you already have a website, you could ask your web designer to build you an online calculator.
Some web designers might use an off-the-shelf plug-in if your website has been build using WordPress or some other website builder platform, but if you're fortunate enough to have a web designer who can understand and write code, they might be able to build a bespoke quote calculator for you.
Of course TargaWeb can build you a bespoke cost calculator which can be applied directly to your website, or we could build a calculator on your behalf which your web designer could add to your website.
How can I add a quote calculator to my website?
If you already have a website, you could ask your web designer to build you an online calculator.
Depending on your needs, a bespoke online quote calculator could take anything from 5 days to design and build. However, TargaWeb have streamlined a process which can make customisable calculators quicker and cheaper, with costs starting at just £595, and are usually able to be completed within a couple of days.
How is the cost calculator added to my website?
TargaWeb makes it really easy to add your new calculator to your website. Your web designer will simply need to add a small piece of code so that the calculator can be made visible to visitors of your website.
We can of course help and advise with that process.
Can a calculator be added to more than one website?
In some respects, a TargaWeb calculator can be added to more than one website.
However, it's important to understand that because there is a trust element in the way that we control the height of the parent page iFrame window on your domain based on the individual calculator pages which are hosted on TargaWeb's domain.
Without that trust element being applied between your domain and TargaWeb's domain, there will be no automated control over the iFrame height whilst the calculator is in use.
Can a cost calculator be added to a WordPress website?
Yes. TargaWeb have successfully devised a way for our cost calculators to be applied to WordPress websites.
It isn't difficult, and we can help you by guiding you through the process and testing.
How do I know that my calculator will work?
If you have any doubts that a pricing calculator will work on your website, simply get in touch and ask for the implementation tag to a demo version, and you will also be sent the implementation guide which will take you or your web designer through the simple steps to be taken.
If you are asking whether your specific calculator will work as you intend it to, please remember that it will be design and configured for you based on your requirements and your pricing model, and you’ll also get to test is as many times as you want before it goes live.
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
