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

361
LINES

< > BotCompany Repo | #1029809 // AVOR Demonstrator 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  
31  
// polyfill for URLSearchParams
32  
33  
(function (w) {
34  
  w.URLSearchParams = w.URLSearchParams || function (searchString) {
35  
      var self = this;
36  
      self.searchString = searchString;
37  
      self.get = function (name) {
38  
          var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(self.searchString);
39  
          if (results == null) {
40  
              return null;
41  
          }
42  
          else {
43  
              return decodeURI(results[1]) || 0;
44  
          }
45  
      };
46  
  }
47  
})(window);
48  
49  
const urlParams = new URLSearchParams(window.location.search);
50  
const botEnable = urlParams.get('bot');
51  
const domain = urlParams.get('_simulateDomain');
52  
53  
// allow cookie override in URL
54  
var cookie2 = urlParams.get('cookie');
55  
if (cookie2) {
56  
  chatBot_cookie = cookie2;
57  
  console.log("Cookie override >> " + cookie2);
58  
}
59  
60  
if (#BOT_ON# || botEnable == "1") {
61  
62  
console.log("cookie 1: " + chatBot_cookie);
63  
if (!chatBot_cookie) {
64  
  chatBot_cookie = Math.random().toString(36).substr(2, 9);
65  
  localStorage.setItem('chatbot-cookie', chatBot_cookie);
66  
  console.log("cookie 2: " + chatBot_cookie);
67  
}
68  
69  
// workaround to get $ from wordpress version of jQuery
70  
dynamicallyLoadJQuery(function ($) {
71  
  console.log("loading 2");
72  
  
73  
  function dynamicallyLoadScript(url) {
74  
    var script = document.createElement("script");
75  
    script.src = url;
76  
    document.head.appendChild(script);
77  
  }
78  
  
79  
  function loadStyleSheet(url, onLoad) {
80  
    var link = document.createElement('link');
81  
    link.setAttribute("rel", "stylesheet");
82  
    link.setAttribute("type", "text/css");
83  
    link.onload = onLoad;
84  
    link.setAttribute("href", url);
85  
    document.head.appendChild(link);
86  
  }
87  
  
88  
  // load fonts & style sheets
89  
  
90  
  loadStyleSheet("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css");
91  
  loadStyleSheet("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");
92  
  
93  
  var shouldOpenBot = false, styleSheetLoaded = false;
94  
  
95  
  // bot styles
96  
  loadStyleSheet("https://botcompany.de/serve/#CSS_ID#?ct=text%2Fcss", function() {
97  
    if (!styleSheetLoaded) {
98  
      console.log("style sheet loaded");
99  
      styleSheetLoaded = true;
100  
      $('.chatbot').show(); // show opener
101  
      if (shouldOpenBot) chatBot_actualOpen();
102  
    }
103  
  });
104  
105  
  // scripts for bot
106  
  
107  
  window.chatBot_toggle = function() {
108  
    const chatCommentIcon = document.querySelector(".chat-btn .comment-icon");
109  
    const chatCloseIcon = document.querySelector(".chat-btn .close-icon");
110  
  
111  
    if (chatCloseIcon.classList.contains("hide")) {
112  
      chatCommentIcon.classList.add("hide");
113  
      chatCloseIcon.classList.remove("hide");
114  
      chatBot_open();
115  
    } else {
116  
      chatCloseIcon.classList.add("hide");
117  
      chatCommentIcon .classList.remove("hide");
118  
      $('.chat').removeClass('is-visible');
119  
    }
120  
  }
121  
122  
  function chatBot_open() {
123  
    shouldOpenBot = true;
124  
    if (styleSheetLoaded) chatBot_actualOpen();
125  
  }
126  
  
127  
  function chatBot_actualOpen() {
128  
    console.log("Opening chat bot");
129  
    $('.chat').addClass('is-visible');
130  
    $('#chat_message').focus();
131  
    if (!chatBot_started) {
132  
      chatBot_started = true;
133  
      try {
134  
        if (window.GTranslateGetCurrentLang)
135  
          chatBot_language = window.GTranslateGetCurrentLang();
136  
        console.log("lang: " + chatBot_language);
137  
      } catch (err) {
138  
        console.log(err);
139  
      }
140  
141  
      chatBot_start();
142  
    }
143  
  }
144  
  
145  
  function chatBot_showAction(action) {
146  
    if (chatBot_showActions) {
147  
      $("#actionMsg").html(action);
148  
      $("#actionMsg").show();
149  
    }
150  
    console.log(action);
151  
  }
152  
    
153  
  window.chatBot_appendAction = function(action) {
154  
    if (chatBot_showActions) {
155  
      $("#actionMsg").append(" | " + action);
156  
      $("#actionMsg").show();
157  
    }
158  
  };
159  
  
160  
  window.chatBot_hideAction = function() {
161  
    $("#actionMsg").hide();
162  
    $("#actionMsg").html("");
163  
  };
164  
  
165  
  window.chatBot_start = function() {
166  
    url = "#INCREMENTALURL#";
167  
    if (url != '' && url != ("#INC" + "REMENTALURL#")) {
168  
      url += chatBot_n + "&cookie=" + chatBot_cookie + "&rand=" + Math.random() + (!domain ? "" : "&_simulateDomain=" + encodeURI(domain));
169  
      if (chatBot_language) url += "&language_default=" + chatBot_language;
170  
      chatBot_showAction("Loading " + url);
171  
      $.get(url, function(src) {
172  
        chatBot_showAction("Loaded " + src.length + " chars");
173  
        var match = src.match(/\d+/);
174  
        if (match != null) {
175  
          var newN = parseInt(match[0]);
176  
          if (src.match(/NEW DIALOG -->/))
177  
            $("#chat_converse").html(src);
178  
          else {
179  
            // hide old buttons and special input fields
180  
            $(".chat_buttons, .chat-button-span, .chatbot-choice-button").hide();
181  
            $("#chat_countrycode").removeClass("visible");
182  
            // now append new stuff
183  
            $("#chat_converse").append(src);
184  
          }
185  
          var oldN = chatBot_n;
186  
          chatBot_n = newN;
187  
          $("#chat_converse").scrollTop(1000000);
188  
          chatBot_showAction("Appended " + src.length);
189  
          console.log(src);
190  
          //if (oldN != 0 && newN > oldN) window.playChatNotification();
191  
        } else
192  
          chatBot_showAction("chatBot_n=" + chatBot_n + " (initial=" + chatBot_nInitial + ")");
193  
        chatBot_appendAction("Rescheduling");
194  
        //var interval = src == '' ? chatBot_interval*10 : chatBot_interval; // slowdown when bug
195  
        var interval = chatBot_interval;
196  
        setTimeout(chatBot_start, interval);
197  
        chatBot_appendAction("Rescheduled");
198  
      }, 'text')
199  
        .fail(function() {
200  
          chatBot_showAction("Rescheduling after fail");
201  
          setTimeout(chatBot_start, chatBot_interval);
202  
        });
203  
    }
204  
  };
205  
206  
  // also focuses input field  
207  
  window.chatBot_setInput = function(text, placeholder) {
208  
    if (placeholder == '') placeholder = "Type a message...";
209  
    $('#chat_message').attr('placeholder', placeholder)
210  
      .val(text)
211  
      .select()
212  
      .focus();
213  
  };
214  
  
215  
  window.allowEmptyMsg = false;
216  
  
217  
  window.submitAMsg = function(msg) {
218  
    if (!window.allowEmptyMsg && msg == "") return;
219  
    chat_message.value = msg;
220  
    submitMsg();
221  
  };
222  
  
223  
  window.submitMsg = function() {
224  
    var msg = chat_message.value;
225  
    if ($("#chat_countrycode").hasClass("visible"))
226  
      msg = $("#chat_countrycode").val() + " " + msg;
227  
      
228  
    url = '#MSGURL#' + encodeURIComponent(msg) + "&cookie=" + chatBot_cookie + "&rand=" + Math.random() + (!domain ? "" : "&_simulateDomain=" + encodeURI(domain));
229  
    if (chatBot_language) url += "&language_default=" + chatBot_language;
230  
    chatBot_showAction('Submitting ' + url);
231  
    $.get(url);
232  
    chat_message.value = '';
233  
  };
234  
  
235  
  window.playChatNotification = function() {
236  
    if (window.chatNotificationWav == null) {
237  
      console.log("Loading notification wav");
238  
      window.chatNotificationWav = new Audio("https://botcompany.de/files/1400403/notification.mp3");
239  
      if ("#WORKERMODE" != "true")
240  
        window.chatNotificationWav.volume = 0.5;
241  
    }
242  
    console.log("Playing notification mp3");
243  
    window.chatNotificationWav.play();
244  
  };
245  
  
246  
  var originalTitle;
247  
  
248  
  window.setTitleStatus = function(status) {
249  
    if (originalTitle == null)
250  
      originalTitle = document.title;
251  
    if (!document.hasFocus() || document.activeElement !== document.getElementById('chat_message')) {
252  
      if (status) status = status + " ";
253  
    } else status = "";
254  
    document.title = status + originalTitle;
255  
  };
256  
  
257  
  function resetTitle() {
258  
    window.setTitleStatus("");
259  
  }
260  
  
261  
  window.onfocus = resetTitle;
262  
  $('#chat_message').on("focus", resetTitle);
263  
  
264  
  var sendTyping_sent = 0, sendTyping_interval = 5000;
265  
  window.sendTyping = function() {
266  
    var time = Date.now();
267  
    if (time > sendTyping_sent+sendTyping_interval) {
268  
      sendTyping_sent = time;
269  
      var url = "#TYPINGURL#&cookie=" + chatBot_cookie + "&rand=" + Math.random();
270  
      console.log("Loading " + url);
271  
      $.get(url);
272  
    }
273  
  };
274  
  
275  
  var typingCounter = 0, showTyping_interval = 3000;
276  
  window.showTyping = function() {
277  
    console.log("showTyping " + typingCounter);
278  
    typingCounter++;
279  
    if (typingCounter == 1)
280  
      $('#otherSideTyping').css('display', 'block');
281  
    setTimeout(function() {
282  
      console.log("showTyping end " + typingCounter);
283  
      if (--typingCounter <= 0)
284  
        $('#otherSideTyping').css('display', 'none');
285  
    }, showTyping_interval);
286  
  };
287  
  
288  
  console.log("defined functions");
289  
  
290  
  $('body').append(`
291  
292  
  <div aria-live="polite" aria-atomic="true" aria-relevant="all" id="screenreadertrick"></div>
293  
  <div class="chatbot" style="display: none">
294  
      <div class="chat-box" role="region" aria-labelledby="tchat-label">
295  
          <h1 id="tchat-label" class="sr-only" tabindex="-1">Chat window</h1>
296  
          <div class="chat">
297  
          <div class="main-header">
298  
              <div class="chat_header">
299  
                  <img src="#BOTIMG#" class="header-user">
300  
                  <h2>$HEADING</h2>
301  
                  <button id="" class="fas fa-redo" title="Restart Chat Bot" onclick="submitAMsg('new dialog');"></button>
302  
              </div>
303  
              <div class="header-bottom" style="display: none">
304  
<span class="online">We're online! </span>
305  
</div>
306  
</div>
307  
              <div id="chat_converse" class="chat_conversion chat_converse" tabindex="0" aria-live="polite">
308  
              </div>
309  
              <div id="otherSideTyping" aria-hidden="true" style="display: none">
310  
                  <h4 class="sr-only">#OTHERSIDE# typing</h4>
311  
                  <span class="dot"></span>
312  
                  <span class="dot"></span>
313  
                  <span class="dot"></span>
314  
              </div>
315  
              <div class="chat-bottom">
316  
                  <!--<a class="camera-icon"><i class="fas fa-camera"></i></a>-->
317  
                  <!--<a class="send-icon" title="Send this message" aria-label="Send"><i class="fas fa-paper-plane"></i></a>-->
318  
                  
319  
                  <select name="chat_countrycode" id="chat_countrycode">#COUNTRYCODE_OPTIONS#</select>
320  
                  <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="if (event.keyCode == 13) { submitMsg(); return false; } else if (event.keyCode >= 32 && event.keyCode < 128) sendTyping();"></textarea>
321  
                  <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>
322  
              </div>
323  
          </div>
324  
          <!--<a class="chat-icon" title="Open Chat Bot"><button id="chatbot" class="fas fa-comment-dots" title="Open Chat Bot"></button></a>-->
325  
          <a href="#" id="chat-btn" class="chat-btn" title="Open Chat Bot" onclick="chatBot_toggle()">
326  
            <div class="comment-icon">
327  
              <i class="fas fa-comment-dots"></i>
328  
              <i class="fas fa-pencil-alt"></i>
329  
            </div>
330  
            <div class="close-icon hide"><i class="fas fa-times"></i></div>
331  
        </a>
332  
333  
      </div>
334  
  </div>
335  
  `);
336  
  
337  
  // design javascripts
338  
  
339  
  /*$('.chat-icon').click(function() {
340  
    chatBot_open();
341  
  });*/
342  
343  
  // for skip link
344  
  $("a[href='#chatbot']").click(chatBot_open);
345  
346  
  // design javascripts end
347  
  
348  
  //MOREINIT
349  
  
350  
  console.log("done init");
351  
  // onLoad
352  
  if (chatBot_autoOpen) {
353  
    console.log("auto-opening chat bot");
354  
    //window.addEventListener('DOMContentLoaded', chatBot_open, false);
355  
    chatBot_open();
356  
  }
357  
  
358  
  // end of bot scripts
359  
});
360  
361  
} // if botEnable

Author comment

Began life as a copy of #1029632

download  show line numbers   

Travelled to 7 computer(s): bhatertpkbcr, djztyncnmsck, mqqgnosmbjvj, pyentgdyhuwx, tvejysmllsmz, veepotesqksf, vouqrxazstgt

No comments. add comment

Snippet ID: #1029809
Snippet name: AVOR Demonstrator Template As JavaScript [LIVE]
Eternal ID of this version: #1029809/4
Text MD5: 4cd56b12f93748aa45dca16eea92f8d4
Author: stefan
Category: javax / web chat bots
Type: Document
Public (visible to everyone): Yes
Archived (hidden from active list): No
Created/modified: 2020-11-16 20:00:11
Source code size: 12825 bytes / 361 lines
Pitched / IR pitched: No / No
Views / Downloads: 259 / 757
Version history: 3 change(s)
Referenced in: [show references]