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.
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.
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:
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).
- Ex. data-width="100%" or data-width="auto"
- Ex. data-height="400px"
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.
- Ex. data-widgettype="mortgagecalc" or data-widgettype="mortgagecalc,ratebox"
Tells the script which template to load. Default is "default".
- Ex. data-template="default" or data-template="defaultNoLogo"
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.
- Ex. data-rates="variable,m6,y1,y2,y3,y4,y5,y7,y10"
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.
- Ex. data-colors="red,orange,#FF0000"
Adds inline styles to the div containing the widget iframe, but you won't actually affect anything inside the iframe.
- Ex. data-style="border: 1px solid black; border-radius: 15px;"
Note: Depending on the template chosen, the colors may not be changeable.