Blitzz Help Center

Sample

Click here for a Live Demo: https://blitzz.co/iframe


Installation 

Step 1

Copy and paste this code snippet before the </body> tag on every page you want the button to appear on your website.


var config = {

                title:"New Virtual Inspeciton", // Button name 

                color:"#387bf7" // color of Button

            }


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();


Step 2: Add a button

To change the text and color of the button, change the values of these variables above:


var config = {

                title:"New Virtual Inspeciton", // Button name 

                color:"#387bf7" // color of Button

            }


The final output should look like



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.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.