Built motion from commit 52c8a02d.|2.6.29
[motion2.git] / server / files / chat / iframe.ejs
index d0a4155..ae77249 100644 (file)
 (function() {
-    'use strict';
-    var iframe = document.createElement('iframe');
-    // Attributes
-    iframe['id'] = 'motion-chat-iframe';
-    iframe['src'] = '{{{remote}}}/snippet?location=' + btoa(window.location.host) + '&version=3.0.0&{{{query}}}';
+  'use strict';
+  try {
+    const chatWebsiteAddress = new URL('{{{chatWebsiteAddressOrigin}}}');
+    if (chatWebsiteAddress.origin !== window.location.origin){
+      throw new Error(`Domain "${window.location.origin}"" can't load snippet for '{{{chatWebsiteAddressOrigin}}}'. Please check your website domain in the current XCALLY Chat Website settings.`);
+    }
+  } catch (error) {
+    console.warn(`Domain ${window.location.origin} can't load snippet for '{{{chatWebsiteAddressOrigin}}}'. Please check your website domain in the current XCALLY Chat Website settings.`);
+    return;
+  }
 
-    var  alignment="<%=alignment%>";
-    var  verticalAlignment="<%=verticalAlignment%>";
-    var  iframe_status = false;
+  // Init all URLs
+  const remoteURL = new URL('{{{remote}}}');
+  const chatOrigin = remoteURL.origin;
+  const chatPath = '/snippet/';
+  const chatStylesPath = chatPath + 'styles/';
+  const chatVersion = '{{{chatVersion}}}';
 
-    document.documentElement.style.setProperty('--xc-ws-div-color', '<%=div_color%>');
-    document.documentElement.style.setProperty('--xc-ws-text-color', '<%=text_color%>');
-    document.documentElement.style.setProperty('--xc-ws-button_color', '<%=button_color%>');
-    document.documentElement.style.setProperty('--xc-ws-background-color', '<%=background_color%>');
-    
-    var link_mobile = document.createElement('link');
-    link_mobile.href = '{{{remote}}}/snippet/styles/mobile.css?version=3.0.0';
-    link_mobile.rel='stylesheet';
-    link_mobile.type = "text/css";
-    document.head.appendChild(link_mobile);
-   <% if (alignment == 'bottom_right') { -%> // Bottom, right
-        iframe.className = 'motion-chat-iframe-bottom_right';
-        verticalAlignment = 0;
-        document.body.appendChild(iframe);
+  // Style setttings
+  const divColor = '<%=div_color%>';
+  const textColor = '<%=text_color%>';
+  const buttonColor = '<%=button_color%>';
+  const backgroungColor = '<%=background_color%>';
+  let alignment = "<%=alignment%>";
+  let verticalAlignment = "<%=verticalAlignment%>";
 
-    <% } else if (alignment == 'right') { -%> // Right
-        iframe.className = 'motion-chat-iframe-right';
-        iframe.style['top'] = verticalAlignment+'%';
-        var  iframe_h = topIframe_calc();
-        topIframe_set(iframe_h);
-        var  div_tab = document.createElement('div');
-        div_tab['id'] = 'motion-chat-iframe-tab';
-        div_tab.className = 'motion-chat-div-right';
-        var  tab_status=0;
+  // iframe URL settings
+  const iframeId = 'motion-chat-iframe';
+  const iframeSrcURL = new URL(chatPath, chatOrigin);
+  const iframeSearchParams = new URLSearchParams('{{{query}}}');
+  iframeSearchParams.append('version', chatVersion);
+  iframeSearchParams.append('location', btoa(window.location.host));
+  iframeSrcURL.search = iframeSearchParams;
 
-    <% } else if (alignment == 'left') { -%> // Left   
-        iframe.className = 'motion-chat-iframe-left';
-        iframe.style['top'] = verticalAlignment+'%';
-        var  iframe_h = topIframe_calc();
-        topIframe_set(iframe_h);
-        var  div_tab = document.createElement('div');
-         div_tab.className = 'motion-chat-div-left';
-         div_tab['id'] ='motion-chat-iframe-tab';
-         var  tab_status=0;
+  // Style URL settings
+  const linkURL =  new URL(chatStylesPath + 'mobile.css', chatOrigin);
+  linkURL.search = new URLSearchParams({ version: chatVersion });
+  const linkMobile = document.createElement('link');
+  linkMobile.type = "text/css";
+  linkMobile.rel='stylesheet';
+  linkMobile.href = linkURL.toString();
 
-    <% } -%>   
+  // Iframe localstorage whitelisting
+  const allowedOrigins = [chatOrigin];
 
-    <% if (alignment == 'right') { -%> // Right
-        topChat_set(iframe_h, verticalAlignment);
-        document.body.appendChild(div_tab);
-        var  html = '<div id="chat_tab_arrow"> <strong><</strong> </div> <span id="chat_tab_text" style="writing-mode: tb-rl; transform: rotate(-180deg);" flex><strong><%=labelText%></strong></span>';
-        div_tab.innerHTML = html;
-        
-        div_tab.style.backgroundColor="<%=div_color%>";
-        document.getElementById("chat_tab_text").style.color= "<%=text_color%>"; 
-        document.getElementById("chat_tab_arrow").style.color="<%=div_color%>"; 
-        document.getElementById("chat_tab_arrow").style.backgroundColor="<%=text_color%>"; 
-        document.getElementById("motion-chat-iframe-tab").style.display="flex";
-        
-        function appendLink(){
-            if(iframe_status == false){
-                document.body.appendChild(iframe);
-                iframe_status=true;
-            }      
+  function remoteLocalStorageEventHandler(event) {
+    if (allowedOrigins.includes(event.origin)) {
+      const { action, key, value } = event.data;
+      const localStorage = window.localStorage;
+      switch(action) {
+        case 'setItem': {
+            localStorage.setItem(key, JSON.stringify(value))
+            event.source.postMessage(
+              { action: 'setItemResult', key },
+              event.origin
+            );
+            break;
+          }
+        case 'getItem': {
+          let item = localStorage.getItem(key);
+          if (item) {
+            try {
+              item = JSON.parse(item);
+            } catch (error) {
+              console.error('Cannot read data from localstorage', error);
+            }
+          }
+          event.source.postMessage(
+            { action: 'getItemResult', key, item },
+            event.origin
+          );
+          break;
         }
-
-        function expandChatRight(){
-            appendLink()
-            div_tab.style.right = '295px';
-            iframe.style.right = '0px';
-            document.getElementById("chat_tab_arrow").innerHTML = "<strong> > </strong>";
-            var iframeEl = document.getElementById('motion-chat-iframe');
-            iframeEl.contentWindow?.postMessage({"evt":"show"}, '*');
+        case 'removeItem': {
+          localStorage.removeItem(key);
+          event.source.postMessage(
+            { action: 'removeItemResult', key },
+            event.origin
+          );
+          break;
         }
+        default:
+          typeof action === 'string' && console.debug('Unsupported action', action);
+        break;
+      }
+    }
+  }
 
-        function collapseChatRight(){
-            appendLink()
-            div_tab.style.right = '0px';
-            iframe.style.right = '-312px';
-            document.getElementById("chat_tab_arrow").innerHTML = "<strong> < </strong>";
-            var iframeEl = document.getElementById('motion-chat-iframe');
-            iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*');
-        }
+  // DOM Manipulation
+  let iframe = document.createElement('iframe');
+  // Attributes
+  iframe['id'] = iframeId;
+  iframe['src'] = iframeSrcURL.toString()
 
-        function toggleChatExpandedRight(){    
-            if(tab_status % 2 === 0) {
-                expandChatRight()
-            }
-            else {
-                collapseChatRight()
-            }
-            tab_status++;
-        }
+  let  iframe_status = false;
 
-        document.getElementById("motion-chat-iframe-tab").addEventListener("click", toggleChatExpandedRight);
-    <% } else if (alignment == 'left') { -%> 
-        topChat_set(iframe_h, verticalAlignment);
-        document.body.appendChild(div_tab);
-        var  html='<div id="chat_tab_arrow"> <strong>></strong> </div><span id="chat_tab_text" style="writing-mode: tb-rl; transform: rotate(-180deg);" flex><strong><%=labelText%></strong></span>';
-        div_tab.innerHTML=html;
+  document.documentElement.style.setProperty('--xc-ws-div-color', divColor);
+  document.documentElement.style.setProperty('--xc-ws-text-color', textColor);
+  document.documentElement.style.setProperty('--xc-ws-button-color', buttonColor);
+  document.documentElement.style.setProperty('--xc-ws-background-color', backgroungColor);
 
-        div_tab.style.backgroundColor="<%=div_color%>";
-        document.getElementById("chat_tab_text").style.color= "<%=text_color%>"; 
-        document.getElementById("chat_tab_arrow").style.color="<%=div_color%>"; 
-        document.getElementById("chat_tab_arrow").style.backgroundColor="<%=text_color%>"; 
-        document.getElementById("motion-chat-iframe-tab").style.display="flex";
+  document.head.appendChild(linkMobile);
+  document.body.appendChild(iframe);
 
-        function appendLink(){
-            if(iframe_status == false){
-                document.body.appendChild(iframe);
-                iframe_status=true;
-            }   
-        }
+  <% if (alignment == 'bottom_right') { -%>
+    // Bottom, right
+    iframe.className = 'motion-chat-iframe-bottom_right';
+    verticalAlignment = 0;
+  <% } else if (alignment == 'right') { -%>
+    // Right
+    iframe.className = 'motion-chat-iframe-right';
+    iframe.style['top'] = verticalAlignment+'%';
+    let iframe_h = topIframe_calc();
+    topIframe_set(iframe_h);
+    let div_tab = document.createElement('div');
+    div_tab['id'] = 'motion-chat-iframe-tab';
+    div_tab.className = 'motion-chat-div-right';
+    let  tab_status=0;
+  <% } else if (alignment == 'left') { -%>
+    // Left
+    iframe.className = 'motion-chat-iframe-left';
+    iframe.style['top'] = verticalAlignment+'%';
+    let iframe_h = topIframe_calc();
+    topIframe_set(iframe_h);
+    let  div_tab = document.createElement('div');
+    div_tab.className = 'motion-chat-div-left';
+    div_tab['id'] ='motion-chat-iframe-tab';
+    let tab_status=0;
+  <% } -%>   
 
-        function expandChatLeft(){
-            appendLink()
-            div_tab.style.left = '295px';
-            iframe.style.left = '0px';
-            document.getElementById("chat_tab_arrow").innerHTML = "<strong> < </strong>";
-            var iframeEl = document.getElementById('motion-chat-iframe');
-            iframeEl.contentWindow?.postMessage({"evt":"show"}, '*');
-        }
-
-        function collapseChatLeft(){
-            appendLink()
-            div_tab.style.left = '0px';
-            iframe.style.left = '-312px';
-            document.getElementById("chat_tab_arrow").innerHTML = "<strong> > </strong>";
-            var iframeEl = document.getElementById('motion-chat-iframe');
-            iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*');
-        }
+  <% if (alignment == 'right') { -%>
+    // RIGHT
+    topChat_set(iframe_h, verticalAlignment);
+    document.body.appendChild(div_tab);
+    let html = '<div id="chat_tab_arrow"> <strong><</strong> </div> <span id="chat_tab_text" style="writing-mode: tb-rl; transform: rotate(-180deg);" flex><strong><%=labelText%></strong></span>';
+    div_tab.innerHTML = html;
+    
+    div_tab.style.backgroundColor = divColor;
+    document.getElementById("chat_tab_text").style.color = textColor; 
+    document.getElementById("chat_tab_arrow").style.color = divColor;
+    document.getElementById("chat_tab_arrow").style.backgroundColor = textColor; 
+    document.getElementById("motion-chat-iframe-tab").style.display = "flex";
+    
+    function appendLink(){
+      if(iframe_status == false){
+        document.body.appendChild(iframe);
+        iframe_status=true;
+      }
+    }
 
-        function toggleChatExpandedLeft(){
-            if(tab_status % 2 === 0) {
-                expandChatLeft()
-            }   
-            else {
-                collapseChatLeft()
-            }   
-            tab_status++;
-        }
+    function expandChatRight(){
+      appendLink();
+      div_tab.style.right = '295px';
+      iframe.style.right = '0px';
+      document.getElementById("chat_tab_arrow").innerHTML = "<strong> > </strong>";
+      let iframeEl = document.getElementById('motion-chat-iframe');
+      iframeEl.contentWindow?.postMessage({"evt":"show"}, '*');
+    }
 
-        document.getElementById("motion-chat-iframe-tab").addEventListener("click", toggleChatExpandedLeft); 
+    function collapseChatRight(){
+      appendLink();
+      div_tab.style.right = '0px';
+      iframe.style.right = '-312px';
+      document.getElementById("chat_tab_arrow").innerHTML = "<strong> < </strong>";
+      let iframeEl = document.getElementById('motion-chat-iframe');
+      iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*');
+    }
 
-        <% } -%>    
+    function toggleChatExpandedRight(){    
+      if (tab_status % 2 === 0) {
+        expandChatRight();
+      }
+      else {
+        collapseChatRight();
+      }
+      tab_status++;
+    }
 
-    // START Events management
-    window.addEventListener('message', function(evt) {
-        switch (evt.data.cmd) {
-            case 'show':
-                <% if (alignment == 'bottom_right') { -%> // Bottom, right
-                    iframe.style.top = 'auto';
-                    iframe.style.bottom = '0px';
-                <% } else if (alignment == 'right') { -%> // Right
-                    iframe.style.right = '0px';
-                    div_tab.style.right = '295px';
-                <% } else if (alignment == 'left') { -%> // Left
-                    iframe.style.left = '0px';
-                    div_tab.style.left = '295px';
-                // Left    
-                <% } -%>                break;
-            case 'hide':
-                <% if (alignment == 'bottom_right') { -%> // Bottom, right
-                iframe.style.top = 'calc(100% - 50px)';
-                <% } else if (alignment == 'right') { -%> // Right
-                    iframe.style.right = '-312px';
-                    div_tab.style['right'] = '0px';
-                <% } else if (alignment == 'left') { -%> // Left
-                    iframe.style.left = '-312px';
-                    div_tab.style.left = '0px';
-                <% } -%>                break;
-            case "init": 
-                <% if (alignment == 'right' || alignment == 'left') { -%> // Bottom, right
-                    div_tab.style.backgroundColor="<%=div_color%>";
-                    document.getElementById("chat_tab_text").style.color= "<%=text_color%>"; 
-                    document.getElementById("chat_tab_arrow").style.color="<%=div_color%>"; 
-                    document.getElementById("chat_tab_arrow").style.backgroundColor="<%=text_color%>"; 
-                    document.getElementById("motion-chat-iframe-tab").style.display="flex";
-                <% } -%>                break;
-            case "offline": 
-                <% if (alignment == 'right' || alignment == 'left') { -%> // Bottom, right
-                    document.getElementById("motion-chat-iframe-tab").style.display="none";
-                <% } -%>                break;
-            default:
-        }
+    document.getElementById("motion-chat-iframe-tab").addEventListener("click", toggleChatExpandedRight);
+  <% } else if (alignment == 'left') { -%> 
+    // LEFT
+    topChat_set(iframe_h, verticalAlignment);
+    document.body.appendChild(div_tab);
+    let  html='<div id="chat_tab_arrow"> <strong>></strong> </div><span id="chat_tab_text" style="writing-mode: tb-rl; transform: rotate(-180deg);" flex><strong><%=labelText%></strong></span>';
+    div_tab.innerHTML = html;
 
-    }, false);
-    // END Events management
+    div_tab.style.backgroundColor = divColor;
+    document.getElementById("chat_tab_text").style.color = textColor;
+    document.getElementById("chat_tab_arrow").style.color = divColor;
+    document.getElementById("chat_tab_arrow").style.backgroundColor = textColor; 
+    document.getElementById("motion-chat-iframe-tab").style.display="flex";
 
-    // START Proactive action management
-    <% proactiveActions.forEach(function(action, index) { -%>        <% if (action.type == 'timeout') { -%>        
-        setTimeout(function() {
-            <% if (alignment == 'right') { -%>            expandChatRight();
-            tab_status++;
-            <% } else if (alignment == 'left') { -%> 
-            expandChatLeft();
-            tab_status++;
-            <% } else { -%> 
-            iframe.style.bottom = '0px';
-            iframe.contentWindow?.postMessage({
-                evt: 'show'
-            }, '*');
-            <% } -%> 
-        }, <%- action.timeout %> * 1000);
-    <% } -%>    <% if (action.type == 'mouseOver') { -%>    var  elements<%- index %> = document.querySelectorAll("<%- action.selector %>");
-    for (var  i = 0; i < elements<%- index %>.length; i++) {
-        elements<%- index %>[i].onmouseover = function() {
-            <% if (alignment == 'right') { -%>            expandChatRight();
-            tab_status++;
-            <% } else if (alignment == 'left') { -%> 
-            expandChatLeft();
-            tab_status++;
-            <% } else { -%> 
-            iframe.style.bottom = '0px';
-            iframe.contentWindow?.postMessage({
-                evt: 'show'
-            }, '*');
-            <% } -%> 
-        }
+    function appendLink() {
+      if (iframe_status == false){
+        document.body.appendChild(iframe);
+        iframe_status=true;
+      }
     }
-    <% } -%>    <% }); -%>    // END Proactive action management
-    
 
-    if (window.DeviceOrientationEvent) {
-        window.addEventListener('orientationchange', function() {
-          if (alignment == 'right'){
-            document.getElementById("chat_tab_arrow").innerHTML = "<strong> < </strong>";
-            var  iframeEl = document.getElementById('motion-chat-iframe');
-            iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*');
-            tab_status = 0;
-            iframe_h = topIframe_calc();
-            topIframe_set(iframe_h);
-            if(typeof div_tab != "undefined") topChat_set(iframe_h, verticalAlignment);
-          }
-          else if (alignment == 'left'){
-            document.getElementById("chat_tab_arrow").innerHTML = "<strong> > </strong>";
-            var  iframeEl = document.getElementById('motion-chat-iframe');
-            iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*');
-            tab_status = 0;
-            iframe_h = topIframe_calc();
-            topIframe_set(iframe_h);
-            if(typeof div_tab != "undefined") topChat_set(iframe_h, verticalAlignment);
-          } }, false);
+    function expandChatLeft() {
+      appendLink();
+      div_tab.style.left = '295px';
+      iframe.style.left = '0px';
+      document.getElementById("chat_tab_arrow").innerHTML = "<strong> < </strong>";
+      let iframeEl = document.getElementById('motion-chat-iframe');
+      iframeEl.contentWindow?.postMessage({"evt":"show"}, '*');
     }
 
-    window.addEventListener("resize", function(event) {
-      var  iframe_h = topIframe_calc();
-      topIframe_set(iframe_h);
-      if(typeof div_tab != "undefined") topChat_set(iframe_h, verticalAlignment);
-    });
+    function collapseChatLeft() {
+      appendLink();
+      div_tab.style.left = '0px';
+      iframe.style.left = '-312px';
+      document.getElementById("chat_tab_arrow").innerHTML = "<strong> > </strong>";
+      let iframeEl = document.getElementById('motion-chat-iframe');
+      iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*');
+    }
 
-    function topIframe_calc(){
-      var height_iframe
-      var  heightD = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
-      var  iframeT = ((heightD/100)*verticalAlignment) + 450;
-      if (heightD < iframeT) {
-         height_iframe = 450 - (iframeT - heightD);
+    function toggleChatExpandedLeft() {
+      if (tab_status % 2 === 0) {
+        expandChatLeft();
       }
-      else { height_iframe = 450; }
-      return height_iframe;
+      else {
+        collapseChatLeft();
+      }
+      tab_status++;
     }
 
-    function topIframe_set(height_iframe){
-        if( height_iframe > 340){
-          iframe.style['height'] = height_iframe +'px';
-          if (alignment == "right" || alignment == "left" )
-          { iframe.style['top'] = verticalAlignment + "%"; }
-          else{ iframe.style['bottom'] = "0%"; }
+    document.getElementById("motion-chat-iframe-tab").addEventListener("click", toggleChatExpandedLeft); 
+  <% } -%>
 
-        }
-        else {
-          iframe.style['height'] = '340px';
-          if (alignment == "right" || alignment == "left" )
-          { iframe.style['top'] = "calc(100% - 340px)"; }
-          else{ iframe.style['bottom'] = "0%"; }
+  // START Events management
+  window.addEventListener(
+    'message',
+    function(evt) {
+      remoteLocalStorageEventHandler(evt)
+      switch (evt.data.cmd) {
+        case 'show':
+          <% if (alignment == 'bottom_right') { -%>
+            // Bottom, right
+            iframe.style.top = 'auto';
+            iframe.style.bottom = '0px';
+          <% } else if (alignment == 'right') { -%>
+            // Right
+            iframe.style.right = '0px';
+            div_tab.style.right = '295px';
+          <% } else if (alignment == 'left') { -%>
+            // Left
+            iframe.style.left = '0px';
+            div_tab.style.left = '295px';
+          <% } -%>
+          break;
+        case 'hide':
+          <% if (alignment == 'bottom_right') { -%>
+            // Bottom, right
+            iframe.style.top = 'calc(100% - 50px)';
+          <% } else if (alignment == 'right') { -%>
+            // Right
+            iframe.style.right = '-312px';
+            div_tab.style['right'] = '0px';
+          <% } else if (alignment == 'left') { -%>
+            // Left
+            iframe.style.left = '-312px';
+            div_tab.style.left = '0px';
+          <% } -%>
+          break;
+        case "init": 
+          <% if (alignment == 'right' || alignment == 'left') { -%>
+            // Bottom, right
+            div_tab.style.backgroundColor = divColor;
+            document.getElementById("chat_tab_text").style.color = textColor; 
+            document.getElementById("chat_tab_arrow").style.color = divColor; 
+            document.getElementById("chat_tab_arrow").style.backgroundColor = textColor; 
+            document.getElementById("motion-chat-iframe-tab").style.display = "flex";
+          <% } -%>
+          break;
+        case "offline": 
+          <% if (alignment == 'right' || alignment == 'left') { -%>
+            // Bottom, right
+            document.getElementById("motion-chat-iframe-tab").style.display = "none";
+          <% } -%>
+          break;
+        default:
+      }
+    },
+    false
+  );
+  // END Events management
 
+  // START Proactive action management
+  <% proactiveActions.forEach(function(action, index) { -%>
+    <% if (action.type == 'timeout') { -%>        
+    setTimeout(function() {
+      <% if (alignment == 'right') { -%>
+        expandChatRight();
+        tab_status++;
+      <% } else if (alignment == 'left') { -%> 
+        expandChatLeft();
+        tab_status++;
+      <% } else { -%> 
+        iframe.style.bottom = '0px';
+        iframe.contentWindow?.postMessage({
+            evt: 'show'
+        }, '*');
+      <% } -%> 
+    }, <%- action.timeout %> * 1000);
+  <% } -%>
+  <% if (action.type == 'mouseOver') { -%>
+  let elements<%- index %> = document.querySelectorAll("<%- action.selector %>");
+  for (let i = 0; i < elements<%- index %>.length; i++) {
+    elements<%- index %>[i].onmouseover = function() {
+      <% if (alignment == 'right') { -%>
+        expandChatRight();
+        tab_status++;
+      <% } else if (alignment == 'left') { -%> 
+        expandChatLeft();
+        tab_status++;
+      <% } else { -%> 
+        iframe.style.bottom = '0px';
+        iframe.contentWindow?.postMessage({
+            evt: 'show'
+        }, '*');
+      <% } -%> 
+    }
+  }
+  <% } -%>    <% }); -%>
+  // END Proactive action management
+
+  if (window.DeviceOrientationEvent) {
+    window.addEventListener(
+      'orientationchange',
+      function() {
+        if (alignment == 'right') {
+          document.getElementById("chat_tab_arrow").innerHTML = "<strong> < </strong>";
+          let iframeEl = document.getElementById('motion-chat-iframe');
+          iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*');
+          tab_status = 0;
+          iframe_h = topIframe_calc();
+          topIframe_set(iframe_h);
+          if (typeof div_tab != "undefined") {
+            topChat_set(iframe_h, verticalAlignment);
+          }
         }
+        else if (alignment == 'left') {
+          document.getElementById("chat_tab_arrow").innerHTML = "<strong> > </strong>";
+          let iframeEl = document.getElementById('motion-chat-iframe');
+          iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*');
+          tab_status = 0;
+          iframe_h = topIframe_calc();
+          topIframe_set(iframe_h);
+          if (typeof div_tab != "undefined") {
+            topChat_set(iframe_h, verticalAlignment);
+          }
+        }
+      },
+      false
+    );
+  }
+
+  window.addEventListener(
+    "resize",
+    function(event) {
+      let iframe_h = topIframe_calc();
+      topIframe_set(iframe_h);
+      if(typeof div_tab != "undefined") {
+        topChat_set(iframe_h, verticalAlignment);
       }
-   
-      function topChat_set(height_iframe, verticalAlignment){
-  
-       if( height_iframe > 340){
-         div_tab.style['top'] = "calc("+ verticalAlignment +"% + " + (height_iframe - 100) + "px)";
-       }
-       else {
-         div_tab.style['top'] = "auto";
-         div_tab.style['bottom'] = "0px";
-       }
     }
+  );
+
+  function topIframe_calc(){
+    let height_iframe
+    let heightD = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+    let iframeT = ((heightD/100)*verticalAlignment) + 450;
+    if (heightD < iframeT) {
+      height_iframe = 450 - (iframeT - heightD);
+    }
+    else {
+      height_iframe = 450;
+    }
+    return height_iframe;
+  }
 
-    <% if (hideWhenOffline && interval != null) { -%> // hide template
-        document.getElementById("motion-chat-iframe-tab").style.display="none";
-    <% } -%>
+  function topIframe_set(height_iframe) {
+    if (height_iframe > 340) {
+      iframe.style['height'] = height_iframe +'px';
+      if (alignment == "right" || alignment == "left") {
+        iframe.style['top'] = verticalAlignment + "%";
+      }
+      else {
+        iframe.style['bottom'] = "0%";
+      }
+    }
+    else {
+      iframe.style['height'] = '340px';
+      if (alignment == "right" || alignment == "left") {
+        iframe.style['top'] = "calc(100% - 340px)";
+      }
+      else {
+        iframe.style['bottom'] = "0%";
+      }
+    }
+  }
+
+  function topChat_set(height_iframe, verticalAlignment) {
+    if (height_iframe > 340) {
+        div_tab.style['top'] = "calc("+ verticalAlignment +"% + " + (height_iframe - 100) + "px)";
+    }
+    else {
+      div_tab.style['top'] = "auto";
+      div_tab.style['bottom'] = "0px";
+    }
+  }
 
+  // hide chat
+  <% if (hideWhenOffline && intervalId != null) { -%>
+    // hide template
+    document.getElementById("motion-chat-iframe-tab").style.display = "none";
+  <% } -%>
 }()); 
\ No newline at end of file