Products >> Consumer Calculators >> Free Calculators >> Instructions

Integration Instructions

To use this free calculator in your own blog or on your own web site, just copy and paste the following html code into your blog post or web site:

<div><iframe src="http://www.calcxml.com/do/sav03?teaser" height="300" width="340" frameborder="0"></iframe><br/><a href="http://www.calcxml.com">CalcXML Financial Calculators</a></div>

Things you can customize for this widget

  • Color
  • Height and Width
  • Border

Color

You can specify a color to use for the title bar, submit button, and some highlights. You can also specify a color to use for the text of the title and submit button. You do this by modifying the iframe src url. You specify the hex color that you want for each of the above mentioned colors. Here is an example that will set to a red and gray color scheme:

<div><iframe src="http://www.calcxml.com/do/sav03?teaser&c=990000&tc=CCCCCC" height="300" width="340" frameborder="0"></iframe><br/><a href="http://www.calcxml.com">CalcXML Financial Calculators</a></div>

Notice the bolded section where c (color) and tc (text color) are specified. Here is what this would look like:

Height And Width

You can control the height and width of the calculator by adjusting the height and width attributes in the iframe tag. Depending on the space available on your web site or blog, you may have to adjust the size of the iframe. Be careful not to make it too small or the layout of the fields may not look well. Here is an example of a larger version of this widget:

<div><iframe src="http://www.calcxml.com/do/sav03?teaser" height="450" width="500" frameborder="0"></iframe><br/><a href="http://www.calcxml.com">CalcXML Financial Calculators</a></div>

Notice the bolded section where the height and width of the iframe are specified. Here is what this would look like:

Border

You can also specify whether you want a border around the iframe by setting the frameborder attribute to some number. The larger the number, the thicker the border.

<div><iframe src="http://www.calcxml.com/do/sav03?teaser" height="300" width="340" frameborder="1"></iframe><br/><a href="http://www.calcxml.com">CalcXML Financial Calculators</a></div>

Notice the bolded section where the frameborder of the iframe is specified. Here is what this would look like:

Get started now.

Sign up