<script>
var iframe = document.createElement('iframe');
iframe.id = "genio-chat"
document.body.appendChild(iframe);
var htmlcode = `
<style>
body {
--chakra-colors-chakra-body-bg:transparent;
--chakra-colors-blackAlpha-600:0;
}
.css-wondsy {
padding-inline-start: 0 !important;
padding-inline-end: 0 !important;
}
</style>
<link rel="stylesheet" type="text/css" href="https://client-chat.genio.id/static/css/main.css" >
<script type="module" id="qchat-client" src="https://client-chat.genio.id/static/js/bundle.js?api_key=$2y$10$27oS4dJ2pjhqyLY7AesuP.tN8OcTrYCFZ39EQ3rn.gEMvOzr6Zgfy" onload="addEvent()"><` + `/script>
<script>
window.mobileCheck = function detectMob() {
const toMatch = [
/Android/i,
/webOS/i,
/iPhone/i,
/iPad/i,
/iPod/i,
/BlackBerry/i,
/Windows Phone/i
];
return toMatch.some((toMatchItem) => {
return navigator.userAgent.match(toMatchItem);
});
}
function waitForElm(selector) {
return new Promise(resolve => {
if (document.querySelector(selector)) {
return resolve(document.querySelector(selector));
}
const observer = new MutationObserver(mutations => {
if (document.querySelector(selector)) {
resolve(document.querySelector(selector));
observer.disconnect();
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
});
}
function waitForElmAll(selector) {
return new Promise(resolve => {
if (document.querySelectorAll(selector)) {
return resolve(document.querySelectorAll(selector));
}
const observer = new MutationObserver(mutations => {
if (document.querySelectorAll(selector)) {
resolve(document.querySelectorAll(selector));
observer.disconnect();
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
});
}
function setClipPathDown(){
setTimeout(function(){
if (window.mobileCheck()){
window.parent.document.querySelector('#genio-chat').style.clipPath = 'inset(85% 0px 0% 75%)';
} else {
window.parent.document.querySelector('#genio-chat').style.clipPath = 'inset(80% 0px 0% 90%)';
}
},500)
}
// This function for add clipath, so user can click link behind iframe
function addEvent(){
document.querySelector('#root-client-chatvolution').onclick = function(ev){
if (window.mobileCheck()){
window.parent.document.querySelector('#genio-chat').style.bottom = "1px";
window.parent.document.querySelector('#genio-chat').style.right = "2px";
window.parent.document.querySelector('#genio-chat').style.width = "99%";
window.parent.document.querySelector('#genio-chat').style.height = "99%";
window.parent.document.querySelector('#genio-chat').style.clipPath = 'none';
} else {
window.parent.document.querySelector('#genio-chat').style.clipPath = 'inset(13% 0px 0% 70%)';
}
waitForElm('.chakra-menu__menuitem[data-index="0"]')
.then((elm) => {
elm.onclick = () => {
setClipPathDown();
}
});
waitForElm('button > svg')
.then((elm) => {
if (elm.classList.contains('chakra-icon')){
elm.onclick = () => {
setClipPathDown();
}
} else {
}
});
}
waitForElm('.chakra-menu__menuitem[data-index="0"]')
.then((elm) => {
elm.onclick = () => {
setClipPathDown();
}
});
waitForElm('button > svg')
.then((elm) => {
if (elm.classList.contains('chakra-icon')){
elm.onclick = () => {
setClipPathDown();
}
} else {
}
});
waitForElm('#container-chat')
.then((elm) => {
if (elm && elm.offsetParent !== null){
if (window.mobileCheck()){
window.parent.document.querySelector('#genio-chat').style.bottom = "1px";
window.parent.document.querySelector('#genio-chat').style.right = "2px";
window.parent.document.querySelector('#genio-chat').style.width = "99%";
window.parent.document.querySelector('#genio-chat').style.height = "99%";
window.parent.document.querySelector('#genio-chat').style.clipPath = 'none';
} else {
window.parent.document.querySelector('#genio-chat').style.clipPath = 'inset(13% 0px 0% 70%)';
}
} else {
setClipPathDown();
}
});
}
<`+ `/script>`
// inset(13% 0px 0% 70%)
// inset(80% 0px 0% 90%)
iframe.setAttribute("style","position:fixed; bottom:5px; right:5px; width:90%; height:90%; margin:0; padding:0;border:none;overflow:hidden; z-index:999999;");
iframe.setAttribute("allowtransparency","true");
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(htmlcode);
iframe.contentWindow.document.close();
</script>