Demo
Click here for a Live Demo: https://blitzz.co/iframe
Installation
Copy and paste this code snippet before the </body> tag on every page you want the button to appear on your website.
<script>
var config ={
title:"New Virtual Inspection",
color:"#387bf7"
}
function f(){if(window.jQuery)loadfloating();else{var e=document.createElement("script");e.src="https://code.jquery.com/jquery-2.2.4.min.js",e.onload=function(){jQuery.noConflict(),loadfloating()},document.head.appendChild(e)}}function loadfloating(){jQuery(function(){var e={title:"Invite via Blitzz",color:"#3366cc"};"undefined"!=typeof config&&(config.title?e.title=config.title:e.title="Invite via Blitzz",config.color?e.color=config.color:e.color="#3366cc");var t=document.createElement("style");t.type="text/css",t.innerHTML+=".click-to-open{padding: 5px;position: fixed;bottom: 0px;right: 10px;background-color:"+e.color+";color: #ffffff;display: flex;justify-content: center;align-items: center;font-size: 16px;width: auto;height: 35px;overflow: hidden;box-shadow: 0 0 3px rgba(0 , 0 , 0, 1);border-radius: 4px;cursor: pointer;border: none;}.open-weblite-width{ opacity: 1; transition: opacity 0.5s; width: 400px;height: 630px;position: fixed;bottom: 50px;right: 15px;overflow:hidden;box-shadow:0 0 10px rgb(232, 232, 232);}.open-weblite-width.hide{opacity: 0}.click-to-open i {border: solid #F5F5F5; border-width: 0 3px 3px 0; display: inline-block; padding: 3px;}.click-to-open .up { transform: rotate(-135deg); -webkit-transform: rotate(-135deg);margin:0px 6px -2px 3px}.click-to-open .down { transform: rotate(45deg); -webkit-transform: rotate(45deg);display:none;margin:0px 6px 2px 3px}.inner-website-wdith{width:calc(100%);height:100%}.inner-website-wdith iframe{width:100%;height:100%}",document.getElementsByTagName("head")[0].appendChild(t);var i=document.createElement("div");i.innerHTML='<button type="button" class="click-to-open " id="click-to-open" onclick=toggleframe()><i class="arrow up"></i><i class="arrow down"></i><span>'+e.title+'</span></button><div class="open-weblite-width hide" id="open-weblite-width" ><div class="inner-website-wdith"><iframe id="iframefaq" src="https://web.blitzz.co/" width="100%" class="faqpage" frameBorder="0" scrolling="yes" marginwidth="0" marginheight="0"></iframe></div></div>',document.querySelector("body").appendChild(i)})}function toggleframe(){document.getElementById("click-to-open").classList.toggle("active");var e=document.getElementById("open-weblite-width");e.classList.contains("hide")?(e.classList.remove("hide"),document.getElementsByClassName("up")[0].style.display="none",document.getElementsByClassName("down")[0].style.display="block"):(e.classList.add("hide"),document.getElementsByClassName("up")[0].style.display="block",document.getElementsByClassName("down")[0].style.display="none")}f();
</script>Re-brand Button and Colors
To change the text and color of the button, change the values of these variables in the code snippet above:
var config ={ title:"New Virtual Inspection", //Button Text color:"#387bf7" //Button Color } }
Requirements
This web widget requires the agent to login using Blitzz credentials.
SSO / SAML Authentication:
To setup seamless login using SSO/SAML, or token-based authentication, please contact our support teams.