Free Calculators - Integration Instructions

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="https://www.calcxml.com/do/sav06?teaser&c=990000&tc=CCCCCC" height="300" width="340" frameborder="0"></iframe><br/><a href="https://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="https://www.calcxml.com/do/sav06?teaser" height="450" width="500" frameborder="0"></iframe><br/><a href="https://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="https://www.calcxml.com/do/sav06?teaser" height="300" width="340" frameborder="1"></iframe><br/><a href="https://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: