Services > Carbon Calculators > Custom Carbon Calculator > Integration
This page explains how to embed the Custom Carbon Calculator into a commercial website or corporate intranet.
Each custom version of the calculator comes with a test instance and a production instance. Using the control panel, you can make changes to the configuration of the test instance, which will be updated immediately. When you are satisfied with your changes, you can publish them to the production instance.
This page uses the "Integration" version of the calculator for demonstration purposes. This is a special version that can be embedded within any website to check the integration process. All other versions of the calculator are licensed to a single web page and will not work if embedded in another web page.
If you would like to commission your own version of the Custom Carbon Calculator, please contact us with the URLs of the pages on your website where you have successfully embedded the test and production instances of the Integration version.
When your custom version is ready, you can change the web addresses in the code below to replace Integration with the name of your version.
The test instance should be embedded on a page that is not normally accessible to your visitors. This can be a hidden page on your main website, or in a page on the test environment for your website. If you do not have a suitable page to embed your test instance, we can provide a test page for you.
Add the iframe code below into the HTML of the page where you want to embed the test instance of your calculator. If you are using a content management system (CMS) to update your website, make sure you add the code in HTML mode (the "Text" tab in WordPress), and not in Content mode (the "Visual" tab in WordPress). If you are in any doubt about how to add HTML to your website, please contact your web developer.
<iframe src="https://test.customcarboncalculator.com/Integration" referrerpolicy="no-referrer-when-downgrade" style="border: 0; width: 100%; height: 600px;"></iframe>
You can change the height to suit your website, but at least 500px is recommended.
You can set a fixed width if required, but if your website adapts to suit a variety of screen sizes it is better to set the width to 100% and let the iframe fill its container.
If you have added the iframe code correctly you should see the test instance of the calculator as shown here (with the "Test Version" watermark).
The production instance should be embedded on the page on your website where you want visitors to calculate their carbon emissions.
Add the iframe code below into the HTML of the page where you want to embed the production instance of your calculator.
<iframe src="https://www.customcarboncalculator.com/Integration" referrerpolicy="no-referrer-when-downgrade" style="border: 0; width: 100%; height: 600px;"></iframe>
If you made any changes to the height and width of the test instance, you should make the same changes to the production instance.
The referrerpolicy attribute enforces the default behaviour of passing the full holding page address to the calculator as a referrer. This is important to ensure that users who have chosen custom browser security settings can still access the calculator.
If you have added the iframe code correctly you should see the production instance of the calculator as shown here (without the watermark).