How to Install the Rate Widget

Hi there! Thanks for showing interest in the SuperBrokers.ca mortgage rate widget.

Let's get to it. To add a widget to your website, ask your webmaster to add the following code to your HTML page. Or, if you're feeling particularly adventurous, you can do it yourself.

If you've used the widget designer to create your own widget, use the code at the bottom of that page instead of the one below. 

<script type="text/javascript" src="//www.superbrokers.ca/api/widgets/mortgage-rates/ratebox-calc.js.php"></script>
<div class="sbwidget-container"></div>

That's it! You're done. Hopefully this wasn't too confusing, but If you feel like our canine friend here, contact us and we'll try to help you install the script.

Advanced Options

This section is for web developers. It's a little technical, so steer clear if you don't know much about HTML

By default, you place the following code:

<script type="text/javascript" src="//www.superbrokers.ca/api/widgets/mortgage-rates/ratebox-calc.js.php"></script>
<div class="sbwidget-container"></div>

Any options you need to change will go on the second line. For example, if you want to set the width to 250 pixels, you would change the second line of code to read:

<div class="sbwidget-container" data-width="250px"></div>

If you want to set the width to 250 pixels AND have it only show the 3 and 5 year mortgage rates, you would change the code to read:

<div class="sbwidget-container" data-width="250px" data-rates="y3,y5"></div>

If you want to change multiple options, it can get a little hard to read them all smushed together on one line, so it may be easier for you to spread that line of code into multiple lines like so:

<div class="sbwidget-container" 
  data-width="250px"
  data-rates="y3,y5" 
></div>

The above snippet will produce the exact same widget, but it will be a whole lot easier to make changes.

For fun, here's a code snippet with ALL the options stuffed in there.

<div class="sbwidget-container"
  data-width="auto"
  data-height="400px"
  data-widgettype="mortgagecalc,ratebox"
  data-template="default"
  data-rates="variable,m6,y1,y2,y3,y4,y5,y7,y10"
  data-colors="#FEFEFE,#7B6F4B,#9F8F7F,#FEFEFE,#F9F9F9,#F9F9F9,#F4F4F4,#DDDDDD,#FF0000"
  data-style="border: 1px solid #DDD; border-radius: 4px;"
></div>

List of Options

You can change the following options on your widget:

Width and Height

Changes the width and height of the widget. Can be a number, percentage, px, or em. Max width is 400. Default width is 100%. The height option acts as a "minimum" height. If the content of the widget grows, the widget itself will grow (no scrollbars).

Widget Type

You can choose to show a ratebox, a mortgage calculator or both. If you put both, the widget will display the first one entered, with a switch to go to the other widget type.

Template

Tells the script which template to load. Default is "default".

Rates

Changes which mortgage rates show up, and their order. "variable" will show the current variable mortgage rate, "m6" will show the 6 month closed mortgage rate, "y1" through "y10" will show the respective mortgage rate for a given yearly length.

Colors

Changes colors used on certain templates so that the widget will fit with your website's design. Must be a Hex value or the name of the color #F00, red, etc.

Style

Adds inline styles to the div containing the widget iframe, but you won't actually affect anything inside the iframe.

Note: Depending on the template chosen, the colors may not be changeable.