Built motion from commit 377f727e.|2.6.28
[motion2.git] / server / files / chat / iframe.ejs
index ae3ec99..8bbdea1 100644 (file)
 (function() {
-  '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.`);
+    '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) {
+        window.alert(`Domain ${window.location.origin} can't load snippet for '{{{chatWebsiteAddressOrigin}}}'. Please check your website domain in the current XCALLY Chat Website settings.`)
+        return 
     }
-  } catch (error) {
-    window.alert(`Domain ${window.location.origin} can't load snippet for '{{{chatWebsiteAddressOrigin}}}'. Please check your website domain in the current XCALLY Chat Website settings.`);
-    return;
-  }
-
-  // Init all URLs
-  const remoteURL = new URL('{{{remote}}}');
-  const chatOrigin = remoteURL.origin;
-  const chatPath = '/snippet/';
-  const chatStylesPath = chatPath + 'styles/';
-  const chatVersion = '{{{chatVersion}}}';
-
-  // Style setttings
-  const divColor = '<%=div_color%>';
-  const textColor = '<%=text_color%>';
-  const buttonColor = '<%=button_color%>';
-  const backgroungColor = '<%=background_color%>';
-  let alignment = "<%=alignment%>";
-  let verticalAlignment = "<%=verticalAlignment%>";
-
-  // 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;
-
-  // 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];
-
-  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);
+        // Init all URLs
+        const remoteURL = new URL('{{{remote}}}')
+        const chatOrigin = remoteURL.origin
+        const chatPath = '/snippet/'
+        const chatStylesPath = chatPath + 'styles/'
+        const chatVersion = '{{{chatVersion}}}'
+
+        // Style setttings
+        const divColor = '<%=div_color%>'
+        const textColor = '<%=text_color%>'
+        const buttonColor = '<%=button_color%>'
+        const backgroungColor = '<%=background_color%>'
+        let alignment = "<%=alignment%>";
+        let verticalAlignment = "<%=verticalAlignment%>";
+
+        // 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
+
+        // 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]
+
+        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
+                    case 'removeItem':
+                        {   
+                            localStorage.removeItem(key)
+                            event.source.postMessage(
+                                {
+                                action: 'removeItemResult',
+                                key
+                                }, event.origin)
+                        }
+                        break
+                    default:
+                        typeof action === 'string' && console.debug('Unsupported action', action)
+                    break;
+                }
             }
-          }
-          event.source.postMessage(
-            { action: 'getItemResult', key, item },
-            event.origin
-          );
-          break;
-        }
-        case 'removeItem': {
-          localStorage.removeItem(key);
-          event.source.postMessage(
-            { action: 'removeItemResult', key },
-            event.origin
-          );
-          break;
         }
-        default:
-          typeof action === 'string' && console.debug('Unsupported action', action);
-        break;
-      }
-    }
-  }
-
-  // DOM Manipulation
-  let iframe = document.createElement('iframe');
-  // Attributes
-  iframe['id'] = iframeId;
-  iframe['src'] = iframeSrcURL.toString()
-
-  let  iframe_status = false;
-
-  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);
-
-  document.head.appendChild(linkMobile);
-  document.body.appendChild(iframe);
-
-  <% 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;
-  <% } -%>   
-
-  <% 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 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"}, '*');
-    }
+        // DOM Manipulation
+        let iframe = document.createElement('iframe');
+        // Attributes
+        iframe['id'] = iframeId;
+        iframe['src'] = iframeSrcURL.toString()
 
-    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"}, '*');
-    }
+        let  iframe_status = false;
 
-    function toggleChatExpandedRight(){    
-      if (tab_status % 2 === 0) {
-        expandChatRight();
-      }
-      else {
-        collapseChatRight();
-      }
-      tab_status++;
-    }
+        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);
+    
+        document.head.appendChild(linkMobile);
 
-    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;
-
-    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;
-      }
-    }
+        <% if (alignment == 'bottom_right') { -%> // Bottom, right
+            iframe.className = 'motion-chat-iframe-bottom_right';
+            verticalAlignment = 0;
+            document.body.appendChild(iframe);
 
-    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"}, '*');
-    }
+        <% } 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;
 
-    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"}, '*');
-    }
+        <% } 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 toggleChatExpandedLeft() {
-      if (tab_status % 2 === 0) {
-        expandChatLeft();
-      }
-      else {
-        collapseChatLeft();
-      }
-      tab_status++;
-    }
+        <% } -%>   
 
-    document.getElementById("motion-chat-iframe-tab").addEventListener("click", toggleChatExpandedLeft); 
-  <% } -%>
-
-  // 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
+        <% 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.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") {
+            
+            function appendLink(){
+                if(iframe_status == false){
+                    document.body.appendChild(iframe);
+                    iframe_status=true;
+                }      
+            }
+
+            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"}, '*');
+            }
+
+            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++;
+            }
+
+            document.getElementById("motion-chat-iframe-tab").addEventListener("click", toggleChatExpandedRight);
+        <% } else if (alignment == '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;
+
+            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 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"}, '*');
+            }
+
+            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 toggleChatExpandedLeft(){
+                if(tab_status % 2 === 0) {
+                    expandChatLeft()
+                }   
+                else {
+                    collapseChatLeft()
+                }   
+                tab_status++;
+            }
+
+            document.getElementById("motion-chat-iframe-tab").addEventListener("click", toggleChatExpandedLeft); 
+
+            <% } -%>    
+
+        // 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';
+                    // 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 = 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'
+                }, '*');
+                <% } -%> 
+            }
         }
-        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);
-          }
+        <% } -%>    <% }); -%>
+        // 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);
         }
-      },
-      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 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;
-  }
-
-  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";
-    }
-  }
+        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 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;
+        }
+
+        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%"; }
 
-  // hide chat
-  <% if (hideWhenOffline && intervalId != null) { -%>
-    // hide template
-    document.getElementById("motion-chat-iframe-tab").style.display = "none";
-  <% } -%>
+            }
+        }
+    
+        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