Excel Skills | Tax Calculator Setup

Calculator Code

Step by step guidance on how to add our income tax calculator plugin to your website.

Step 1 : Register for a free account

Before you include the calculator code on your website, you need to register for a free account.

Step 2 : Add the calculator code

Copy the code in the text box below and paste it into your website code on the page(s) where you want to include the calculator.

<div class="taxcalc-excelskills"><iframe src="https://www.excel-skills.com/tax-calc-za.php"></iframe></div>

The div container around the iframe code is included to set the proper height and width of the iframe.

Step 3 : Add the calculator styles

Copy the CSS styles in the text box below and paste it into header section of the page.

<style>
/* style sheet for income tax calculator */
.taxcalc-excelskills {
/* set to same color as calculator bg */
	background-color: #FFFFFF;
	position: relative;
  	overflow: hidden;
  	padding-top: calc((16px * 51) + 800px);
}
.taxcalc-excelskills iframe {
/* set to same color as calculator bg */
	background-color: #FFFFFF;
   	position: absolute;
   	width: 100%;
   	height: 100%;
   	top: 0;
   	left: 0;
   	border: 0;
}
</style>

Note the padding-top calculation in the first style - it is based on the default font size of 16px. If you change the font size, you also need to change the 16px in the calculation to the new font size so that the height of the iframe is automatically adjusted.

You can also add the styles to an existing style sheet if one is already applied to your website.

Done!

That's it, our calculators can be added to your website in three easy steps! Once you have completed the above steps, you can log into our interface and change the default colour settings to match your website colour scheme.

Main Setup Panel