Add your custom HTML hereif (!window.mortgageQuoteRunning) {
window.mortgageQuoteRunning = true;
window.mqReInitScript = function () {
var mqQuoteContainer = document.getElementById("planlistcontainer");
if (mqQuoteContainer) {
mqQuoteContainer.innerHTML = mqQuoteBodySaved;
mqInitialiseFunctions();
}
};
var mqQuoteBodySaved = "";
function mqInitiateQuote(companyId, mqQuoteBody, quoteWhitelabel) {
mqQuoteBodySaved = mqQuoteBody;
var mqQuoteContainer = document.getElementById("planlistcontainer");
if (!mqQuoteContainer) {
var mqQuoteContainer = document.createElement("div");
mqQuoteContainer.id = "planlistcontainer";
mqQuoteContainer.classList.add(
"mortgageplanlistcontainer",
"mq-container-height"
);
mqQuoteInsertCSS(quoteWhitelabel, function () {
mqQuoteContainer.innerHTML = mqQuoteBody;
document.getElementById("mq-quote-loader-container").remove();
mqQuoteScript.parentNode.insertBefore(mqQuoteContainer, mqQuoteScript);
mqQuoteInsertJsScript();
});
} else {
mqQuoteInsertCSS(quoteWhitelabel, function () {
mqQuoteContainer.innerHTML = mqQuoteBody;
document.getElementById("mq-quote-loader-container").remove();
mqQuoteInsertJsScript();
});
}
}
var mqQuoteScript = document.getElementById("mortgageplanlist");
var mqQuoteScriptSrc = mqQuoteScript.src;
window.mqWhitelabelId = mqQuoteScriptSrc
.split("?")[1]
.split("&")[0]
.split("=")[1];
var mqQuoteType =
(mqQuoteScriptSrc &&
mqQuoteScriptSrc.split("?")[1]?.split("&")[1]?.split("=")[1]) ||
"";
window.mqLeadCapture =
mqQuoteScript.getAttribute("data-lead-capture") === "false" ? false : true;
//Loader
var mqQuoteLoaderContainer = document.createElement("div");
mqQuoteLoaderContainer.id = "mq-quote-loader-container";
mqQuoteLoaderContainer.innerHTML = `
`;
var mqQuoteLoaderStyle = document.createElement("style");
mqQuoteLoaderStyle.innerHTML = `
#mq-quote-loader-container {
width: 100%;
display: flex;
justify-content: center;
}
#mq-quote-loader {
width: 28px;
height: 28px;
border: 2px solid #FFF;
border-bottom-color: #000000;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: mq-er-rotation 1.25s linear infinite;
}
@keyframes mq-er-rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
`;
mqQuoteScript.parentNode.insertBefore(mqQuoteLoaderContainer, mqQuoteScript);
mqQuoteScript.parentNode.insertBefore(mqQuoteLoaderStyle, mqQuoteScript);
var mqCompanyName, mqCompanyEmail, mqCompanyPhoneNumber;
var mqFrontendUrl = "frontend.mortgage-quote.me";
var mqStorage = JSON.parse(
localStorage.getItem(`mq/quote/${mqWhitelabelId}`)
);
if (!mqStorage) {
var mqDefaultStorage = {};
localStorage.setItem(
`mq/quote/${mqWhitelabelId}`,
JSON.stringify(mqDefaultStorage)
);
mqStorage = mqDefaultStorage;
}
//Update Local Storage
function mqUpdateLocalStorage(key, value) {
mqStorage[key] = value;
localStorage.setItem(
`mq/quote/${mqWhitelabelId}`,
JSON.stringify(mqStorage)
);
}
async function mqValidateOrigin() {
await fetch(
"https://" +
mqFrontendUrl +
"/calculators/mq/assets/php/validate-origin.php",
{
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
body: "companyId=" + encodeURIComponent(mqWhitelabelId),
}
)
.then(async (response) => {
if (!response.ok) {
if (response.status === 403) {
throw new Error("Invalid origin");
} else {
throw new Error("Network response was not ok");
}
}
return response.json();
})
.then((data) => {
if (data.status === "error") {
console.error(data.message);
return;
}
mqInitiateQuote(mqWhitelabelId, data.mqQuoteBody, data.quoteWhitelabel);
})
.catch((error) => {
console.error("There was a problem with the fetch operation:", error);
console.log("Error: ", error);
});
}
mqValidateOrigin();
function mqQuoteInsertCSS(quoteWhitelabel, callback) {
var mqQuoteCSS = document.createElement("link");
mqQuoteCSS.rel = "stylesheet";
mqQuoteCSS.type = "text/css";
mqQuoteCSS.href =
"https://" +
mqFrontendUrl +
"/calculators/mq/assets/css/mq.css?cache=" +
mqQuoteCacheBust();
mqQuoteCSS.onload = callback;
document.getElementsByTagName("head")[0].appendChild(mqQuoteCSS);
//Add Custom CSS
mqQuoteHandleWhitelabel(quoteWhitelabel);
}
function mqQuoteInsertJsScript() {
// Add js file link to header
var mqQuoteScript = document.createElement("script");
mqQuoteScript.type = "text/javascript";
mqQuoteScript.src =
"https://" +
mqFrontendUrl +
"/calculators/mq/assets/js/handle-mortgage-quote.js?cache=" +
mqQuoteCacheBust();
document.getElementsByTagName("head")[0].appendChild(mqQuoteScript);
// Add global js file link to header if not already added
if (!document.getElementById("mqGlobalScript")) {
var mqGlobalScript = document.createElement("script");
mqGlobalScript.type = "text/javascript";
mqGlobalScript.src =
"https://" +
mqFrontendUrl +
"/calculators/scripts/js/global.min.js?cache=" +
mqQuoteCacheBust();
mqGlobalScript.id = "mqGlobalScript";
document.getElementsByTagName("head")[0].appendChild(mqGlobalScript);
}
// Add toast js file link to header if not already added
if (!document.getElementById("mqToastScript")) {
var mqToastScript = document.createElement("script");
mqToastScript.type = "text/javascript";
mqToastScript.src =
"https://" + mqFrontendUrl + "/calculators/scripts/js/toast.min.js";
mqToastScript.id = "mqToastScript";
document.getElementsByTagName("head")[0].appendChild(mqToastScript);
}
}
function mqQuoteCacheBust() {
// if not in dev mode, return empty string
if (window.location.hostname === "staging.mortgage-quote.me") {
return "4";
}
var cache = Math.floor(Math.random() * 1000000000);
return cache;
}
//if value is closer to white, make text black else make text white
var mqQuoteWhiteOrBlack = (value) => {
var hex = value.replace("#", "");
var r = parseInt(hex.substring(0, 2), 16); // hexToR
var g = parseInt(hex.substring(2, 4), 16); // hexToG
var b = parseInt(hex.substring(4, 6), 16); // hexToB
var yiq = (r * 299 + g * 587 + b * 114) / 1000; // get brightness
return yiq >= 128 ? "#ffffff" : "#000000"; // return black or white
};
var logoBackground = false;
var showLenderDetails = true;
var includeStyles = true;
var mqLenderList = [];
var subscriptionRequiredBadge = false;
var selectBoxColumns = 1;
var companyIdentifier = "";
var mqWidgetContactLink = "";
var mqWidgetContactLinkOpenNewTab = true;
var integrations = [];
function mqQuoteHandleWhitelabel(data) {
var obj = JSON.parse(data);
websiteLink = obj.websiteLink;
integrations = obj.integrations ?? [];
mqWidgetContactLink = obj.widgetContactPreferences.widgetContactLink ?? "";
mqWidgetContactLinkOpenNewTab =
obj.widgetContactPreferences.widgetContactLinkOpenNewTab ?? true;
// checkSession(websiteLink, mqWhitelabelId);
// add lender from the obj to an object
//var lender = obj.lenders;
mqLenderList = Object.values(obj.lenders);
var subscription = obj.subscriptionActive;
if (!subscription) {
subscriptionRequiredBadge = true;
}
mqCompanyName = obj.companyName;
mqCompanyEmail = obj.contactEmail;
mqCompanyPhoneNumber = obj.contactNumber;
includeStyles = obj.includeStyles;
companyIdentifier = obj.companyIdentifier ?? "";
document.documentElement.style.setProperty(
"--mqBackgroundColour",
obj.styles.backgroundColour
);
document.documentElement.style.setProperty(
"--mqQuestionTextColour",
obj.styles.questionTextColour
);
document.documentElement.style.setProperty(
"--mqFontSize",
obj.styles.fontSize + "px"
);
document.documentElement.style.setProperty("--mqShadow", obj.styles.shadow);
document.documentElement.style.setProperty(
"--mqLinkColour",
obj.styles.linkColour
);
document.documentElement.style.setProperty(
"--mqBorderWidth",
obj.styles.borderWidth + "px"
);
//Input
document.documentElement.style.setProperty(
"--mqInputBoxBackgroundColour",
obj.styles.inputBox.inputBoxBackgroundColour
);
document.documentElement.style.setProperty(
"--mqInputBoxBorderColour",
obj.styles.inputBox.inputBoxBorderColour
);
document.documentElement.style.setProperty(
"--mqInputBoxTextColour",
obj.styles.inputBox.inputBoxTextColour
);
document.documentElement.style.setProperty(
"--mqInputBoxPlaceholderColour",
obj.styles.inputBox.inputBoxPlaceholderColour
);
document.documentElement.style.setProperty(
"--mqInputBoxTextColourActive",
obj.styles.inputBox.inputBoxTextColourActive
);
document.documentElement.style.setProperty(
"--mqInputBoxBorderColourActive",
obj.styles.inputBox.inputBoxBorderColourActive
);
document.documentElement.style.setProperty(
"--mqInputBoxBackgroundColourActive",
obj.styles.inputBox.inputBoxBackgroundColourActive
);
document.documentElement.style.setProperty(
"--mqInputBoxBorderRadius",
obj.styles.inputBox.inputBoxBorderRadius + "px"
);
document.documentElement.style.setProperty(
"--mqInputBoxAffixBackgroundColour",
obj.styles.inputBox.inputBoxAffixBackgroundColour
),
document.documentElement.style.setProperty(
"--mqInputBoxAffixTextColour",
obj.styles.inputBox.inputBoxAffixTextColour
),
//Select Box
document.documentElement.style.setProperty(
"--mqSelectBoxBackgroundColour",
obj.styles.selectBox.selectBoxBackgroundColour
);
document.documentElement.style.setProperty(
"--mqSelectBoxTextColour",
obj.styles.selectBox.selectBoxTextColour
);
document.documentElement.style.setProperty(
"--mqSelectBoxBorderColour",
obj.styles.selectBox.selectBoxBorderColour
);
document.documentElement.style.setProperty(
"--mqSelectBoxBorderColourActive",
obj.styles.selectBox.selectBoxBorderColourActive
);
document.documentElement.style.setProperty(
"--mqSelectBoxBorderRadius",
obj.styles.selectBox.selectBoxBorderRadius + "px"
);
document.documentElement.style.setProperty(
"--mqSelectBoxBackgroundColourActive",
obj.styles.selectBox.selectBoxBackgroundColourActive
);
document.documentElement.style.setProperty(
"--mqSelectBoxTextColourActive",
obj.styles.selectBox.selectBoxTextColourActive
);
document.documentElement.style.setProperty(
"--mqSelectBoxRadioColour1",
obj.styles.selectBox.selectBoxRadioColour1
);
document.documentElement.style.setProperty(
"--mqSelectBoxRadioColour2",
obj.styles.selectBox.selectBoxRadioColour2
);
document.documentElement.style.setProperty(
"--mqSelectBoxRadioColour1Active",
obj.styles.selectBox.selectBoxRadioColourActive1
);
document.documentElement.style.setProperty(
"--mqSelectBoxRadioColour2Active",
obj.styles.selectBox.selectBoxRadioColourActive2
);
document.documentElement.style.setProperty(
"--mqGridColumns",
obj.styles.selectBox.selectBoxColumns ?? 1
);
//Button
document.documentElement.style.setProperty(
"--mqButtonBackgroundColour",
obj.styles.button.buttonBackgroundColour
);
document.documentElement.style.setProperty(
"--mqButtonBorderColour",
obj.styles.button.buttonBorderColour
);
document.documentElement.style.setProperty(
"--mqButtonTextColour",
obj.styles.button.buttonTextColour
);
document.documentElement.style.setProperty(
"--mqButtonBorderRadius",
obj.styles.button.buttonBorderRadius + "px"
);
document.documentElement.style.setProperty(
"--mqButtonPadding",
obj.styles.button.buttonPadding
);
let padding = obj.styles.button.buttonPadding.split(" ");
//Divide padding by 2 then add --mqPaddingSmall the padding looks like 40px 20px 40px 20px
let modifiedPadding = padding.map(function (value) {
// Remove "px" suffix, convert to number, divide by 2, and convert back to string
var numericValue = parseFloat(value);
var dividedValue = (numericValue / 2).toString() + "px";
return dividedValue;
});
let smallPadding = modifiedPadding.join(" ");
document.documentElement.style.setProperty(
"--mqPaddingSmall",
smallPadding
);
document.documentElement.style.setProperty(
"--mqButtonWidth",
obj.styles.button.buttonWidth
);
document.documentElement.style.setProperty(
"--mqButtonBackgroundColourHover",
obj.styles.button.buttonBackgroundColourHover
);
document.documentElement.style.setProperty(
"--mqButtonBorderColourHover",
obj.styles.button.buttonBorderColourHover
);
document.documentElement.style.setProperty(
"--mqButtonTextColourHover",
obj.styles.button.buttonTextColourHover
);
//Status
document.documentElement.style.setProperty(
"--mqErrorMessageColour",
obj.styles.statusColours.errorMessageColour
);
document.documentElement.style.setProperty(
"--mqErrorMessageBoxBackgroundColour",
obj.styles.statusColours.errorMessageBoxBackgroundColour
);
document.documentElement.style.setProperty(
"--mqErrorMessageBoxTextColour",
obj.styles.statusColours.errorMessageBoxTextColour
);
document.documentElement.style.setProperty(
"--mqSuccessMessageColour",
obj.styles.statusColours.successMessageColour
);
document.documentElement.style.setProperty(
"--mqSuccessMessageBoxBackgroundColour",
obj.styles.statusColours.successMessageBoxBackgroundColour
);
document.documentElement.style.setProperty(
"--mqSuccessMessageBoxTextColour",
obj.styles.statusColours.successMessageBoxTextColour
);
document.documentElement.style.setProperty(
"--mqWarningMessageColour",
obj.styles.statusColours.warningMessageColour
);
document.documentElement.style.setProperty(
"--mqWarningMessageBoxBackgroundColour",
obj.styles.statusColours.warningMessageBoxBackgroundColour
);
document.documentElement.style.setProperty(
"--mqWarningMessageBoxTextColour",
obj.styles.statusColours.warningMessageBoxTextColour
);
document.documentElement.style.setProperty(
"--mqStatusBoxBorderRadius",
obj.styles.statusColours.statusBoxBorderRadius + "px"
);
//Card
document.documentElement.style.setProperty(
"--mqCardBackgroundColour",
obj.styles.card.cardBackgroundColour
);
document.documentElement.style.setProperty(
"--mqCardBorderColour",
obj.styles.card.cardBorderColour
);
document.documentElement.style.setProperty(
"--mqCardBorderRadius",
obj.styles.card.cardBorderRadius + "px"
);
document.documentElement.style.setProperty(
"--mqCardPrimaryTextColour",
obj.styles.card.cardPrimaryTextColour
);
document.documentElement.style.setProperty(
"--mqCardPrimaryTextColourLight",
obj.styles.card.cardPrimaryTextColour + "33"
);
document.documentElement.style.setProperty(
"--mqCardSecondaryTextColour",
obj.styles.card.cardSecondaryTextColour
);
showLenderDetails = obj.styles.card.showLenderDetails;
//Check if Card background colour is closer to white or black
logoBackground =
mqQuoteWhiteOrBlack(obj.styles.card.cardBackgroundColour) == "#000000"
? true
: false;
}
}
