An embeddable component that offers real-time personal loan simulations
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: |
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 [email protected] and include the following information:
- A short description of your business
- The main reason whyyou want to use the widget
- 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
companyquery 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.
