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 |
Began life as a copy of #1029632
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] |