MortgageCalculator.uk Logo.

Free Mortgage Calculator UK Widgets

Would you like to offer your customers the same calculator they can find on our homepage or a calculator you can embed in the sidebar of your site? You are in luck as we offer over a half-dozen different entirely free integration options shown below.


Text Link to Our Site

Why Use It

What It Looks Like

Mortgage Calculator UK

Embed Code

Simply copy the following code to any part of your web page where you want the link to appear.


Text Link to Our Site With Variables

Why Use It

What It Looks Like

Calculate Your Monthly Repayments

Embed Code

Simply copy the following code to any part of your web page where you want the link to appear. Edit the y, r and l values dynamically to match your listings. Y is years, R is interest rate, L is loan amount, HP is home price and DP is deposit.


Logo Link to Our Site

Why Use It

What It Looks Like

MortgageCalculator.UK

Embed Code

Simply copy the following code to any part of your web page where you want the link to appear.

Changing Image Size

The above image is available in 3 different sizes. By default the embed code includes the middel option. You can rename that file from the embed code to one of the other options if you want the logo to appear larger or smaller. The aspect ratio of the logo is slightly higher than 3 wide to 1 tall if you would like to adjust its size.

White Image Background Color

The above images are PNG files with a transparent background color. That helps the logo integration look great on sites with light background colors, but can make it tough to read on websites with dark background colors. We created a second version of each logo with a white background if you would like to embed it in a website with a dark background color.


Logo Link to Our Site With Variables

Why Use It

What It Looks Like

MortgageCalculator.UK

Embed Code

Simply copy the following code to any part of your web page where you want the link to appear. Edit the y, r, l, hp and dp values dynamically to match your listings. Y is years, R is interest rate, L is loan amount, HP is home price, and DP is deposit.

Changing Image Size

The above image is available in 3 different sizes. By default the embed code includes the middel option. You can rename that file from the embed code to one of the other options if you want the logo to appear larger or smaller. The aspect ratio of the logo is slightly higher than 3 wide to 1 tall if you would like to adjust its size.

White Image Background Color

The above images are PNG files with a transparent background color. That helps the logo integration look great on sites with light background colors, but can make it tough to read on websites with dark background colors. We created a second version of each logo with a white background if you would like to embed it in a website with a dark background color.


Full PHP Calculator Embed

Why Use It

What It Looks Like

Embed Code

Simply copy the following code to any part of your web page where you want the link to appear. Edit the y, r, hp, dp and l values dynamically to match your listings. The variables are as follows: hp = home price, dp = deposit, l = loan amount, r = interest rate, y = loan term in years.

The design is responsive & the height on the desktop widget is different for one or two column designs, so choose the correct embed code based on your site layout.

Single Column Design
Two Column Design

Full JavaScript Calculator Embed

Why Use It

What It Looks Like

Embed Code

Simply copy the following code to any part of your web page where you want the link to appear. Edit the y, r, hp, dp and l values dynamically to match your listings. The variables are as follows: hp = home price, dp = deposit, l = loan amount, r = interest rate, y = loan term in years.

The design is responsive & the height on the desktop widget is different for one or two column designs, so choose the correct embed code based on your site layout.

Single Column Design
Two Column Design

Remortgage Calculator Embed

Why Use It

What It Looks Like

Embed Code

The design is responsive & the height on the desktop widget is different for one or two column designs, so choose the correct embed code based on your site layout.

Single Column Design
Two Column Design

Sidebar JavaScript Calculator Embed

Why Use It

What It Looks Like

MortgageCalculator.UK.

Embed Code

Simply copy the following code to any part of your web page where you want the link to appear. Edit the rate, years, value, deposit, and amount values dynamically to match your listings. Rate is the stated loan APR, years is the term of the loan, value is the price of the home, down is the downpayment, and amount is the loan amount.


Embedding Our Calculator in a Wordpress Blog

If you want to embed one of our large calculators in a Wordpress page or post you'll need to disable the visual editor or edit a block as custom HTML and enter the above desired embed code to do so.

If you want to embed our sidebar calculator into your blog then create a custom HTML widget and embed our sidebar code in that widget, then select where you want the widget to display. This page offers a tutorial on integrating a custom widget in Wordpress. The following video also offers a walkthrough on how to do it.


Sizing Issues

How Our Embeds Work

Our full calculator embeds technically embed iframes from our site 3 times and use different CSS media queries to display the correct calculator for desktop, tablets or cell phones while not displaying the other two versions on that particular device.

We offer different embed code options above for sites which using single-column layouts versus sites using two or more columns in their design.

  • The single column layout sets the desktop calculator height to 410 pixels. This works great for single column website designs as the device screen width and column width will roughly approximate to where CSS media queries automatically show the best calculator option to display.
  • The multiple column layout sets the desktop calculator height to 820 pixels. This presumes the column width of the main body content will be narrower than the default 700 pixels our calculator starts as and push the fluid design of the right column lower.
 

Making Further Adjustments

If you would like to adjust the calculator sizes further you can.

Further Customizing Calculator Integration

1

Adjusting Width: By default the calculators set width to 100% of the containing div. You can sex a fixed pixel max-width as well using either of the following options 1.) max-width:688px;widtht100% 2.) max-width: 90%; width 688px;

2

Adjusting Height: If you are having any trouble with sizing or whitespace in your design you can adjust the height="410px" portion of the code to adjust it to your site's needs. Further, you can adjust the width breakpoints for the CSS media queries for determining when each iframe shows.

3

Fixed Height: Finally, if you want to have the calculator appear in a limited fixed height across device types you can remove scrolling="no" from the iframe embed codes.

 

 

Check Out All of Our Free Online Calculators

Widgets | Affordability | Amortisation | Overpayment | Remortgage | About

Do you have feedback or questions? Email us

© 2019 — 2021 MortgageCalculator.UK — All Rights Reserved