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
- Text Link With Variables
- Logo Link to Our Site
- Logo Link With Variables
- PHP Full Calculator
- JavaScript Full Calculator
- Remortgage Calculator
- Sidebar JavaScript Calculator
- Embedding Our Calculator in a Wordpress Blog
- Sizing Issues for Full Calculator Embeds
Text Link to Our Site
Why Use It
- Easy: This is the easiest way to insert calculator functionality into your site without having to worry about fussing with the web design.
- Cost Free: By default the code sets links to open in a new window, so you keep your visitors on your website.
- Absolutely Free Upgrades: As we add new features to our main calculator, your visitors automatically get our newest and best features free.
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.
Text Link to Our Site With Variables
Why Use It
- Easy: This is the easiest way to insert calculator functionality into your site without having to worry about fussing with the web design.
- Cost Free: By default the code sets links to open in a new window, so you keep your visitors on your website.
- Absolutely Free Upgrades: As we add new features to our main calculator, your visitors automatically get our newest and best features free.
- Personalized: This code allows you to include the loan amount, loan term in years, and interest rate automatically. As soon as your customers click the link they will automatically see what their monthly payments will need to be without having to re-renter loan terms. Simply set the rate to your current rate available, the loan term to a common loan term (like 25 years) and then multiply the home price by 90% or 95% to allow them to calculate 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
- Easy: This is the easiest way to insert calculator functionality into your site without having to worry about fussing with the web design.
- Cost Free: By default the code sets links to open in a new window, so you keep your visitors on your website.
- Absolutely Free Upgrades: As we add new features to our main calculator, your visitors automatically get our newest and best features free.
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.
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.
- Large: mortgagecalculatoruk.png is 600 pixels wide by 204 pixels tall
- Medium: mortgagecalculatoruksmall.png is 300 pixels wide by 102 pixels tall
- Small: mortgagecalculatorukmini.png is 150 pixels wide by 51 pixels tall
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.
- Large: mortgagecalculatorukwhite.png is 610 pixels wide by 214 pixels tall
- Medium: mortgagecalculatoruksmallwhite.png is 305 pixels wide by 107 pixels tall
- Small: mortgagecalculatorukminiwhite.png is 153 pixels wide by 54 pixels tall
Logo Link to Our Site With Variables
Why Use It
- Easy: This is the easiest way to insert calculator functionality into your site without having to worry about fussing with the web design.
- Cost Free: By default the code sets links to open in a new window, so you keep your visitors on your website.
- Absolutely Free Upgrades: As we add new features to our main calculator, your visitors automatically get our newest and best features free.
- Personalized: This code allows you to include the loan amount, loan term in years, and interest rate automatically. As soon as your customers click the link they will automatically see what their monthly payments will need to be without having to re-renter loan terms. Simply set the rate to your current rate available, the loan term to a common loan term (like 25 years) and then set the home value, loan price and deposit based on your average downpayment percent and the home value of the listing.
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, 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.
- Large: mortgagecalculatoruk.png is 600 pixels wide by 204 pixels tall
- Medium: mortgagecalculatoruksmall.png is 300 pixels wide by 102 pixels tall
- Small: mortgagecalculatorukmini.png is 150 pixels wide by 51 pixels tall
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.
- Large: mortgagecalculatorukwhite.png is 610 pixels wide by 214 pixels tall
- Medium: mortgagecalculatoruksmallwhite.png is 305 pixels wide by 107 pixels tall
- Small: mortgagecalculatorukminiwhite.png is 153 pixels wide by 54 pixels tall
Full PHP Calculator Embed
Why Use It
- Easy: Rather than using obscure JavaScript codes to resize iframe windows, the following code embeds the calculator 3 separate times then relies on industry standard CSS media queries to show whichever one is appropriate for the browser width while hiding the others. You get responsive layout which works across all device types.
- Cost Free: By default the code sets links to open in a new window, so you keep your visitors on your website.
- Absolutely Free Upgrades: As we add new features to our main calculator, your visitors automatically get our newest and best features free.
- Hybrid Feature Set: This calculator blends the best aspects of PHP and JavaScript. When users change any inputs the calculation automatically updates to reflect their new loan terms. If they click on the calculate button that will send them to the homepage of this website in a new tab where they can see amortisation tables, charts and graphs.
- Personalized: This code allows you to include the loan amount, loan term in years, and interest rate automatically. As soon as your customers click the link they will automatically see what their monthly payments will need to be without having to re-renter loan terms. Simply set the rate to your current rate available, the loan term to a common loan term (like 25 years) and set the down payment amout to 10% of the home value for a common down payment amount. The variables are as follows: hp = home price, dp = deposit, l = loan amount, r = interest rate, y = loan term in years.
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
- Easy: Rather than using obscure JavaScript codes to resize iframe windows, the following code embeds the calculator 3 separate times then relies on industry standard CSS media queries to show whichever one is appropriate for the browser width while hiding the others. You get responsive layout which works across all device types.
- Instant Calculations: Whenver your users update any variable it automatically calculates their new monthly payment, making it easy for them to quickly compare many loan scenarios.
- Keep Visitors on Your Site: Since results appear automatically, visitors do not have to leave your website when they calculate payments.
- Personalized: This code allows you to include the home price, down payment, loan amount, loan term in years, and interest rate automatically. As soon as your customers click the link they will automatically see what their monthly payments will need to be without having to re-renter loan terms. Simply set the rate to your current rate available, the loan term to a common loan term (like 25 years) and set the down payment amout to 10% of the home value for a common down payment amount. The variables are as follows: hp = home price, dp = down payment, l = loan amount, r = interest rate, y = loan term in years.
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
- Easy: Rather than using obscure JavaScript codes to resize iframe windows, the following code embeds the calculator 3 separate times then relies on industry standard CSS media queries to show whichever one is appropriate for the browser width while hiding the others. You get responsive layout which works across all device types.
- Instant Calculations: Whenver your users update any variable it automatically calculates their new monthly payment, making it easy for them to quickly compare many loan scenarios.
- Keep Visitors on Your Site: Since results appear automatically, visitors do not have to leave your website when they calculate payments.
- Personalized: This code allows you to include the old loan balance, equity withdrawal, loan amount, loan term in years, and interest rate automatically. As soon as your customers click the link they will automatically see what their monthly payments will need to be without having to re-renter loan terms. Simply set the rate to your current rate available, the loan term to a common loan term (like 25 years) and set the down payment amout to 10% of the home value for a common down payment amount. The variables are as follows: hp = old loan balance, dp = equity withdrawal, l = loan amount, r = interest rate, y = loan term in years.
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
- Easy: The small size of this calculator makes it mobile responsive by default, so you do not have to worry about it having an adverse impact on your website layout.
- Instant Calculations: Whenver your users update any variable it automatically calculates their new monthly payment, making it easy for them to quickly compare many loan scenarios.
- Keep Visitors on Your Site: Since results appear automatically, visitors do not have to leave your website when they calculate payments.
- Personalized: This code allows you to include the loan amount, loan term in years, and interest rate automatically. As soon as your customers click the link they will automatically see what their monthly payments will need to be without having to re-renter loan terms. Simply set the rate to your current rate available, the loan term to a common loan term (like 25 years) and then multiply the home price by 90% or 95% to allow them to calculate it. The variables in the embed code are self-explanitory.
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 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 set a fixed pixel max-width as well using either of the following options 1.) max-width:688px;width:100% 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 — 2024 MortgageCalculator.UK — All Rights Reserved
