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 | console.log("loading 2"); |
73 | |
74 | function dynamicallyLoadScript(url) { |
75 | var script = document.createElement("script"); |
76 | script.src = url; |
77 | document.head.appendChild(script); |
78 | } |
79 | |
80 | function loadStyleSheet(url, onLoad) { |
81 | var link = document.createElement('link'); |
82 | link.setAttribute("rel", "stylesheet"); |
83 | link.setAttribute("type", "text/css"); |
84 | link.onload = onLoad; |
85 | link.setAttribute("href", url); |
86 | document.head.appendChild(link); |
87 | } |
88 | |
89 | // load fonts & style sheets |
90 | |
91 | loadStyleSheet("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"); |
92 | loadStyleSheet("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"); |
93 | |
94 | var shouldOpenBot = false, styleSheetLoaded = false; |
95 | |
96 | // bot styles |
97 | loadStyleSheet("https://botcompany.de/serve/#CSS_ID#?ct=text%2Fcss", function() { |
98 | if (!styleSheetLoaded) { |
99 | console.log("style sheet loaded"); |
100 | styleSheetLoaded = true; |
101 | $('.chatbot').show(); // show opener |
102 | if (shouldOpenBot) chatBot_actualOpen(); |
103 | } |
104 | }); |
105 | |
106 | // scripts for bot |
107 | |
108 | window.chatBot_toggle = function() { |
109 | const chatCommentIcon = document.querySelector(".chat-btn .comment-icon"); |
110 | const chatCloseIcon = document.querySelector(".chat-btn .close-icon"); |
111 | |
112 | var openerText; |
113 | if (chatCloseIcon.classList.contains("hide")) { |
114 | chatCommentIcon.classList.add("hide"); |
115 | chatCloseIcon.classList.remove("hide"); |
116 | chatBot_open(); |
117 | openerText = "Close Chat Bot"; |
118 | } else { |
119 | chatCloseIcon.classList.add("hide"); |
120 | chatCommentIcon .classList.remove("hide"); |
121 | $('.chat').removeClass('is-visible'); |
122 | openerText = "Open Chat Bot"; |
123 | } |
124 | $('.chat-btn').attr("title", openerText); |
125 | } |
126 | |
127 | function chatBot_open() { |
128 | shouldOpenBot = true; |
129 | if (styleSheetLoaded) chatBot_actualOpen(); |
130 | } |
131 | |
132 | function chatBot_actualOpen() { |
133 | console.log("Opening chat bot"); |
134 | $('.chat').addClass('is-visible'); |
135 | $('#chat_message').focus(); |
136 | if (!chatBot_started) { |
137 | chatBot_started = true; |
138 | try { |
139 | if (window.GTranslateGetCurrentLang) |
140 | chatBot_language = window.GTranslateGetCurrentLang(); |
141 | console.log("lang: " + chatBot_language); |
142 | } catch (err) { |
143 | console.log(err); |
144 | } |
145 | |
146 | chatBot_start(); |
147 | } |
148 | } |
149 | |
150 | function chatBot_showAction(action) { |
151 | console.log(action); |
152 | } |
153 | |
154 | window.chatBot_appendAction = function(action) { |
155 | }; |
156 | |
157 | window.chatBot_hideAction = function() { |
158 | }; |
159 | |
160 | function standardParams() { |
161 | return "&cookie=" + chatBot_cookie + "&rand=" + Math.random() + (!botConfig ? "" : "&_botConfig=" + encodeURIComponent(botConfig)); |
162 | } |
163 | |
164 | window.chatBot_start = function() { |
165 | url = "#INCREMENTALURL#"; |
166 | if (url != '' && url != ("#INC" + "REMENTALURL#")) { |
167 | url += chatBot_n + standardParams(); |
168 | if (chatBot_language) url += "&language_default=" + chatBot_language; |
169 | chatBot_showAction("Loading " + url); |
170 | $.get(url, function(src) { |
171 | chatBot_showAction("Loaded " + src.length + " chars"); |
172 | var match = src.match(/\d+/); |
173 | if (match != null) { |
174 | var newN = parseInt(match[0]); |
175 | if (src.match(/NEW DIALOG -->/)) |
176 | $("#chat_converse").html(src); |
177 | else { |
178 | // hide old buttons and special input fields |
179 | $(".chat_buttons, .chat-button-span, .chatbot-choice-button").hide(); |
180 | $("#chat_countrycode").removeClass("visible"); |
181 | // now append new stuff |
182 | $("#chat_converse").append(src); |
183 | } |
184 | var oldN = chatBot_n; |
185 | chatBot_n = newN; |
186 | $("#chat_converse").scrollTop(1000000); |
187 | chatBot_showAction("Appended " + src.length); |
188 | console.log(src); |
189 | } else |
190 | chatBot_showAction("chatBot_n=" + chatBot_n + " (initial=" + chatBot_nInitial + ")"); |
191 | chatBot_appendAction("Rescheduling"); |
192 | //var interval = src == '' ? chatBot_interval*10 : chatBot_interval; // slowdown when bug |
193 | var interval = chatBot_interval; |
194 | setTimeout(chatBot_start, interval); |
195 | chatBot_appendAction("Rescheduled"); |
196 | }, 'text') |
197 | .fail(function() { |
198 | chatBot_showAction("Rescheduling after fail"); |
199 | setTimeout(chatBot_start, chatBot_interval); |
200 | }); |
201 | } |
202 | }; |
203 | |
204 | // also focuses input field |
205 | window.chatBot_setInput = function(text, placeholder) { |
206 | if (placeholder == '') placeholder = "Type a message..."; |
207 | if (text) |
208 | $('#chat_message').val(text); |
209 | $('#chat_message').attr('placeholder', placeholder) |
210 | .select() |
211 | .focus(); |
212 | }; |
213 | |
214 | window.allowEmptyMsg = false; |
215 | |
216 | window.submitAMsg = function(msg) { |
217 | if (!window.allowEmptyMsg && msg == "") return; |
218 | chat_message.value = msg; |
219 | submitMsg(); |
220 | }; |
221 | |
222 | window.submitMsg = function() { |
223 | var msg = chat_message.value; |
224 | if ($("#chat_countrycode").hasClass("visible") && !/^!/.test(msg)) |
225 | msg = $("#chat_countrycode").val() + " " + msg; |
226 | |
227 | url = '#MSGURL#' + encodeURIComponent(msg) + standardParams(); |
228 | if (chatBot_language) url += "&language_default=" + chatBot_language; |
229 | chatBot_showAction('Submitting ' + url); |
230 | $.get(url); |
231 | chat_message.value = ''; |
232 | }; |
233 | |
234 | window.playChatNotification = function() { |
235 | if (window.chatNotificationWav == null) { |
236 | console.log("Loading notification wav"); |
237 | window.chatNotificationWav = new Audio("https://botcompany.de/files/1400403/notification.mp3"); |
238 | if ("#WORKERMODE" != "true") |
239 | window.chatNotificationWav.volume = 0.5; |
240 | } |
241 | console.log("Playing notification mp3"); |
242 | window.chatNotificationWav.play(); |
243 | }; |
244 | |
245 | var originalTitle; |
246 | |
247 | window.setTitleStatus = function(status) { |
248 | if (originalTitle == null) |
249 | originalTitle = document.title; |
250 | if (!document.hasFocus() || document.activeElement !== document.getElementById('chat_message')) { |
251 | if (status) status = status + " "; |
252 | } else status = ""; |
253 | document.title = status + originalTitle; |
254 | }; |
255 | |
256 | function resetTitle() { |
257 | window.setTitleStatus(""); |
258 | } |
259 | |
260 | window.onfocus = resetTitle; |
261 | $('#chat_message').on("focus", resetTitle); |
262 | |
263 | var sendTyping_sent = 0, sendTyping_interval = 5000; |
264 | window.sendTyping = function() { |
265 | var time = Date.now(); |
266 | if (time > sendTyping_sent+sendTyping_interval) { |
267 | sendTyping_sent = time; |
268 | var url = "#TYPINGURL#" + standardParams(); |
269 | console.log("Loading " + url); |
270 | $.get(url); |
271 | } |
272 | }; |
273 | |
274 | window.notiToggle = function() { |
275 | submitAMsg('!toggle notifications'); |
276 | var text = $("#chatBot_notiToggleText"); |
277 | text.text("Turn " + (/Turn on/.test(text.text()) ? "off" : "on") + " notifications"); |
278 | }; |
279 | |
280 | var typingCounter = 0, showTyping_interval = 3000; |
281 | window.showTyping = function() { |
282 | console.log("showTyping " + typingCounter); |
283 | typingCounter++; |
284 | if (typingCounter == 1) |
285 | $('#otherSideTyping').css('display', 'block'); |
286 | setTimeout(function() { |
287 | console.log("showTyping end " + typingCounter); |
288 | if (--typingCounter <= 0) |
289 | $('#otherSideTyping').css('display', 'none'); |
290 | }, showTyping_interval); |
291 | }; |
292 | |
293 | console.log("defined functions"); |
294 | |
295 | $('body').append(` |
296 | |
297 | <div aria-live="polite" aria-atomic="true" aria-relevant="all" id="screenreadertrick"></div> |
298 | <div class="chatbot" style="display: none"> |
299 | <div class="chat-box" role="region" aria-labelledby="tchat-label"> |
300 | <h1 id="tchat-label" class="sr-only" tabindex="-1">Chat window</h1> |
301 | <div class="chat"> |
302 | <div class="main-header"> |
303 | <div class="chat_header"> |
304 | <div class="four-people" style=" |
305 | "> |
306 | <div class="users user-1"></div> |
307 | <div class="users user-2"></div> |
308 | <div class="users user-3"></div> |
309 | <div class="users user-4"></div> |
310 | |
311 | </div> |
312 | <img src="#BOTIMG#" class="header-user"> |
313 | <h2>$HEADING</h2> |
314 | <div class="buttons"> |
315 | <!--<button class="fas fa-ellipsis-v"></button>--> |
316 | <label class="head-dropdown"> |
317 | <div class="head-button"> |
318 | <i class="fas fa-ellipsis-v"></i> |
319 | </div> |
320 | |
321 | <input type="checkbox" class="head-input" id="test"> |
322 | |
323 | <ul class="head-menu"> |
324 | <li onclick="notiToggle()"><i class="far fa-bell-slash"></i><span id="chatBot_notiToggleText">Turn off notifications</span></li> |
325 | <li onclick="submitAMsg('!rate conversation')"><i class="fas fa-star"></i>Rate this conversation</li> |
326 | </ul> |
327 | |
328 | </label> |
329 | <button id="" class="fas fa-chevron-down" title="Close Chat Bot" onclick="chatBot_toggle()"></button> |
330 | </div> |
331 | </div> |
332 | <div class="header-bottom"> |
333 | <span class="online">We're online! </span> |
334 | <div class="bot-restart" style=""> |
335 | <button class="fas fa-sync-alt" onclick="submitAMsg('!new dialog')"></button> |
336 | </div> |
337 | </div> |
338 | </div> |
339 | <div id="chat_converse" class="chat_conversion chat_converse" tabindex="0" aria-live="polite"> |
340 | <div class="bot-questions"> |
341 | <div class="question-title"> |
342 | <h4>Choose the below answer</h4> |
343 | </div> |
344 | <div class="all-options"> |
345 | <a href="#" class="option-single">Training for Students</a> |
346 | <a href="#" class="option-single"> Training for Working Professionals |
347 | |
348 | </a> |
349 | <a href="#" class="option-single"> Training for Business |
350 | |
351 | </a> |
352 | <a href="#" class="option-single"> Training for Entrepreneurs |
353 | |
354 | </a> |
355 | </div> |
356 | </div> |
357 | </div> |
358 | <div id="otherSideTyping" aria-hidden="true" style="display: none"> |
359 | <h4 class="sr-only">#OTHERSIDE# typing</h4> |
360 | <span class="dot"></span> |
361 | <span class="dot"></span> |
362 | <span class="dot"></span> |
363 | </div> |
364 | <div class="chat-bottom"> |
365 | <!--<a class="camera-icon"><i class="fas fa-camera"></i></a>--> |
366 | <!--<a class="send-icon" title="Send this message" aria-label="Send"><i class="fas fa-paper-plane"></i></a>--> |
367 | |
368 | <select name="chat_countrycode" id="chat_countrycode">#COUNTRYCODE_OPTIONS#</select> |
369 | <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> |
370 | <div class="footer-bottom"> |
371 | <ul> |
372 | <li> |
373 | <a href="#" class="play-icon"><i class="fa fa-play"></i></a> |
374 | </li> |
375 | <li> |
376 | <a href="#"><i class="far fa-smile-beam"></i></a> |
377 | </li> |
378 | <li> |
379 | <a href="#"><i class="fas fa-paperclip"></i></a> |
380 | </li> |
381 | <li class="powered-by"> |
382 | Powered By |
383 | <a href="http://gaippbots.com/"> <img src="https://gaippbots.com/bot/uploaded-image/146135"></a> |
384 | </li> |
385 | |
386 | |
387 | </ul> |
388 | </div> |
389 | <!--<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>--> |
390 | </div> |
391 | </div> |
392 | <a href="#" id="chat-btn" class="chat-btn" title="Open Chat Bot" onclick="chatBot_toggle()"> |
393 | <div class="comment-icon"> |
394 | <i class="fas fa-comment-dots"></i> |
395 | <i class="fas fa-pencil-alt"></i> |
396 | </div> |
397 | <div class="close-icon hide"><i class="fas fa-paper-plane"></i></div> |
398 | </a> |
399 | |
400 | </div> |
401 | </div> |
402 | `); |
403 | |
404 | // design javascripts |
405 | |
406 | /*$('.chat-icon').click(function() { |
407 | chatBot_open(); |
408 | });*/ |
409 | |
410 | // for skip link |
411 | $("a[href='#chatbot']").click(chatBot_open); |
412 | |
413 | // design javascripts end |
414 | |
415 | //MOREINIT |
416 | |
417 | console.log("done init"); |
418 | // onLoad |
419 | if (chatBot_autoOpen) { |
420 | console.log("auto-opening chat bot"); |
421 | //window.addEventListener('DOMContentLoaded', chatBot_open, false); |
422 | chatBot_open(); |
423 | } |
424 | |
425 | // end of bot scripts |
426 | }); |
427 | |
428 | } // if botEnable |
Began life as a copy of #1029632
Travelled to 5 computer(s): bhatertpkbcr, mqqgnosmbjvj, pyentgdyhuwx, tvejysmllsmz, vouqrxazstgt
No comments. add comment
Snippet ID: | #1029849 |
Snippet name: | TheAdmi Chat Bot Template As JavaScript [backup before new telephone input] |
Eternal ID of this version: | #1029849/1 |
Text MD5: | 478ed89ac8f8e903530bc8c410b9ad54 |
Author: | stefan |
Category: | javax / web chat bots |
Type: | Document |
Public (visible to everyone): | Yes |
Archived (hidden from active list): | No |
Created/modified: | 2020-09-22 15:31:27 |
Source code size: | 14975 bytes / 428 lines |
Pitched / IR pitched: | No / No |
Views / Downloads: | 230 / 86 |
Referenced in: | [show references] |