// Code that is triggered when link containing class name "zt-ovt-button" is clicked which opens the Valuation tool box.
(function () {
var selfScript;
var selfQuery;
var isIframeEmbed = false;
var autoAddButton = false;
var buttonColorHex;
var buttonTextColor;
var isDarkButtonText = false;
var widgetURL = 'resource/widgetiframeloader';
var iFrameURL = '/offsite-valuation';
var widgetName = 'zt-ovt';
var widgetTitle = 'Zoopla Valuation Tool Widget';
var widgetKey = 'e8e2717c-0ccf-4f0f-bef4-dda9d816dc60';
var ourUtmSource = 'audienceconnect';
function getUrlParamsFromScriptTag(script, param) {
var url = script && new URL(script.src);
var scriptParams = Object.fromEntries(url.searchParams);
return scriptParams[param];
}
function isValidColor(hex) {
if (!hex) return false;
return hex.match(/^(?:[0-9a-fA-F]{3}){1,2}$/);
}
/******** Our main function ********/
function main() {
var scripts = document.getElementsByTagName('script');
var script = null;
for (var i = scripts.length - 1; i >= 0; i--) {
if (scripts[i].src.indexOf(widgetURL) > 0 && scripts[i].src.indexOf(widgetKey) > 0) {
script = scripts[i];
}
}
if (script) {
selfScript = script;
selfQuery = selfScript.src.match(/\?(.*)/g);
if (selfQuery[0]) {
selfQuery = selfQuery[0];
}
isIframeEmbed = getUrlParamsFromScriptTag(script, "display") === "iframe";
autoAddButton = getUrlParamsFromScriptTag(script, "showbutton") === "true";
if (autoAddButton) {
buttonColorHex = getUrlParamsFromScriptTag(
script,
"buttoncolour"
);
if (!isValidColor(buttonColorHex)) {
buttonColorHex = "8046F1";
}
var buttonTextParam = getUrlParamsFromScriptTag(
script,
"buttontext"
);
isDarkButtonText = buttonTextParam === "dark";
buttonTextColor = isDarkButtonText ? "#313131" : "#FFF";
displayButton();
}
var querystring = window.location.toString().split("?");
var queryPairs = {};
if (querystring.length > 1) {
var pairs = querystring[1].split("&");
for (var pair of pairs) {
var [key2, val] = pair.split("=");
queryPairs[key2] = decodeURIComponent(val);
}
if (queryPairs["utm_source"] === ourUtmSource) {
for (var i in queryPairs) {
if (!i.startsWith("utm_"))
continue;
selfQuery += "&" + i + "=" + queryPairs[i];
}
}
}
init();
}
}
var buttonClass = "zt-ovt-button";
var urlTrigger = "#ovt-request-valuation";
var ovtDomain = 'https://zoopla.co.uk';
var isLoaderOpen = false;
var initialBodyOverflow = "";
var initialBodyWidth = "";
var initialBodyPosition = "";
var iFrameCreated = false;
var widgetOpenRequested = false;
/**
* Initialise the iframe
*/
function init() {
if (isIframeEmbed) {
initIframewidget();
} else {
initPopupWidget();
}
}
function displayButton() {
var buttonCss =
"#online-valuation-tool{font-family:inherit!important;cursor:pointer!important;user-select:none!important;outline:0!important;font-size:14px!important;font-weight:700!important;vertical-align:middle!important;white-space:nowrap!important;text-decoration:none!important;border-color:transparent!important}#online-valuation-tool.ovt-button-fixed{z-index:2147483000!important;position:fixed!important;bottom:20px!important;left:-1px!important;text-align:left!important;padding:14px 15px 14px 5px!important;border-top-right-radius:40px!important;border-bottom-right-radius:40px!important;box-shadow:0 2px 4px 0 rgba(0,0,0,.48);background-color:#" +
buttonColorHex +
";color:" +
buttonTextColor +
';}#online-valuation-tool.ovt-button-fixed:before{border-top-right-radius:40px;border-bottom-right-radius:40px}#online-valuation-tool.ovt-button-fixed span{display:inline-block!important;vertical-align:middle!important}#online-valuation-tool.ovt-button-fixed img{vertical-align:middle!important;border-style:none!important;padding:0 10px!important}#online-valuation-tool:before{content:"";width:100%;height:100%;position:absolute;top:0;left:0;background-color:#000;opacity:0;transition:opacity ease-in-out 300ms}#online-valuation-tool:hover:before,#online-valuation-tool:focus:before,#online-valuation-tool:active:before{opacity:0.25!important}';
var styleEl = document.createElement("style");
styleEl.innerHTML = buttonCss;
var buttonEl = document.createElement("button");
buttonEl.setAttribute("id", "online-valuation-tool");
buttonEl.setAttribute("class", "ovt-button-fixed zt-ovt-button");
var iconColour = isDarkButtonText ? "dark" : "light";
var houseIcon = document.createElement("img");
houseIcon.setAttribute(
"src",
"https://resources.zooplavaluations.co.uk/images/ovt-button/house-" +
iconColour +
".png"
);
houseIcon.setAttribute("alt", "");
var buttonText = document.createElement("span");
buttonText.innerHTML = "Request an Instant
Online Valuation";
var arrowIcon = document.createElement("img");
arrowIcon.setAttribute(
"src",
"https://resources.zooplavaluations.co.uk/images/ovt-button/arrow-right-" +
iconColour +
".png"
);
arrowIcon.setAttribute("alt", "");
document.body.append(styleEl);
buttonEl.append(houseIcon);
buttonEl.append(buttonText);
buttonEl.append(arrowIcon);
document.body.append(buttonEl);
}
function initIframewidget() {
loadWidgetIFrame();
window.addEventListener("message", function (event) {
if (event.data.name == "ovt-iframe-set-height") {
setIframeHeight(event.data.payload.height);
}
});
}
function initPopupWidget() {
var loadingImage = 'https://zooplavaluations.co.uk/img/widgets/iframe-loading.' + (detectIE() ? 'gif' : 'svg');
// Create Widget wrapper
var wrapper = document.createElement('div');
wrapper.setAttribute("style", "width: 100% !important; min-width: 100% !important; border: none !important; overflow: hidden !important; height: 100% !important; position: fixed !important; " +
"top: 0 !important; right: 0 !important; left: 0 !important; bottom: 0 !important; z-index: 2147483646 !important; display: none; background-color: rgba(100, 100, 100, 0.7);" +
"background-image: url('" + loadingImage + "'); background-repeat: no-repeat; background-position: center;");
wrapper.setAttribute("id", widgetName + "-loader");
document.getElementsByTagName('body')[0].appendChild(wrapper);
// Bind the buttons to the loader
var buttons = document.getElementsByClassName(buttonClass);
for (var i = buttons.length - 1; i >= 0; i--) {
buttons[i].addEventListener('click', openWidgetLoader);
}
// Check whether we've received a URL parameter to open the widget
if (window.location.hash == urlTrigger && buttons && buttons[0]) {
buttons[0].click();
}
// Add close event listener
window.addEventListener('message', function (event) {
if (widgetOpenRequested && event.data == "ovt-iframe-close") {
closeWidget();
}
if (widgetOpenRequested && event.data == "ovt-iframe-loaded") {
displayWidget();
}
});
};
/**
* Bind the buttons to the widget itself
*/
function bindButtons() {
var buttons = document.getElementsByClassName(buttonClass);
for (var i = buttons.length - 1; i >= 0; i--) {
buttons[i].addEventListener('click', openWidget);
}
if (isLoaderOpen) {
openWidget();
}
};
/**
* Starts loading the widget iFrame
*/
var loadWidgetIFrame = function() {
if (iFrameCreated) {
// Do not reload the iFrame if it was already loaded
return;
}
iFrameCreated = true;
var iframe = document.createElement('iframe');
iframe.setAttribute("src", ovtDomain + iFrameURL + selfQuery);
iframe.setAttribute("id", widgetName + "-iframe");
iframe.setAttribute("name", widgetName + "-iframe");
iframe.setAttribute("title", widgetTitle);
iframe.setAttribute("frame-spacing", "0");
iframe.setAttribute("frame-border", "0");
iframe.setAttribute("tab-index", "0");
iframe.setAttribute("scrolling", "no");
if (isIframeEmbed) {
iframe.setAttribute(
"style",
"width: 100%; max-width: 600px; border: 1px solid #D1D0CF; background-color: #FFF; overflow: hidden"
);
document.getElementById("ovt-iframe-embed").appendChild(iframe);
} else {
iframe.setAttribute("style", "width: 100% !important; min-width: 100% !important; border: none !important; overflow: hidden !important; height: 100% !important; position: fixed !important; top: 0 !important; right: 0 !important; left: 0 !important; bottom: 0 !important; z-index: 2147483647 !important; display: none;");
document.getElementsByTagName('body')[0].appendChild(iframe);
iframe.addEventListener('load', bindButtons);
}
};
/**
* Set embedded iframe height
*/
var setIframeHeight = function (height) {
document.getElementById("zt-ovt-iframe").style.height = height;
};
/**
* Opens the widget loader
*/
var openWidgetLoader = function() {
isLoaderOpen = true;
document.getElementById(widgetName + '-loader').style["display"] = "block";
loadWidgetIFrame();
return false;
};
/**
* Opens the iframe
*/
var openWidget = function() {
widgetOpenRequested = true;
document.getElementById(widgetName + '-iframe').contentWindow.postMessage("ovt-iframe-open", "*");
return false;
};
var displayWidget = function() {
document.getElementById(widgetName + '-loader').style["display"] = "none";
document.getElementById(widgetName + '-iframe').style["display"] = "block";
initialBodyOverflow = document.body.style["overflow"];
document.body.style["overflow"] = "hidden";
initialBodyWidth = document.body.style["width"];
document.body.style["width"] = "100%";
initialBodyPosition = document.body.style["position"];
document.body.style["position"] = "fixed";
}
/**
* Closes the iframe
*/
var closeWidget = function() {
if (document.getElementById(widgetName + '-iframe')) {
widgetOpenRequested = false;
document.getElementById(widgetName + '-iframe').style["display"] = "none";
}
document.body.style["overflow"] = initialBodyOverflow;
document.body.style["width"] = initialBodyWidth;
document.body.style["position"] = initialBodyPosition;
};
var detectIE = function() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf('MSIE ');
if (msie > 0) {
// IE 10 or older => return version number
return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
}
var trident = ua.indexOf('Trident/');
if (trident > 0) {
// IE 11 => return version number
var rv = ua.indexOf('rv:');
return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
}
var edge = ua.indexOf('Edge/');
if (edge > 0) {
// Edge (IE 12+) => return version number
return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
}
// other browser
return false;
};
document.addEventListener('zvtManualTrigger', main);
window.addEventListener("load", main, false);
} ());
