How to add a quote calculator to your website
This implementation guide will show you how to add a TargaCalc pricing calculator to your website.
Last updated: January 15 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 your website
Before you read any further, if you intend to add a TargaCalc calculator to a WordPress website, there is a separate WordPress 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 assumption could be made that you’re familiar with iFrames, how they work and what they can do. But it’s not essential that you’re completely familiar with 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 written to make the process as smooth as possible, without the need for a lot of technical knowledge or development experience, but we welcome any questions which you might still have after reading this implementation guide.
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 into your website
In most cases, adding the TargaCalc iFrame to your website should be as straightforward as copying and pasting the implementation tag in the location you want the calculator to display.
Exactly where you display it is up to you, but here are some tips to help you.
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
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 £425, 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
