The Freo Loan Calculation Widget is an embeddable user interface component. It enables partners to offer real-time personal loan simulations in their own applications.

End users can enter a loan amount and loan duration. The widget then shows estimated monthly payments and key financial details.

The widget uses an inline frame (iframe). An iframe is an HTML element that embeds and displays content from another webpage within the current webpage, enabling users to view external content without leaving the page..This approach provides a simple integration method and keeps the widget separate from the partner application.

This document provides instructions for integrating the Freo Loan Calculation Widget into your website using an iframe.

Working with Rabobank

To integrate the Freo Loan Calculation Widget successfully, your organization must meet the following prerequisites:

A medium to high level of automation maturity.
A professional IT environment with a reliable infrastructure.

Widget Functionality

The Freo Loan Calculation Widget provides the following capabilities.

Loan Simulation

Users can:

Enter a loan amount in euros.
Select a loan duration in months.

The widget displays:

The estimated monthly payment
The applicable interest rate
The total repayment amount

Real-Time Updates

The widget dynamically updates all calculations when the user submits an input or selects Recalculate. No page reload is required, ensuring a smooth and responsive user experience.

Pre-configuration

The widget supports pre-configuration through URL parameters.

Currently, the widget requires one URL parameter:

Parameter

Required

Description

company

Yes

Company name

Example:https://www.freo.nl/freo-calculation-widget?company=CompanyName

Getting started

Onboarding and Access

Before you integrate the Freo Loan Calculation Widget, complete the following steps:

Read the information about partnering with Freo
Make sure that Freo has formally onboarded your organization.
Send an email to fm.nl.fastleen@rabobank.nl and include the following information:
1. A short description of your business
2. The main reason whyyou want to use the widget
3. The domain name(s) where you want to place the widget
Wait for approval from Freo.

After approval, Freo sends a confirmation email. You can start the implementation after you receive this confirmation.

This process ensures proper access, configuration, and support for your implementation.

Implementation

You can embed the Freo Loan Calculation Widget only by using an iframe.

Add the iframe to one or more pages on your organization’s website. A qualified developer should perform the integration to ensure correct and reliable operation.

👍
Use the company query parameter. This parameter is required and must contain your company name.

Recommended Dimensions

Set the maximum width to 800px.

At a width of 800px, use a height of 1320px to display the widget without a scrollbar.

Maintain an aspect ratio of 800 / 1320 for responsive scaling.

❗️
Important: The “Geld lenen kost geld” banner is legally required. Keep the banner fully visible at all times. Do not hide, crop, or obscure the banner in any way.

Basic Integration

The following example shows the minimum setup required to embed the Freo Loan Calculation Widget.

Without additional styling, the widget may not scale correctly. It may also show scrollbars.

<iframe
  src="https://www.freo.nl/calculation-widget-freo?company=[COMPANY_NAME]"
  title="Freo Loan Calculation Widget"
  loading="lazy">
</iframe>

Responsive integration (recommended)

Use the following responsive integration method for the best result.

Place the iframe in a parent container. Set the parent container to a maximum width of 800px and an aspect ratio of 800 / 1320.

This setup helps the widget scale reliably across different screen sizes and platforms.

<div style="max-width: 800px; margin: 0 auto; aspect-ratio: 800 / 1320;">
  <iframe
    src="https://www.freo.nl/calculation-widget-freo?company=[COMPANY_NAME]"
    title="Freo Loan Calculation Widget"
    loading="lazy"
    style="width: 100%; height: 100%; border: none;">
  </iframe>
</div>

Get in touch

Contact us to connect with Freo.