MortgageCTA
Enhance user engagement and drive conversions by incorporating strategically placed call to actions leading to a a highly customisable mortgage quoting system
MortgageCTA is a new and improved version of our MortgageQuote widget with the added addition of pre quote call to actions.
Our goal with this widget is to capture high-quality leads, captivate your website visitors through interactive features that boost engagement and time on site, and give them easy access to a comprehensive range of mortgage information. All with the flexibility to display the widget wherever it fits best within your website layout.
How it works
Depending on the option you select, users can either fill out a brief 'pre-quote' form or simply click a button—or any element you choose—to instantly launch the full quote experience in a sleek, modal window.
After a visitor has answered all the questions, they are prompted to enter their name, email address and phone number, as well as accept a privacy policy and contact preferences to keep compliance happy.
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.
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.
Embedding into your website
Embedding this widget into your website is straightforward. Simply generate the code snippet and insert it into the HTML of your website in the location you want the widget to appear. 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 your web platform, view the widget embedding guide.
Generating the code snippet
Once logged in...
...in the Quoting Styles page, click on the "MortgageCTA" tab and then find the "View Code" button. A modal should appear with the code inside ready to be copied.
The code will look similar to this.
<form class="mqcta-pre-quote-form" data-question-set="[1,2,3]"></form>
<script>
window.mqctaConfig = {
modalSettings: {
openOnLoad: false,
closeButton: true,
sidebar: {
showLogo: false,
},
},
};
</script>
<script
id="mortgage-cta"
src="https://frontend.mortgage-quote.me/calculators/mortgage-cta/v1/mortgage-cta.min.js"
data-company-id="123456789"
defer
></script>The Pre Quote Form
The pre quote form is a html form element that can be placed anywhere within the body of your web page. As long as the form has the class "mqcta-pre-quote-form", it will be populated with a pre quote form after the initial script has been fully loaded into your site.
This form will be styled with just the customisations you have applied onto the widget, no additional styling is added - This gives you more freedom and allows for more customisation options.
Pre Quote Form Question Set Variations
The pre quote form can be configured to show these three questions from the quote:
Question 1: Loan Purpose (Select boxes) - Purchase or Remortgage Question 2: Property Value (Input) Question 3: Amount to Borrow (Input)
This question set can be re ordered or questions can be removed. This can simply be achieved by altering the "data-question-set" attribute on the form. For example:
<form class="mqcta-pre-quote-form" data-question-set="[1,3]"></form>This form will show questions 1 and 3.
Trigger Buttons
Trigger buttons can be placed anywhere on your site. They simply need to be any HTML element with a class name that includes "mqcta-launch-modal-button".
Here is an example:
<button class="btn btn-primary mqcta-launch-modal-button">
Get Started
</button>Selecting a property type
To focus the quoting system on either residential or buy-to-let mortgages, use the "Property Type" dropdown. This will update the configuration's quote settings code. It will look similar to this:
<script>
window.mqctaConfig = {
quoteSettings: {
propertyType: "residential",
},
...other configurations
};
</script>Choosing a default mortgage type
You have the ability to choose to default the quote's mortgage type to be pre selected to either purchase or remortgage. Use the "Default Mortgage Type" dropdown to update the configuration's quote settings code. It will look similar to this:
<script>
window.mqctaConfig = {
quoteSettings: {
defaultMortgageType: "purchase",
},
...other configurations
};
</script>You are also able to overwrite the default selected mortgage type on the pre quote form by adding the attribute data-default-mortgage-type onto the pre quote form html. Here is an example:
<form
class="mqcta-pre-quote-form"
data-question-set="[1,2,3]"
data-default-mortgage-type="purchase"
></form>
<form
class="mqcta-pre-quote-form"
data-question-set="[1,2]"
data-default-mortgage-type="remortgage"
></form>Advanced Configuration
Modal Settings
On the code configurator, you are able to change three settings for the modal screen.
Open Modal On Load - Automatically displays the modal as soon as the script finishes loading, without requiring any user interaction to trigger it.
Show Modal Close Button - Displays a close (✕) button within the modal, allowing users to manually dismiss or close the modal window. An example of this being hidden would be a page dedicated to the quote system so the user would not be able to click off the modal.
Show Sidebar Logo - Displays your logo at the top of the sidebar, commonly used for branding or visual identification within the interface. It's often a good practice to use this alongside Open Modal on Load to ensure users recognise they’re still on your site, especially since the modal may overlay your site's header and branding. To update/add your logo, see this guide - Logo
Wording
We’ve added the ability to customise much of the wording within this widget. To make changes, follow the steps below based on the specific text you'd like to update. You’ll need to manually add the corresponding code snippets to the window.mqctaConfig object.
Only one window.mqctaConfig object can exist. Please make sure to append any configuration options to the existing variable. Click here to view an example of what a complete configuration object should look like.
Pre Quote Form Wording
You are able to change the question labels and button text of the pre quote forms. Here is a code example:
<script>
window.mqctaConfig = {
wording: {
preQuoteForm1: {
mortgageType: "Please select a mortgage type",
propertyValue: "How much is your property worth?",
borrowAmount: "How much do you want to borrow?",
submitButton: "Start a Quote",
},
},
};
</script>If you've added multiple pre-quote forms to your webpage, the script will automatically assign each form an index based on the order in which they are added to the DOM. To modify the wording for other forms, simply add another object beneath the existing one and adjust the name according to the index of the form you want to edit.
Here’s an example:
<div>
<form class="mqcta-pre-quote-form" data-question-set="[1,2,3]"></form>
</div>
<div>
<form class="mqcta-pre-quote-form" data-question-set="[1,3]"></form>
</div>
<script>
window.mqctaConfig = {
wording: {
preQuoteForm1: {
mortgageType: "Please select a mortgage type",
propertyValue: "How much is your property worth?",
borrowAmount: "How much do you want to borrow?",
submitButton: "Start a Quote",
},
preQuoteForm2: {
mortgageType: "Mortgage type",
borrowAmount: "Borrow amount",
submitButton: "Get a Quick Quote",
},
},
};
</script>
Quote Questions Wording
You can customise the wording of the questions in the quoting system. Below is the code for all available quote question wording options:
<script>
window.mqctaConfig = {
wording: {
questions: {
mortgageType: "What type of mortgage are you looking for?",
purchaseOption: "Please select a purchase option",
remortgageOption: "Please select the type of property to remortgage",
rateType: "What type of mortgage rate are you looking for?",
initialRatePeriod: "How many years would you prefer for the initial rate period?",
expectedMonthlyIncome: "What is the expected monthly rental income?",
highRateTaxPayer: "Will you be a high rate tax payer, including your rental income?",
firstTimeBtl: "Are you a first time landlord?",
propertyLocation: "Where is the property located?",
propertyType: "What type of property do you want to mortgage?",
currentLender: "What is the name of your current mortgage lender?",
purchasePrice: "What is the purchase price of the property?",
propertyValue: "What is the current market value of the property?",
borrowAmount: "How much would you like to borrow?",
outstandingBalance: "What is the outstanding balance you wish to borrow?",
mortgageTerm: "How many years do you require this mortgage?",
repaymentMethod: "What is your preferred repayment method?",
applicants: "How many applicants are applying for the mortgage?",
applicant1Income: "What is the annual income of the 1st applicant before tax?",
applicant2Income: "What is the annual income of the 2nd applicant before tax?",
applicant1Age: "What is the age of the 1st applicant?",
applicant2Age: "What is the age of the 2nd applicant?",
adverseCredit: "Do you currently have any adverse credit?",
},
},
};
</script>Sidebar Wording
You can customise the wording in the modal's sidebar as well as the question steps. Below is the code for all available sidebar wording options:
<script>
window.mqctaConfig = {
wording: {
sidebar: {
title: "A Mortgage Quote In Minutes",
subtitle: "Get a personalised instant mortgage quote. Answer a few questions to see your options.",
wealthWarning: "Your home may be repossessed if you do not keep up repayments on your mortgage.",
steps: {
mortgageDetails: {
title: "Mortgage Details",
description: "Tell us about the type of mortgage you need to get started.",
},
propertyDetails: {
title: "Property Details",
description: "Provide key information about the property you're financing.",
},
loanDetails: {
title: "Loan Details",
description: "Specify how much you need to borrow and your preferred terms.",
},
applicantDetails: {
title: "Applicant Details",
description: "Enter details about the individuals applying for the mortgage.",
},
personalDetails: {
title: "Personal Details",
description: "Provide your contact information to receive your mortgage options.",
},
plans: {
title: "Plans",
description: "Review your mortgage options and select the best plan for your needs.",
},
},
callbackRequestPage: {
title: "Request a Callback",
description: "Time to get a human involved! We take a friendly approach to assess your mortgage needs, and our goal is to match you with lenders and products that feel like a perfect fit for you.",
submitButton: "Request a Callback",
},
},
},
};
</script>Customer Details Form Wording
You can customise the wording on the customer details form. Below is the code for all available customer details form wording options:
<script>
window.mqctaConfig = {
wording: {
customerDetailsForm: {
title: "View your plans instantly",
description: "Complete the form below to view your personalised mortgage options.",
dataSafetyMessage: "Your data is safe with us - we never sell or share it.",
submitButton: "Find Plans",
},
},
};
</script>Plans Wording
You can customise the text on the plan's buttons. Below is the code for all available plans wording options:
<script>
window.mqctaConfig = {
wording: {
plans: {
contactButton: "Request a Callback",
moreInfoButton: "More Information",
},
},
};
</script>All MortgageCTA Configurations
The following code includes all currently available configuration options for MortgageCTA.
<script>
window.mqctaConfig = {
quoteSettings: {
propertyType: "residential",
defaultMortgageType: "purchase",
},
modalSettings: {
openOnLoad: false,
closeButton: true,
sidebar: {
showLogo: false,
},
},
wording: {
customerDetailsForm: {
title: "View your plans instantly",
description: "Complete the form below to view your personalised mortgage options.",
dataSafetyMessage: "Your data is safe with us - we never sell or share it.",
submitButton: "Find Plans",
},
preQuoteForm1: {
mortgageType: "Please select a mortgage type",
propertyValue: "How much is your property worth?",
borrowAmount: "How much do you want to borrow?",
submitButton: "Start a Quote",
},
preQuoteForm2: {
mortgageType: "Mortgage type",
borrowAmount: "Borrow amount",
submitButton: "Get a Quick Quote",
},
plans: {
contactButton: "Request a Callback",
moreInfoButton: "More Information",
},
questions: {
mortgageType: "What type of mortgage are you looking for?",
purchaseOption: "Please select a purchase option",
remortgageOption: "Please select the type of property to remortgage",
rateType: "What type of mortgage rate are you looking for?",
initialRatePeriod: "How many years would you prefer for the initial rate period?",
expectedMonthlyIncome: "What is the expected monthly rental income?",
highRateTaxPayer: "Will you be a high rate tax payer, including your rental income?",
firstTimeBtl: "Are you a first time landlord?",
propertyLocation: "Where is the property located?",
propertyType: "What type of property do you want to mortgage?",
currentLender: "What is the name of your current mortgage lender?",
purchasePrice: "What is the purchase price of the property?",
propertyValue: "What is the current market value of the property?",
borrowAmount: "How much would you like to borrow?",
outstandingBalance: "What is the outstanding balance you wish to borrow?",
mortgageTerm: "How many years do you require this mortgage?",
repaymentMethod: "What is your preferred repayment method?",
applicants: "How many applicants are applying for the mortgage?",
applicant1Income: "What is the annual income of the 1st applicant before tax?",
applicant2Income: "What is the annual income of the 2nd applicant before tax?",
applicant1Age: "What is the age of the 1st applicant?",
applicant2Age: "What is the age of the 2nd applicant?",
adverseCredit: "Do you currently have any adverse credit?",
},
sidebar: {
title: "A Mortgage Quote In Minutes",
subtitle: "Get a personalised instant mortgage quote. Answer a few questions to see your options.",
wealthWarning: "Your home may be repossessed if you do not keep up repayments on your mortgage.",
steps: {
mortgageDetails: {
title: "Mortgage Details",
description: "Tell us about the type of mortgage you need to get started.",
},
propertyDetails: {
title: "Property Details",
description: "Provide key information about the property you're financing.",
},
loanDetails: {
title: "Loan Details",
description: "Specify how much you need to borrow and your preferred terms.",
},
applicantDetails: {
title: "Applicant Details",
description: "Enter details about the individuals applying for the mortgage.",
},
personalDetails: {
title: "Personal Details",
description: "Provide your contact information to receive your mortgage options.",
},
plans: {
title: "Plans",
description: "Review your mortgage options and select the best plan for your needs.",
},
},
callbackRequestPage: {
title: "Request a Callback",
description: "Time to get a human involved! We take a friendly approach to assess your mortgage needs, and our goal is to match you with lenders and products that feel like a perfect fit for you.",
submitButton: "Request a Callback",
},
},
},
};
</script>Customisation
MortgageCTA 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.
The widgets MortgageCTA, MortgageQuote & BridgingQuote all share the same customisations
Customising the widget
To begin customisation, once logged in, navigate to Dashboard > Quoting Styles
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.
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.
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.
Changing the Request a Callback link
When the results are shown, each plan has a "Request a Callback" button. This displays a sidebar and allows the user to enter their details to request a 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 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.
This setting will change the preference on all widgets with contact options.
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 forward slash 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
<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.
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.
Emails
The are 2 emails that relate to the Mortgage Quoting System. These being:
1. Callback Request email
The callback request email is sent to the Contact Email entered during company setup. However, if Contact Email Recipients are added in the Email Recipients settings, those addresses take priority. Both of these can be updated in settings.
This email contains the clients Name, Email Address, Phone Number, Session Id Customer Id, Additional Information and a list of the questions answered.
2. Client report email
The client report email is sent to the Contact Email entered during company setup. However, if Admin Email Recipients are added in the Email Recipients settings, those addresses take priority. Both of these can be updated in settings.
This email contains a csv file of all the quote sessions completed on the hour of the client quoting.
Last updated