Hypofriend Mortgage Widget

Thank you for choosing to add the Hypofriend Mortgage Widget to your page. The widget has been built to be fully responsive, allowing the user to interact with the widget on their phone, tablet or computer. The widget supports all modern browsers (see below for further information).

Demo

Widget Props

Set the default language

Financial type

Postcode

Repayment rate

Property price

Savings

Property value

Remaining loan amount

Payout date

Default commission

Tracking ID

Skip calculation

Skip the calculation and display contact form

Enable Testing mode

(Testing mode disables emails from being submitted.)

How to add the widget to your website

You are able to add the Hypofriend Widget Calculator to your website in two easy steps

Step 1: It is recommended to add the JavaScript asset into the <head> element, located at the beginning of your page.

html

Add the JavaScript asset to your <head> element.

Step 2: Add the hypofriend-calculator HTML element into your main page.

html

Please ensure you add the opening and closing tags.

We highly recommended that you wrap the element in a container, so it fits within the look and feel of your page. Otherwise the widget may take up 100% of the page width.

html

Example of adding the widget to your existing container structure.

What does the widget do

The widget enables the user to calculate possible mortgage options and determine how much they can afford. It also allows the customer to directly contact Hypofriend, so we are able to know where they contacted us, and follow up with them to ensure we find them the best mortgage.

Enabling testing mode

When you submit the form, this will submit a new lead to us. So we have enabled the testing mode by default in our example above. This will help us from getting mocked lead. When you add the widget to your page, and you want to test it out, we please ask you to enabled testing as a attribute on the widget.

html

Adding testing prop to the widget stops the lead from being created.

Customising the widget

In order to best support your unique needs, we enable you to customise the widget for your situation. You can play around with the different props in the demo above. You can view the to see how to set how to set props within the widget.

Name	Type	Default	Description
locale	enum	de	Sets the default language of the widget. The language can be changed by the user via the language switch. options: `[ "en", "de" ]`
financial-type	enum	purchase	Used to set what type of calculations will be done options: `[ "purchase", "refinancing" ]`
property-price	number\|string	400000	Sets the default property price. Used in the "purchase" calculation.
down-payment	number\|string	60000	Sets the default down payment. Used in the "purchase" calculation.
commission	number\|string	0.00	Sets the default commission. The commission value can be set between 0 and 3.57. Used in the "purchase" calculation.
property-value	number\|string	400000	Sets the default property value. Used in the "refinancing" calculation.
remaining-loan-amount	number\|string	40000	Sets the default remaining loan amount. Used in the "refinancing" calculation.
payout-date	string	undefined	Selects the payout date that is pre-selected in the drop down. The format is 01/MM/YYYY eg: `"01/10/2022"`. Used in the "refinancing" calculation.
repayment	number\|string	undefined	Sets the repayment rate, whith an interval steps of 0.5. Minimum is 1, maximum is 5. Used in both the "refinancing" and "purchase" calculation.
postcode	number\|string	undefined	Sets the default postcode. The postcode must be a German postcode, consisting of 5 digits. Used in both the "refinancing" and "purchase" calculation.
tracking-id	string	undefined	Adds a unique tracking ID, which will be used when saving where the lead comes from. This is stored along side the domain name / `hostname`
skip-calculation	boolean	false	When enabled, no submission to the API to calculate the mortgage information is submitted. Instead we skip right to the contact form.
testing	boolean	false	When enabled mode is enabled, the lead will not be submitted

Capturing emitted event on form submission

Once a user has gone through the funnel, an function is called, which can be set on the main page that the widget is embeded on, allowing you to use this as a way to trigger your own code. For example, this can be used to fire an analytic event.

html

How to capture the emitted event once the lead has been created.

What browsers does the widget support

We support all modern browser on Windows 10, Mac OS, iOS and Android. This includes Microsoft Edge, Safari, Chrome and Firefox. We do not support Internet Explorer 11, as Microsoft has set the browser for retirement in August, 2021 .

Understanding our data policy for you and your customers

We have automatically included a link to our privacy policy as part of the user consent checkbox, which directs users to our policy page. The widget is not storing any cookies on your page, so it is not necessary for you to include a separate clause in your privacy policy.

To inform us about any potential bugs

Please reach out to info@hypofriend.de about any bugs or problems you encounter with your widget. In your email, please provide the following information to help us best tackle the bug:

Browser, and if possible, what version it is
Operating system
Device: mobile or desktop
How can we reproduce the problem you're experiencing? What steps do we need to take?