Not logged in.  Login/Logout/Register | List snippets | | Create snippet | Upload image | Upload data

507
LINES

< > BotCompany Repo | #1030086 // Gazelle Chat Bot Template As JavaScript [works except for emoji picker in Firefox]

Document

1  
// don't load again if already loaded
2  
if (typeof dynamicallyLoadJQuery !== "undefined") {} else {
3  
4  
// runnable: function($)
5  
function dynamicallyLoadJQuery(runnable) {
6  
  console.log("document.jQuery: " + document.jQuery);
7  
  console.log("$: " + (typeof $ === 'undefined' ? "none" : $));
8  
  if (document.jQuery != null)
9  
    jQuery(document).ready(runnable);
10  
  else if (typeof $ !== 'undefined')
11  
    $(document).ready(runnable);
12  
  else {
13  
    console.log("need to load jquery");
14  
    var script = document.createElement("SCRIPT");
15  
    script.src = 'https://code.jquery.com/jquery-1.10.2.js';
16  
    script.type = 'text/javascript';
17  
    script.onload = function() {
18  
      console.log("jquery loaded");
19  
      jQuery(document).ready(runnable);
20  
    };
21  
    document.getElementsByTagName("head")[0].appendChild(script);
22  
  }
23  
}
24  
25  
var chatBot_autoOpen = #AUTOOPEN#;
26  
var chatBot_n = #N#;
27  
var chatBot_interval = 1000;
28  
var chatBot_nInitial = chatBot_n;
29  
var chatBot_showActions = false;
30  
var chatBot_language = "";
31  
var chatBot_started = false;
32  
var chatBot_cookie = localStorage.getItem('chatbot-cookie');
33  
var chatBot_notificationsOn = true;
34  
35  
// polyfill for URLSearchParams
36  
37  
(function (w) {
38  
  w.URLSearchParams = w.URLSearchParams || function (searchString) {
39  
      var self = this;
40  
      self.searchString = searchString;
41  
      self.get = function (name) {
42  
          var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(self.searchString);
43  
          if (results == null) {
44  
              return null;
45  
          }
46  
          else {
47  
              return decodeURI(results[1]) || 0;
48  
          }
49  
      };
50  
  }
51  
})(window);
52  
53  
const urlParams = new URLSearchParams(window.location.search);
54  
const botEnable = urlParams.get('bot');
55  
var botConfig = botConfig || urlParams.get('_botConfig');
56  
57  
// allow cookie override in URL
58  
var cookie2 = urlParams.get('cookie');
59  
if (urlParams.get("_newBotCookie") == "1") {
60  
  chatBot_cookie = "conv-" + Math.random().toString(36).substr(2, 9);
61  
  console.log("New cookie made >> " + chatBot_cookie);
62  
}
63  
64  
if (cookie2) {
65  
  chatBot_cookie = cookie2;
66  
  console.log("Cookie override >> " + cookie2);
67  
}
68  
69  
if (#BOT_ON# || botEnable == "1") {
70  
71  
console.log("cookie 1: " + chatBot_cookie);
72  
if (!chatBot_cookie) {
73  
  chatBot_cookie = Math.random().toString(36).substr(2, 9);
74  
  localStorage.setItem('chatbot-cookie', chatBot_cookie);
75  
  console.log("cookie 2: " + chatBot_cookie);
76  
}
77  
78  
// workaround to get $ from wordpress version of jQuery
79  
dynamicallyLoadJQuery(function ($) {
80  
  // from here on we have JQuery
81  
  console.log("loading 2");
82  
  
83  
  // helper for inserting emojis
84  
85  
  $.fn.insertIntoTextArea = function(textToInsert) {
86  
    return this.each(function () {
87  
      var txt = $(this);
88  
      var cursorPosStart = txt.prop('selectionStart');
89  
      var cursorPosEnd = txt.prop('selectionEnd');
90  
      var v = txt.val();
91  
      var textBefore = v.substring(0,  cursorPosStart);
92  
      var textAfter  = v.substring(cursorPosEnd, v.length);
93  
      txt.val(textBefore + textToInsert + textAfter);
94  
      txt.prop('selectionStart', cursorPosStart + textToInsert.length);
95  
      txt.prop('selectionEnd', cursorPosStart + textToInsert.length);
96  
      txt.focus();
97  
    });
98  
  };
99  
100  
  function dynamicallyLoadScript(url, onload, asModule) {
101  
    var script = document.createElement("script");
102  
    script.src = url;
103  
    script.onload = onload;
104  
    if (asModule) script.type = "module";
105  
    document.head.appendChild(script);
106  
  }
107  
  
108  
  function dynamicallyLoadModule(code) {
109  
    var script = document.createElement("script");
110  
    script.type = "module";
111  
    script.appendChild(document.createTextNode(code));
112  
    document.head.appendChild(script);
113  
  }
114  
  
115  
  function loadStyleSheet(url, onLoad) {
116  
    var link = document.createElement('link');
117  
    link.setAttribute("rel", "stylesheet");
118  
    link.setAttribute("type", "text/css");
119  
    link.onload = onLoad;
120  
    link.setAttribute("href", url);
121  
    document.head.appendChild(link);
122  
  }
123  
  
124  
  // load fonts & style sheets
125  
  
126  
  loadStyleSheet("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css");
127  
  loadStyleSheet("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");
128  
  
129  
  // intTelInput.min.css
130  
  loadStyleSheet("https://botcompany.de/serve/1029819?ct=text/css");
131  
132  
  // intlTelInput.min.js
133  
  dynamicallyLoadScript("https://botcompany.de/serve/1029820?ct=text/javascript", function() {
134  
    window.telInput = document.querySelector("#chat_telephone");
135  
    console.log("telInput: " + telInput);
136  
    window.telHandler = window.intlTelInput(window.telInput, {
137  
      utilsScript: "https://botcompany.de/serve/1029822?ct=text/javascript", 
138  
      preferredCountries: ["in", "gb"],
139  
      separateDialCode: true,
140  
      initialCountry: "#COUNTRY#"
141  
    });
142  
  });
143  
144  
  dynamicallyLoadScript("https://gazelle.rocks/emoji-picker/index.js", function() {
145  
    console.log("emoji picker loaded");
146  
    
147  
    dynamicallyLoadModule(`
148  
      import { EmojiButton } from "https://gazelle.rocks/emoji-picker/index.js";
149  
  
150  
      const picker = new EmojiButton();
151  
      const trigger = document.querySelector('#bot-emoji-trigger');
152  
  
153  
      picker.on('emoji', selection => {
154  
        console.log(selection.emoji);
155  
        $("#chat_message").insertIntoTextArea(selection.emoji);
156  
        setTimeout(function() {
157  
          $("#chat_message").focus();
158  
        }, 250);
159  
      });
160  
  
161  
      trigger.addEventListener('click', () => picker.togglePicker(trigger));
162  
    `);
163  
  }, true);
164  
  
165  
  loadStyleSheet("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css");
166  
  loadStyleSheet("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");
167  
168  
  var shouldOpenBot = false, styleSheetLoaded = false;
169  
  
170  
  // bot styles
171  
  loadStyleSheet("https://gazelle.rocks/text/#CSS_ID#?ct=text%2Fcss", function() {
172  
    if (!styleSheetLoaded) {
173  
      console.log("style sheet loaded");
174  
      styleSheetLoaded = true;
175  
      $('.chatbot').show(); // show opener
176  
      if (shouldOpenBot) chatBot_actualOpen();
177  
      if (typeof chatBotLoadedCallback !== 'undefined')
178  
        chatBotLoadedCallback();
179  
    }
180  
  });
181  
182  
  // scripts for bot
183  
  
184  
  window.chatBot_isOpen = function() {
185  
    const chatCloseIcon = document.querySelector(".chat-btn .close-icon");
186  
    return !chatCloseIcon.classList.contains("hide");
187  
  }
188  
  
189  
  window.chatBot_toggle = function() {
190  
    const chatCommentIcon = document.querySelector(".chat-btn .comment-icon");
191  
    const chatCloseIcon = document.querySelector(".chat-btn .close-icon");
192  
  
193  
    var openerText;
194  
    if (!chatBot_isOpen()) {
195  
      chatCommentIcon.classList.add("hide");
196  
      chatCloseIcon.classList.remove("hide");
197  
      chatBot_open();
198  
      openerText = "Send Message";
199  
    } else {
200  
      chatCloseIcon.classList.add("hide");
201  
      chatCommentIcon .classList.remove("hide");
202  
      $('.chat').removeClass('is-visible');
203  
      openerText = "Open Chat Bot";
204  
    }
205  
    $('.chat-btn').attr("title", openerText);
206  
  }
207  
208  
  window.chatBot_open = function() {
209  
    shouldOpenBot = true;
210  
    if (styleSheetLoaded) chatBot_actualOpen();
211  
  }
212  
  
213  
  function chatBot_actualOpen() {
214  
    console.log("Opening chat bot");
215  
    $('.chat').addClass('is-visible');
216  
    $('#chat_message').focus();
217  
    if (!chatBot_started) {
218  
      chatBot_started = true;
219  
      try {
220  
        if (window.GTranslateGetCurrentLang)
221  
          chatBot_language = window.GTranslateGetCurrentLang();
222  
        console.log("lang: " + chatBot_language);
223  
      } catch (err) {
224  
        console.log(err);
225  
      }
226  
227  
      chatBot_start();
228  
    }
229  
  }
230  
  
231  
  function chatBot_showAction(action) {
232  
    console.log(action);
233  
  }
234  
    
235  
  window.chatBot_appendAction = function(action) {
236  
  };
237  
  
238  
  window.chatBot_hideAction = function() {
239  
  };
240  
  
241  
  function standardParams() {
242  
    return "&cookie=" + chatBot_cookie + "&rand=" + Math.random() + (!botConfig ? "" : "&_botConfig=" + encodeURIComponent(botConfig));
243  
  }
244  
  
245  
  window.chatBot_start = function() {
246  
    var url = "#INCREMENTALURL#";
247  
    if (url != '' && url != ("#INC" + "REMENTALURL#")) {
248  
      url += chatBot_n + standardParams();
249  
      if (chatBot_language) url += "&language_default=" + chatBot_language;
250  
      chatBot_showAction("Loading " + url);
251  
      $.get(url, function(src) {
252  
        chatBot_showAction("Loaded " + src.length + " chars");
253  
        var match = src.match(/\d+/);
254  
        if (match != null) {
255  
          var newN = parseInt(match[0]);
256  
          if (src.match(/NEW DIALOG -->/)) {
257  
            //var noNotify = src.match(/NO NOTIFY NEW DIALOG -->/);
258  
            /*console.log("noNotify=" + noNotify);
259  
            if (noNotify)
260  
              $("#chat_converse").addClass('notransition');*/
261  
            $("#chat_converse").html(src);
262  
            /*if (noNotify) {
263  
              $("#chat_converse").offsetHeight; // Trigger a reflow
264  
              $("#chat_converse").removeClass('notransition'); // Re-enable transition
265  
            }*/
266  
          } else {
267  
            // hide old buttons and special input fields
268  
            $(".chat_buttons, .chat-button-span, .chatbot-choice-button").hide();
269  
            $("#chat_telephone, .iti").hide();
270  
            $("#chat_message").show();
271  
            // now append new stuff
272  
            $("#chat_converse").append(src);
273  
          }
274  
          var oldN = chatBot_n;
275  
          chatBot_n = newN;
276  
          $("#chat_converse").scrollTop(1000000);
277  
          chatBot_showAction("Appended " + src.length);
278  
          console.log(src);
279  
        } else
280  
          chatBot_showAction("chatBot_n=" + chatBot_n + " (initial=" + chatBot_nInitial + ")");
281  
        chatBot_appendAction("Rescheduling");
282  
        //var interval = src == '' ? chatBot_interval*10 : chatBot_interval; // slowdown when bug
283  
        var interval = chatBot_interval;
284  
        setTimeout(chatBot_start, interval);
285  
        chatBot_appendAction("Rescheduled");
286  
      }, 'text')
287  
        .fail(function() {
288  
          chatBot_showAction("Rescheduling after fail");
289  
          setTimeout(chatBot_start, chatBot_interval);
290  
        });
291  
    }
292  
  };
293  
294  
  // also focuses input field  
295  
  window.chatBot_setInput = function(text, placeholder) {
296  
    if (placeholder == '') placeholder = "Type a message...";
297  
    $('#chat_message')
298  
      .attr('placeholder', placeholder);
299  
    if (text)
300  
      $('#chat_message').val(text).select().focus();
301  
  };
302  
  
303  
  window.allowEmptyMsg = false;
304  
  
305  
  window.submitAMsg = function(msg) {
306  
    if (!window.allowEmptyMsg && msg == "") return;
307  
    chat_message.value = msg;
308  
    submitMsg();
309  
  };
310  
  
311  
  window.submitMsg = function() {
312  
    var msg = chat_message.value;
313  
    
314  
    if ($("#chat_telephone").is(":visible") && !/^!/.test(msg))
315  
      msg = window.telHandler.getNumber();
316  
317  
    var url = '#MSGURL#' + encodeURIComponent(msg) + standardParams();
318  
    if (chatBot_language) url += "&language_default=" + chatBot_language;
319  
    chatBot_showAction('Submitting ' + url);
320  
    $.get(url);
321  
    chat_message.value = '';
322  
  };
323  
  
324  
  window.playChatNotification = function() {
325  
    if (window.chatNotificationWav == null) {
326  
      console.log("Loading notification wav");
327  
      window.chatNotificationWav = new Audio("#NOTIFICATIONSOUND#");
328  
      if ("#WORKERMODE" != "true")
329  
        window.chatNotificationWav.volume = 0.5;
330  
    }
331  
    console.log("Playing notification mp3");
332  
    window.chatNotificationWav.play();
333  
  };
334  
  
335  
  var originalTitle;
336  
  
337  
  window.setTitleStatus = function(status) {
338  
    if (originalTitle == null)
339  
      originalTitle = document.title;
340  
    if (!document.hasFocus() || document.activeElement !== document.getElementById('chat_message')) {
341  
      if (status) status = status + " ";
342  
    } else status = "";
343  
    document.title = status + originalTitle;
344  
  };
345  
  
346  
  function resetTitle() {
347  
    window.setTitleStatus("");
348  
  }
349  
  
350  
  window.onfocus = resetTitle;
351  
  $('#chat_message').on("focus", resetTitle);
352  
  
353  
  var sendTyping_sent = 0, sendTyping_interval = 5000;
354  
  window.sendTyping = function() {
355  
    var time = Date.now();
356  
    if (time > sendTyping_sent+sendTyping_interval) {
357  
      sendTyping_sent = time;
358  
      var url = "#TYPINGURL#" + standardParams();
359  
      console.log("Loading " + url);
360  
      $.get(url);
361  
    }
362  
  };
363  
  
364  
  window.notiToggle = function() {
365  
    submitAMsg('!toggle notifications');
366  
    var text = $("#chatBot_notiToggleText");
367  
    text.text("Turn " + (/Turn on/.test(text.text()) ? "off" : "on") + " notifications");
368  
  };
369  
  
370  
  var typingCounter = 0, showTyping_interval = 3000;
371  
  window.showTyping = function() {
372  
    console.log("showTyping " + typingCounter);
373  
    typingCounter++;
374  
    if (typingCounter == 1)
375  
      $('#otherSideTyping').css('display', 'block');
376  
    setTimeout(function() {
377  
      console.log("showTyping end " + typingCounter);
378  
      if (--typingCounter <= 0)
379  
        $('#otherSideTyping').css('display', 'none');
380  
    }, showTyping_interval);
381  
  };
382  
  
383  
  window.chat_keyDown = function(event) {
384  
    if (event.keyCode == 13) { submitMsg(); return false; }   
385  
    else if (event.keyCode >= 32 && event.keyCode < 128) sendTyping();
386  
  };
387  
  
388  
  console.log("defined functions");
389  
  
390  
  $('body').append(`
391  
392  
  <div aria-live="polite" aria-atomic="true" aria-relevant="all" id="screenreadertrick"></div>
393  
  <div class="chatbot" style="display: none">
394  
      <div class="chat-box" role="region" aria-labelledby="tchat-label">
395  
          <h1 id="tchat-label" class="sr-only" tabindex="-1">Chat window</h1>
396  
          <div class="chat">
397  
          <div class="main-header">
398  
              <div class="chat_header">
399  
              <div class="four-people" style="
400  
                ">
401  
                <div class="users user-1"></div>
402  
                <div class="users user-2"></div>
403  
                <div class="users user-3"></div>
404  
                <div class="users user-4"></div>
405  
                
406  
                </div>
407  
                  <img src="#BOTIMG#" class="header-user">
408  
                  <h2>$HEADING</h2>
409  
                  <div class="buttons">
410  
                  <!--<button class="fas fa-ellipsis-v"></button>-->
411  
                  <label class="head-dropdown">
412  
                    <div class="head-button">
413  
                      <i class="fas fa-ellipsis-v"></i>
414  
                    </div>
415  
                  
416  
                    <input type="checkbox" class="head-input" id="test">
417  
                  
418  
                    <ul class="head-menu">
419  
                      <li onclick="notiToggle()"><i class="far fa-bell-slash"></i><span id="chatBot_notiToggleText">Turn off notifications</span></li>
420  
                      <li onclick="submitAMsg('!rate conversation')"><i class="fas fa-star"></i>Rate this conversation</li>
421  
                    </ul>
422  
                    
423  
                  </label>
424  
                  <button id="" class="fas fa-chevron-down" title="Close Chat Bot" onclick="chatBot_toggle()"></button>
425  
                  </div>
426  
              </div>
427  
              <div class="header-bottom" style="display: none">
428  
<span class="online">We're online! </span>
429  
<!--<div class="bot-restart" style="">
430  
<button class="fas fa-sync-alt" onclick="submitAMsg('!new dialog')"></button>
431  
</div>-->
432  
</div>
433  
</div>
434  
              <div id="chat_converse" class="chat_conversion chat_converse" tabindex="0" aria-live="polite">
435  
              </div>
436  
              <div id="otherSideTyping" aria-hidden="true" style="display: none">
437  
                  <h4 class="sr-only">#OTHERSIDE# typing</h4>
438  
                  <span class="dot"></span>
439  
                  <span class="dot"></span>
440  
                  <span class="dot"></span>
441  
              </div>
442  
              <div class="chat-bottom">
443  
                  <!--<a class="camera-icon"><i class="fas fa-camera"></i></a>-->
444  
                  <!--<a class="send-icon" title="Send this message" aria-label="Send"><i class="fas fa-paper-plane"></i></a>-->
445  
                  
446  
                  <textarea id="chat_message" class="chat_field chat_message" title="Message to send" aria-label="message to send" placeholder="Type a message..." rows="10" cols="30" name="message" onkeydown="return chat_keyDown(event);"></textarea>
447  
                  <input type="tel" id="chat_telephone" style="display: none" onkeydown="return chat_keyDown(event);">
448  
449  
                  <div class="footer-bottom">
450  
                    <ul>
451  
        <li>
452  
    <a href="#" onclick="submitAMsg('!new dialog'); return false;" class="play-icon" title="Restart Chat Bot"><i class="fa fa-play"></i></a>
453  
        </li>
454  
<li>
455  
    <a href="#" id="bot-emoji-trigger"><i class="far fa-smile-beam"></i></a>
456  
        </li> 
457  
<li>
458  
    <!--<a href="#"><i class="fas fa-paperclip"></i></a>
459  
        </li>-->
460  
<li class="powered-by">
461  
    Powered By
462  
    <a href="http://gaippbots.com/"> <img src="https://gaippbots.com/bot/uploaded-image/146135"></a>
463  
        </li>
464  
465  
466  
    </ul>
467  
                  </div>
468  
              </div>
469  
          </div>
470  
          <a href="#" id="chat-btn" class="chat-btn" title="Open Chat Bot" onclick="if (chatBot_isOpen()) submitMsg(); else chatBot_toggle(); return false;">
471  
            <div class="comment-icon">
472  
              <i class="fas fa-comment-dots"></i>
473  
              <i class="fas fa-pencil-alt"></i>
474  
            </div>
475  
            <div class="close-icon hide"><i class="fas fa-paper-plane"></i></div>
476  
        </a>
477  
478  
      </div>
479  
  </div>
480  
  `);
481  
  
482  
  // design javascripts
483  
  
484  
  /*$('.chat-icon').click(function() {
485  
    chatBot_open();
486  
  });*/
487  
488  
  // for skip link
489  
  $("a[href='#chatbot']").click(chatBot_open);
490  
491  
  // design javascripts end
492  
  
493  
  //MOREINIT
494  
  
495  
  console.log("done init");
496  
  // onLoad
497  
  if (chatBot_autoOpen) {
498  
    console.log("auto-opening chat bot");
499  
    //window.addEventListener('DOMContentLoaded', chatBot_open, false);
500  
    chatBot_toggle();
501  
  }
502  
  
503  
  // end of bot scripts
504  
});
505  
506  
} // if botEnable
507  
} // if not already loaded

Author comment

Began life as a copy of #1029632

download  show line numbers   

Travelled to 6 computer(s): bhatertpkbcr, ekrmjmnbrukm, elmgxqgtpvxh, mqqgnosmbjvj, pyentgdyhuwx, vouqrxazstgt

No comments. add comment

Snippet ID: #1030086
Snippet name: Gazelle Chat Bot Template As JavaScript [works except for emoji picker in Firefox]
Eternal ID of this version: #1030086/19
Text MD5: ebd2a0d272720f359559da57670c65be
Author: stefan
Category: javax / web chat bots
Type: Document
Public (visible to everyone): Yes
Archived (hidden from active list): No
Created/modified: 2020-12-09 19:34:07
Source code size: 18098 bytes / 507 lines
Pitched / IR pitched: No / No
Views / Downloads: 145 / 7068
Version history: 18 change(s)
Referenced in: [show references]