https://chato.ninjamock.com/js/chatbotWidget.js?v=639259453358747051

1
2///use: "window.OnChatoWidgetReady" to wait for the api to be ready
3(function () {
4
5    let defaultConfig = {
6        isLoadedInmediately: true,
7        theme: 'light',
8    }
9    const script = document.currentScript;
10    var container = document.createElement("div");
11    const EventEmitter = {
12        events: {},
13
14        // Método para suscribirse a un evento
15        on(event, listener) {
16            if (!this.events[event]) {
17                this.events[event] = [];
18            }
19            this.events[event].push(listener);
20        },
21
22        // Método para eliminar la suscripción a un evento
23        off(event, listenerToRemove) {
24            if (!this.events[event]) return;
25
26            this.events[event] = this.events[event].filter(listener => listener !== listenerToRemove);
27        },
28
29        // Método para emitir un evento
30        emit(event, data) {
31            if (!this.events[event]) return;
32
33            this.events[event].forEach(listener => listener(data));
34        }
35    };
36    function EmitEvent(event, params) {
37        EventEmitter.emit(event, params);
38    };
39    function initChatbotWidget(externalConfig) {
40        let config = {
41            ...defaultConfig,
42            ...externalConfig || {}
43        };
44        // Crear el iframe
45        let iframe = document.createElement("iframe");
46        iframe.id = 'chatoWidgetFrame';
47        function loadStyles() {
48            // Crear y agregar estilos en el head
49            var style = document.createElement('style');
50            style.type = 'text/css';
51            style.innerHTML = `
52                #chatbot-widget-container {
53                    display: initial;
54                    z-index: 99999999;
55                    position: fixed !important;
56                    bottom: 0 !important;
57                    right: 0 !important;
58                    min-height: 70px;
59                    min-width: 60px;
60                }
61                #chatbot-widget-container iframe {
62                    display: initial !important;
63                    width: 100% !important;
64                    height: 100% !important;
65                    border: none !important;
66                    position: absolute !important;
67                    bottom: 0 !important;
68                    right: 0 !important;
69                    background: transparent !important;
70                }
71        `;
72            document.head.appendChild(style);
73        };
74        
75
76        function load(sessionData) {
77            loadStyles();
78            
79            let botId = script.getAttribute("data-bot-id") || "9D6E9AA4-FC84-4DDC-8B7A-4C52E04D514C";
80            let isOpen = false;
81            sessionData = sessionData || config.sessionData;
82            //console.log(sessionData);
83            //console.log(botId);
84            let queryParams = {
85                botId: botId,
86                domain: encodeURIComponent(origin),
87                url: encodeURIComponent(location.href)
88            }
89            if (sessionData && !localStorage.getItem('chato-session-data') || config.overwriteSessionData) {
90                let data = sessionData.jsonData;
91                let chatoSessionData = {
92                    url : location.href
93                }
94                if (sessionData.jsonData && typeof sessionData.jsonData === 'string') {
95
96                    data = JSON.parse(sessionData.jsonData || '{}');
97
98                    data = JSON.stringify( { ...data, ...chatoSessionData });
99                }
100                else if (sessionData.jsonData && typeof sessionData.jsonData === 'object') {
101
102                    data = JSON.stringify({ ...sessionData.jsonData, ...chatoSessionData });
103                }
104                
105                let userData = {
106                    name: sessionData.name || 'Guest',
107                    email: sessionData.email,
108                    languageId: sessionData.language || 'en',
109                    jsonData: data,
110                    userId: sessionData.userId
111                };
112                queryParams.data = encodeURIComponent(JSON.stringify(userData));
113                localStorage.setItem('chato-session-data', 'ok');
114            }
115            // Crear el contenedor del iframe
116            
117            container.id = "chatbot-widget-container";
118            document.body.appendChild(container);
119
120            
121            let baseUri = 'https://chato.ninjamock.com/chatbot/';
122            //if (window.env && window.env.environment === 'Development')
123            //    iframe.src = "/chatbot/?botId=" + botId + "&origin=" + encodeURIComponent(origin);
124            //else
125            //    iframe.src = "https://chato.ninjamock.com/chatbot/?botId=" + botId + "&origin=" + encodeURIComponent(origin);
126            if (window.env && window.env.environment === 'Development')
127                baseUri = "/chatbot/";
128            else
129                baseUri = "https://chato.ninjamock.com/chatbot/";
130
131            let queryKeys = Object.keys(queryParams);
132            for (var i = 0; i < queryKeys.length; i++) {
133                var k = queryKeys[i];
134                if (queryParams[k]) {
135                    baseUri = baseUri + (i == 0 ? '?' : '&') + k + '=' + queryParams[k];
136                }
137                if (i == queryKeys.length - 1) {
138                    baseUri += '&timespan=' + new Date().getTime()
139                }
140            }
141            
142            function isMobileDevice() {
143                return /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
144            }
145            function resize() {
146                
147                const screenHeight = window.innerHeight;
148                const screenWidth = window.innerWidth;
149                if (isMobileDevice() && isOpen) {
150                    container.style.width = '100%';
151                    container.style.height = '100%';
152
153                }
154                else if (isOpen) {
155                    let height = 760;
156                    let width = 450;
157                    if (screenHeight < 760) {
158                        height = screenHeight - 20;
159                    }
160                    if (screenWidth < 380) {
161                        width = screenWidth;
162                    }
163                    //container.style.width = '380px';
164                    container.style.width = `${width}px`;
165                    container.style.maxWidth = '500px';
166                    //container.style.height = '560px';
167                    container.style.height = `${height}px`;
168                    container.style.maxHeight = '760px';
169                }
170                else {
171                    container.style.width = '60px';
172                    container.style.height = '70px';
173                }
174            }
175            //console.log(baseUri);
176            iframe.src = baseUri;

177            //console.log('load chatbot-widget....');
178            container.appendChild(iframe);
179            container.style.display = 'none';
180            window.addEventListener("message", function (event) {
181                //console.log('message toggle popupchat');
182              
183                if (event.data.action === 'onClosePopup') {
184                    //container.style.width = '60px';
185                    //container.style.height = '70px';
186                    isOpen = false;
187                    EmitEvent('close', {});
188                    resize();
189                }
190                else if (event.data.action === 'onShowPopup') {
191                    //container.style.width = '380px';
192                    //container.style.height = '560px';
193                    isOpen = true;
194                    EmitEvent('open', {});
195                    resize();
196                }
197                else if (event.data.action === 'active') {
198                    container.style.display = 'block ';
199                }
200                else if (event.data.action === 'remove') {
201                    container.style.display = 'none';
202                    iframe.remove();
203                }
204                else if (event.data.action === 'displayImage') {
205                    displayImageView(event.data.url);
206                }
207            });
208            window.addEventListener('resize', resize);
209
210        };
211        function displayImageView(url) {
212            let imageViewer = document.createElement('div');
213            imageViewer.style.position = 'fixed';
214            imageViewer.style.top = '0';
215            imageViewer.style.left = '0';
216            imageViewer.style.width = '100%';
217            imageViewer.style.height = '100%';
218            imageViewer.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
219            imageViewer.style.display = 'flex';
220            imageViewer.style.justifyContent = 'center';
221            imageViewer.style.alignItems = 'center';
222            imageViewer.style.zIndex = '999999999';
223            imageViewer.style.cursor = 'pointer';
224            imageViewer.onclick = function () {
225                imageViewer.remove();
226            };
227          
228
229            let imgContainer = document.createElement('div');
230            imgContainer.style.display = 'flex';
231            imgContainer.style.justifyContent = 'center';
232            imgContainer.style.alignItems = 'center';
233            imgContainer.style.width = '70%';
234            imgContainer.style.height = '80%';
235            imgContainer.style.backgroundColor = 'white';
236            imgContainer.style.borderRadius = '5px';
237            imgContainer.style.overflow = 'hidden';
238            imgContainer.style.padding = '1rem';
239            imgContainer.style.position = 'relative';
240            imageViewer.appendChild(imgContainer)
241            imgContainer.onclick = function (e) {
242                e.stopPropagation();
243            };
244
245            let closeBtn = document.createElement('div');
246            closeBtn.style.position = 'absolute';
247            closeBtn.style.top = '10px';
248            closeBtn.style.right = '10px';
249            closeBtn.style.width = '30px';
250            closeBtn.style.height = '30px';
251            closeBtn.style.backgroundColor = 'white';
252            closeBtn.style.borderRadius = '50%';
253            closeBtn.style.display = 'flex';
254            closeBtn.style.justifyContent = 'center';
255            closeBtn.style.alignItems = 'center';
256            closeBtn.style.cursor = 'pointer';
257            closeBtn.style.opacity = '0.75';
258            closeBtn.style.background = "transparent url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e\") center / 1em auto no-repeat"
259            closeBtn.onclick = function () {
260                imageViewer.remove();
261            };
262            //let closeIcon = document.createElement('i');
263            //closeIcon.className = 'fas fa-times';
264            //closeBtn.appendChild(closeIcon);
265            imgContainer.appendChild(closeBtn);
266
267            let img = document.createElement('img');
268            img.src = url;
269            img.style.maxWidth = '100%';
270            img.style.maxHeight = '100%';
271            //img.style.cursor = 'pointer';

272            img.onclick = function (e) {
273                e.stopPropagation();
274            };
275            imgContainer.appendChild(img);
276            document.body.appendChild(imageViewer);
277
278        }
279        function open() {
280            iframe.contentWindow.postMessage({ type: 'chato-widget-origin', action: 'popup-open' }, '*');
281        };
282        function close() {
283            iframe.contentWindow.postMessage({ type: 'chato-widget-origin', action: 'popup-close' }, '*');
284        }
285        function remove() {
286            //let frame = document.getElementById('chatoWidgetFrame');
287            
288            //if (frame)
289            iframe.remove();
290            //window.removeEventListener('resize',)
291        }
292        function show() {
293            //let divCont = document.getElementById('chatbot-widget-container');
294            if (container) {
295                container.style.display = 'block';
296            }
297        };
298        function hide() {
299            //let divCont = document.getElementById('chatbot-widget-container');
300            if (container) {
301                container.style.display = 'none';
302            }
303        };
304        function clear() {
305            sessionStorage.removeItem('chato-session-data');
306            iframe.contentWindow.postMessage({ type: 'chato-widget-origin', action: 'data-clear' }, '*');
307        }
308    
309        
310        window.chatoWidget = {
311            load: load,
312            update: null,
313            close: close,
314            open: open,
315            remove: remove,
316            clear: clear,
317            show: show,
318            hide:hide,
319            on: (event, listener) => {
320                EventEmitter.on(event, listener);
321            },
322            off: (event, listener) => {
323                EventEmitter.off(event, listener);
324            }
325        };
326
327        
328        if (typeof window.OnChatoWidgetReady === 'function') {
329            //console.log('execute funtion onchatowidgetready');
330            window.OnChatoWidgetReady();
331        }
332        else if (typeof window.OnChatoWidgetReady === 'object' && window.OnChatoWidgetReady.length) {
333            //console.log('execute array onchatowidgetready', window.OnChatoWidgetReady);
334            for (var i = 0; i < window.OnChatoWidgetReady.length; i++) {
335                if (typeof window.OnChatoWidgetReady[i] === 'function')
336                    window.OnChatoWidgetReady[i]();
337            }
338        }
339
340        if (config.isLoadedInmediately)
341            load();
342    };
343
344    initChatbotWidget(window.chatoWidgetConfig);
345
346
347
348
349}) ();