# Mortgage Quoting System

Our Mortgage Quoting System widget is our flagship product. This enables you to add mortgage quoting into your website to allow for instant, tailored mortgage quotes for your visitors/clients.

Our goal for this system is to enable you with high-quality leads, engage your website visitors with interactive features to increase their time on site, and provide them with access to a wide range of mortgage information.

[**View a demo**](https://my.mortgage-quote.me/65c0eddeb8cb1a1fbaa58b0f)

## How it works

Our mortgage quoting system will be embedded into your site to allow your visitors to get quick, indicative mortgage quotes. Firstly, they will be asked a variety of questions in order for our system search for plans which suits their requirements.

<figure><img src="https://1351999126-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq0RXXtGhH8CMBZU5Tone%2Fuploads%2FBTVdvOvSMbfm7kRjd4H2%2Fmq-questions.png?alt=media&#x26;token=246cd227-30a5-4d4e-9ee5-6c8b0b92cf0e" alt=""><figcaption><p>Mortgage Quoting System questions</p></figcaption></figure>

After a visitor has answered all the questions, they are prompt to enter their **name, email address and phone number** as well as accept a **privacy policy** and **contact preferences** to keep compliance happy.

<figure><img src="https://1351999126-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq0RXXtGhH8CMBZU5Tone%2Fuploads%2FrwMRY6sAOeEQ4pktdx0v%2Fmq-customer-details-form.png?alt=media&#x26;token=6d59d859-d4a1-4d52-ad5f-3da507e9eb3d" alt=""><figcaption><p>The customer details form for the Mortgage Quoting System.</p></figcaption></figure>

Our system compares the questions answered with over 10,000+ mortgage products from 90+ lenders and outputs up to 10 of the top plans that best suits the client.

<figure><img src="https://1351999126-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq0RXXtGhH8CMBZU5Tone%2Fuploads%2FzLXrSy8K06Tqk8HWLL68%2Fmq-results.png?alt=media&#x26;token=55ca0ce6-2f94-4ca3-9aa6-e18a7d7a3a2d" alt=""><figcaption><p>Demo website to demonstrate Mortgage Quoting System results.</p></figcaption></figure>

During this search, the client's details are added to the a micro CRM which allows you to view the quote details. As well as this, you will also receive a client report on the hour which contains a csv file with a list of newly completed quotes.

<figure><img src="https://1351999126-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq0RXXtGhH8CMBZU5Tone%2Fuploads%2F0BZ6VBKVKkdKxO3sllCJ%2Fmq-quote-details.png?alt=media&#x26;token=ddbf4e90-3219-434a-9540-d8e0e61311d5" alt=""><figcaption><p>Quote details in the MortgageQuote account</p></figcaption></figure>

## Embedding into your website

Embedding the quote widget into your website is straightforward. Simply generate the code snippet and insert it into the HTML of your website where you want the widget to appear. Be sure to test the widget to ensure it functions correctly and blends visually with your site's design. Adjustments can be made at any time via the customisation options to better fit your requirements.

If you're unsure as to how to add the code into the HTML of your website, or need to check if the widgets work with you web platform, view the [widget embedding guide](https://mortgagequote.gitbook.io/mortgagequote-guides/guides/embedding-widgets).

### Generating the code snippet

There are two ways you can generate the code for this widget. Once logged in...

1. …on the [dashboard](https://app.mortgage-quote.me/dashboard) will be a line of code in the code snippet card.
2. ...in the [Quoting Styles](https://app.mortgage-quote.me/dashboard/whitelabel) page, find the "View Code" button. A modal should appear with the code inside ready to be copied.

The code will look similar to this.

```atom
<script
    async
    id="mortgageplanlist"
    src="https://frontend.mortgage-quote.me/calculators/mq/mq.js?id=123456789">
</script>
```

### Selecting a quote type

To focus the quoting system on either residential or buy-to-let mortgages, use the "Select a Quote Type" dropdown in each code snippet to choose the mortgage type.

## Customisation

The quoting system is highly customisable, allowing you to tailor it to your brand and website. Choose from a range of colours, fonts, and layouts to ensure that it seamlessly integrates with your existing website design.

### Customising the widget

To begin customisation, once logged in, navigate to [Dashboard > Quoting Styles](https://app.mortgage-quote.me/dashboard/whitelabel)

On this page you are able to customise a variety of elements on the quote widget, for example the colours, font size, border radius, shadows etc. Once you have settled on the styles, don't forget to click the "Save Changes" button. The styling should update on the next refresh of the widget on the website the widget is embedded into.

<figure><img src="https://1351999126-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq0RXXtGhH8CMBZU5Tone%2Fuploads%2FUxfXQRmUuNWMLr555bGl%2Fmq-customisation.png?alt=media&#x26;token=bc91e89a-96e7-4a90-8f62-b6f09e158c7d" alt=""><figcaption><p>Quote widget customisation page</p></figcaption></figure>

### Transparent colours

To make a colour transparent, click on it to open the colour picker. In the hex colour input box, click the black-and-white square icon on the right to toggle transparency on or off.

<figure><img src="https://1351999126-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq0RXXtGhH8CMBZU5Tone%2Fuploads%2F6xrhhuJvq6xumiJIMFpf%2Fmq-customisation-toggle-transparrency.png?alt=media&#x26;token=328e1ab8-a80d-41e4-844b-69f30de6c045" alt=""><figcaption><p>Toggle transparency option</p></figcaption></figure>

### Hiding lender details

If you require the lender details to be hidden, find the "General" section in the customisation and then uncheck the "Show Lender Details" option. This will hide all lender details for clients but you will still be able to view which lender each plan corresponds to.

<figure><img src="https://1351999126-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq0RXXtGhH8CMBZU5Tone%2Fuploads%2FMagjFKdpPAOugBetLzUC%2Fshow-lender-details-customisation-option.png?alt=media&#x26;token=5a04269a-bdb4-4087-b703-525d2e4473fb" alt=""><figcaption><p>Show lender details option</p></figcaption></figure>

### Adding your privacy policy link

To add a link to your privacy policy on the customer details form, find the **Edit Privacy Policy Text** option and click the "Edit" button.

<figure><img src="https://1351999126-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq0RXXtGhH8CMBZU5Tone%2Fuploads%2FLr9Hy5UrqJllvfTuy8Px%2Fedit-privacy-policy-link-customisation-option.png?alt=media&#x26;token=d8fc487f-d68a-4b9c-b299-b3ac129f9ff2" alt=""><figcaption><p>Edit privacy policy text option</p></figcaption></figure>

...This will open a new tab and take you to the Your Privacy Policy Link settings page. Here you can edit the text of the privacy policy statement and add in necessary links. When you are happy with the text, click the "Update Privacy Policy Link" button to save your changes.

<figure><img src="https://1351999126-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq0RXXtGhH8CMBZU5Tone%2Fuploads%2FZV3EsZY84RKoLnznheVc%2Fyour-privacy-policy-link-settings.png?alt=media&#x26;token=4fcf654a-42e1-4b75-b9cd-fbf0eddf3301" alt=""><figcaption><p>Your Privacy Policy Link settings page</p></figcaption></figure>

Once this has been updated, the privacy policy text will appear on the customer details form.

<figure><img src="https://1351999126-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq0RXXtGhH8CMBZU5Tone%2Fuploads%2FaAfuHMUqEdrD9D5Xm17R%2Fprivacy-policy-link-on-customer-details-form.png?alt=media&#x26;token=dfb7bbe4-de38-480f-bf3b-0bc0f8c61510" alt=""><figcaption><p>Privacy Policy link on customer details form</p></figcaption></figure>

### Changing the callback contact preference

The default way the system works is the user needs to tick a checkbox in order opt-in to **be contacted**. This can be changed. You can decide if it functions as an opt-in or opt-out checkbox. Or you can replace the checkbox for just a line of text.

<figure><img src="https://1351999126-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq0RXXtGhH8CMBZU5Tone%2Fuploads%2FISnJzM3cuMYwfwb22VWh%2Fmq-contact-checkbox.png?alt=media&#x26;token=23b5a07a-4b54-48a5-8a98-41d98550bd8b" alt=""><figcaption><p>Callback contact preference default option</p></figcaption></figure>

#### Opt-in / Opt-out checkbox

To select if your system displays an opt-in or opt-out checkbox for contact preferences, find the **Contact Checkbox Opt-In** option and toggle it to either be enabled or disabled.

**Enabled** - Sets the callback of the quote to "No" unless the checkbox is ticked.\
**Disabled** - Sets the callback of the quote to "Yes" unless the checkbox is ticked.

<figure><img src="https://1351999126-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq0RXXtGhH8CMBZU5Tone%2Fuploads%2FOhlbJfPH582szW0PKFLI%2Fmq-customer-details-form-contact-opt-out.png?alt=media&#x26;token=fae36216-287b-4f3c-91ce-214088e84db8" alt=""><figcaption><p>Contact checkbox opt-in option disabled</p></figcaption></figure>

#### Replacing the checkbox for text

Instead of displaying a checkbox, you can set it to just show text. In this case, the callback will be set depending on the opt-in option selected.

In order to replace this checkbox with text, find the **Replace Contact Checkbox With Text** option and click the "Edit" button. If the field is left blank, the default checkbox will be shown.

<figure><img src="https://1351999126-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq0RXXtGhH8CMBZU5Tone%2Fuploads%2FPExzDsSFcFCmhbVWuW2W%2Freplace-contact-checkbox-customisation-option.png?alt=media&#x26;token=75987b04-3748-46cb-83a7-5de8794289e9" alt=""><figcaption><p>Replace contact checkbox with text option</p></figcaption></figure>

### Changing the check eligibility link

When the results are shown, each plan has a "Check Eligibility" button. This  displays a sidebar and allows the user to enter their email address to request an eligibility check/callback from you. This button can be changed to a link instead. e.g. A contact page.

This can be achieved by finding the [Widget Contact Preferences page](https://app.mortgage-quote.me/dashboard/settings/widget-contact-preferences) in the settings. If the input is left empty, the default behaviour will remain for the button, however, if any text is entered, the button will be changed to a link.

You can choose to open this link in the same tab or in a new tab.

{% hint style="warning" %}
This setting will change the preference on all widgets with contact options.
{% endhint %}

<figure><img src="https://1351999126-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq0RXXtGhH8CMBZU5Tone%2Fuploads%2FZtteoLBs7VKcNeFOrlib%2Fcontact-widget-preferences.png?alt=media&#x26;token=2299d8ae-e3be-4207-b080-4f0e84749b38" alt=""><figcaption><p>Contact Widget Preferences settings page</p></figcaption></figure>

#### Linking to a page

To link to a page, enter the the web page you wish to send the user to. You will most likely need to prefix the URL with a backslash if you are linking to an internal page.

Example

**Internal Page:** /your-page-name\
**External Page:** <https://mortgage-quote.me/contact>

#### Linking to an anchor tag

In order to link to an anchor tag, prefix a hashtag to the Id name of the HTML section.

Example

```html
<div id="get-in-touch">
    <!-- Get in touch -->
</div>
```

If this section is on the **same page** as the quoting system, you'd type in the input box: **#get-in-touch**\
If this section is on **another page**, you'd type in the input box: **/your-page-name#get-in-touch**

## Lender panel

You are able to toggle lenders which appear on the mortgage quotes. In order to do this, once logged in, navigate to [Dashboard > Lenders](https://app.mortgage-quote.me/dashboard/lenders).

Once on this page, to deselect a lender, simply click on a it's corresponding logo and the box it is held in should turn grey and a cross will appear in the top right hand side instead of the green tick.

After you're happy with your lender panel selection, click the "Save Lenders" button.

<figure><img src="https://1351999126-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq0RXXtGhH8CMBZU5Tone%2Fuploads%2FCWHBHMHzUPpXxMAE7w2G%2Flender-panel.png?alt=media&#x26;token=229d8dd1-191b-41dc-aa8b-0969a1b28dc7" alt=""><figcaption><p>Lender panel page</p></figcaption></figure>

[Click here to learn more about the lenders on our system](https://mortgagequote.gitbook.io/mortgagequote-guides/lenders/mortgage-lender-panel).

## Emails

The are 3 emails that relate to the Mortgage Quoting System. These being:

### 1. Mortgage plans email

The mortgage plans email is received by the client and is only sent if they click the "Email Plans" button after they have completed a quote. This will send the client a nice email with the plans on it, as well as the contact email you set during setup and your logo if you uploaded one.

You can see how to change the contact information or upload a logo by [visiting the Settings guides](https://mortgagequote.gitbook.io/mortgagequote-guides/guides/settings).

<figure><img src="https://1351999126-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq0RXXtGhH8CMBZU5Tone%2Fuploads%2F2FjRsW7LJSIhKyij6VvL%2Fmq-email-plans-button.png?alt=media&#x26;token=543c442e-cba0-4c58-8d69-a9ecfac3b049" alt=""><figcaption><p>Email Plans button</p></figcaption></figure>

<figure><img src="https://1351999126-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq0RXXtGhH8CMBZU5Tone%2Fuploads%2FwM8nc44HBO7NEprrZwmA%2Fmq-send-email-of-plans.png?alt=media&#x26;token=9a23a81b-2278-4c49-a7d0-712c99ca67d9" alt=""><figcaption><p>Email plans sidebar</p></figcaption></figure>

<figure><img src="https://1351999126-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq0RXXtGhH8CMBZU5Tone%2Fuploads%2FXaeTm9KA5dXA9yoWNyLv%2Fplans-email.png?alt=media&#x26;token=e5be3df1-8b7a-4a75-a4a3-dbdfae50f8ec" alt=""><figcaption><p>Plans email</p></figcaption></figure>

### 2. Check eligibility email

The check eligibility email is sent to the [**Contact Email**](https://mortgagequote.gitbook.io/mortgagequote-guides/guides/settings/company) entered during company setup. However, if [**Contact Email Recipients**](https://mortgagequote.gitbook.io/mortgagequote-guides/guides/settings/email-recipients#contact-email-recipients) are added in the [Email Recipients settings](https://mortgagequote.gitbook.io/mortgagequote-guides/guides/settings/email-recipients), those addresses take priority. Both of these can be updated in [settings](https://mortgagequote.gitbook.io/mortgagequote-guides/guides/settings).

This email contains the clients N**ame, Email Address, Phone Number, Session Id Customer Id** and a list of the **questions answered.**

<figure><img src="https://1351999126-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq0RXXtGhH8CMBZU5Tone%2Fuploads%2FFWNoBtXTr7hnpYbJzjmm%2Fmq-email-check-eligbility-button.png?alt=media&#x26;token=02a77b37-6e04-478c-9664-9233e946730c" alt=""><figcaption><p>Check eligibility button</p></figcaption></figure>

<figure><img src="https://1351999126-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq0RXXtGhH8CMBZU5Tone%2Fuploads%2FLl3A2C22iIvqEw54E0cC%2Fmq-check-eligiblity-send-email.png?alt=media&#x26;token=2bcb6dfa-fd21-41b4-bf26-6ed2c220b947" alt=""><figcaption><p>Check eligibility sidebar</p></figcaption></figure>

<figure><img src="https://1351999126-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq0RXXtGhH8CMBZU5Tone%2Fuploads%2F9mojY6NJeLYf4FEZ2AbY%2Feligibility-email.png?alt=media&#x26;token=afb042f7-99cf-4421-8f55-3cb4b7c7f1ec" alt=""><figcaption><p>Check eligibility email</p></figcaption></figure>

### 3. Client report email

The check eligibility email is sent to the [**Contact Email**](https://mortgagequote.gitbook.io/mortgagequote-guides/guides/settings/company) entered during company setup. However, if [**Admin Email Recipients**](https://mortgagequote.gitbook.io/mortgagequote-guides/guides/settings/email-recipients#admin-email-recipients) are added in the [Email Recipients settings](https://mortgagequote.gitbook.io/mortgagequote-guides/guides/settings/email-recipients), those addresses take priority. Both of these can be updated in [settings](https://mortgagequote.gitbook.io/mortgagequote-guides/guides/settings).

This email contains a csv file of all the quote sessions completed on the hour of the client quoting.

<figure><img src="https://1351999126-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq0RXXtGhH8CMBZU5Tone%2Fuploads%2FUfkdN1hynkPvCidt49p3%2Fclient-report-email.png?alt=media&#x26;token=23e25d1d-f012-446a-81a7-189f9bcff67e" alt=""><figcaption><p>Client report email</p></figcaption></figure>
