# 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.

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.

The customer details form for the Mortgage Quoting System.

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.

Demo website to demonstrate Mortgage Quoting System results.

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.

Quote details in the MortgageQuote account

## 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](/mortgagequote-guides/guides/embedding-widgets.md). ### 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 ``` ### 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.

### 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.

### 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.

### 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.

...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.

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

Privacy Policy link on customer details form

### 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.

Callback contact preference default option

#### 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.

#### 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.

Replace contact checkbox with text option

### 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 %}

Contact Widget Preferences settings page

#### 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:** #### 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

``` 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.

[Click here to learn more about the lenders on our system](/mortgagequote-guides/lenders/mortgage-lender-panel.md). ## 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](/mortgagequote-guides/guides/settings.md).

### 2. Check eligibility email The check eligibility email is sent to the [**Contact Email**](/mortgagequote-guides/guides/settings/company.md) entered during company setup. However, if [**Contact Email Recipients**](/mortgagequote-guides/guides/settings/email-recipients.md#contact-email-recipients) are added in the [Email Recipients settings](/mortgagequote-guides/guides/settings/email-recipients.md), those addresses take priority. Both of these can be updated in [settings](/mortgagequote-guides/guides/settings.md). This email contains the clients N**ame, Email Address, Phone Number, Session Id Customer Id** and a list of the **questions answered.**

### 3. Client report email The check eligibility email is sent to the [**Contact Email**](/mortgagequote-guides/guides/settings/company.md) entered during company setup. However, if [**Admin Email Recipients**](/mortgagequote-guides/guides/settings/email-recipients.md#admin-email-recipients) are added in the [Email Recipients settings](/mortgagequote-guides/guides/settings/email-recipients.md), those addresses take priority. Both of these can be updated in [settings](/mortgagequote-guides/guides/settings.md). This email contains a csv file of all the quote sessions completed on the hour of the client quoting.

--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://mortgagequote.gitbook.io/mortgagequote-guides/products/widgets/mortgage-quoting-system.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.