Advertisement
Webtest-HookandLoom

tidio close chat button (with memory)

Sep 30th, 2022 (edited)
785
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 2.16 KB | Source Code | 0 0
  1. /* tidio close button with x days memory (no jQuery needed) */
  2. (function() {
  3.     tidio_close_data = {
  4.         key: 'tidio-close-stamp'
  5.     ,   ele_parent: '#button.chat-closed #button-body'
  6.     ,   ele_id: 'close_button'
  7.     };
  8.     tidio_close_data.ele_select = tidio_close_data.ele_parent + ' #' + tidio_close_data.ele_id;
  9.    
  10.     // close, and set timestamp
  11.     var close_tidio_chat = function(e) {
  12.         e.stopPropagation();
  13.  
  14.         window.tidioChatApi.close();
  15.         window.tidioChatApi.hide();
  16.        
  17.         if (localStorage) {
  18.             localStorage.setItem(tidio_close_data.key, Date.now());
  19.         }
  20.     }
  21.    
  22.     // inject close button as a span positioned above and right of floating chat button
  23.     function addCloseButton() {
  24.        
  25.         var $doc = document.getElementById("tidio-chat-iframe").contentDocument;
  26.         var $parent = $doc.querySelector(tidio_close_data.ele_parent);
  27.        
  28.         $parent.insertAdjacentHTML('beforeend', '<span id="' + tidio_close_data.ele_id + '">X</span>');
  29.        
  30.         // now get this element we just inserted
  31.         tidio_close_data.ele = $doc.querySelector(tidio_close_data.ele_select);
  32.         tidio_close_data.ele.addEventListener("click", close_tidio_chat, true);
  33.  
  34.         // styling for button offset, style as you want
  35.         var $css = `{
  36.             font-size: 16px;
  37.             font-weight: bold;
  38.             position: absolute;
  39.             width: 22px;
  40.             background-color: #D66166;
  41.             color: white;
  42.             border-radius: 12px;
  43.             top: -20px;
  44.             right: -20px;
  45.         }`;
  46.  
  47.         var $tidio = '<style type="text/css">' + tidio_close_data.ele_select + ' ' + $css + '</style>';
  48.         $doc.head.insertAdjacentHTML('beforeend', $tidio);
  49.     }
  50.    
  51.     function checkAndHide() {
  52.         if (localStorage) {
  53.             $stamp = localStorage.getItem(tidio_close_data.key);
  54.            
  55.             if ($stamp) {
  56.                 // if stamp exists and diff < duration, we hide the button.
  57.                 $duration_days = 7;
  58.                 $duration = $duration_days * (60 * 60 * 24 * 1000);
  59.                
  60.                 if (Date.now() - $stamp < $duration) {
  61.                     tidio_close_data.ele.click();
  62.                 }
  63.             }
  64.         }
  65.     }
  66.    
  67.     function onTidioChatApiReady() {
  68.         addCloseButton();
  69.         checkAndHide();
  70.     }
  71.    
  72.     if (window.tidioChatApi) {
  73.         window.tidioChatApi.on('ready', onTidioChatApiReady);
  74.     } else {
  75.         document.addEventListener('tidioChat-ready', onTidioChatApiReady);
  76.     }
  77. })();
Tags: tidio livechat
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement