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

489
LINES

< > BotCompany Repo | #1029632 // GAIPP Chat Bot Template As JavaScript [LIVE]

Document

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

Author comment

Began life as a copy of #1028952

download  show line numbers   

Travelled to 8 computer(s): bhatertpkbcr, lqnftawlhpir, mqqgnosmbjvj, pyentgdyhuwx, pzhvpgtvlbxg, tvejysmllsmz, vouqrxazstgt, xrpafgyirdlv

No comments. add comment

Snippet ID: #1029632
Snippet name: GAIPP Chat Bot Template As JavaScript [LIVE]
Eternal ID of this version: #1029632/87
Text MD5: 4f61a53d0cb48da557149ada2dc2d404
Author: stefan
Category: javax / web chat bots
Type: Document
Public (visible to everyone): Yes
Archived (hidden from active list): No
Created/modified: 2020-11-12 11:36:03
Source code size: 17420 bytes / 489 lines
Pitched / IR pitched: No / No
Views / Downloads: 343 / 2394
Version history: 86 change(s)
Referenced in: [show references]