var domainName = document.currentScript.getAttribute("domainname") let currentScriptElement = document.currentScript let liveChatFlowload = false // Main Live Chat const mainLiveChatDiv = document.createElement('div') mainLiveChatDiv.className = "mainLiveChatDiv" // For the Shadow Root const bodyElement = mainLiveChatDiv.attachShadow({ mode: 'open' }); let appearance = mainLiveChatDiv.getAttribute('appearance'); // Will Add the Styles file. var link = document.createElement("link"); link.rel = "stylesheet"; link.type = "text/css"; link.href = `${domainName}/build/assets/plugins/livechat/livechat.css`; // will add the Bootstrap Styles var BootstrapStyles = document.createElement("link"); BootstrapStyles.rel = "stylesheet"; BootstrapStyles.type = "text/css"; BootstrapStyles.href = `${domainName}/build/assets/plugins/bootstrap/css/bootstrap.css`; bodyElement.appendChild(BootstrapStyles); //will add the web-socket.js file . var script = document.createElement("script"); script.setAttribute('domainName',domainName) script.src = `${domainName}/build/assets/plugins/livechat/web-socket.js`; script.setAttribute("wsport",currentScriptElement.getAttribute("wsport")) script.defer = true; link.onload = function() { script.onload = function() { if(!localStorage.getItem('presentChatIp')){ fetch('https://ipinfo.io/json') .then(response => response.json()).then(data => { localStorage.setItem('presentChatIp',data.ip); }) .catch(error => { console.error('Error fetching IP details:', error); }); } // tooltip initialization function initializeTooltips() { var tooltipElements = bodyElement.querySelectorAll('[data-bs-toggle="tooltip"]'); tooltipElements.forEach(function (element) { if(element){ new bootstrap.Tooltip(element); } }); } // Which will use to get the API data const getDataAPI = async(endPoint)=>{ const responce = await fetch(`${domainName}/livechat/${endPoint}`) let data = await responce.json() return data } // Which use to Post the data to API const postDataAPI = async(postdata,endPoint)=>{ const url = `${domainName}/livechat/${endPoint}`; let data = await fetch(url, { method: "POST", headers: { 'Content-Type': 'application/json', 'X-Csrf-Token': 'N7J5vyQ9AcmVQW9dA2n4AJV1OcWzJ4pW2umV0QoI', 'X-Requested-With' : 'XMLHttpRequest', 'Accept':'application/json, text/javascript, */*; q=0.01', }, body: JSON.stringify(postdata), }).then(response => response.text()) return data } // Adding the chat Popup Button const popupButton = document.createElement("a"); popupButton.id = "chat-popup" popupButton.setAttribute('appearance', appearance) popupButton.className = "chat-popup-active d-none" popupButton.onclick = ()=>{ if(!localStorage.getItem("LiveChatVisitor") && !localStorage?.LiveChatCust){ // To getting the Country Name function getCountryName(countryCode) { const countryMapping = { "BD": "Bangladesh", "BE": "Belgium", "BF": "Burkina Faso", "BG": "Bulgaria", "BA": "Bosnia and Herzegovina", "BB": "Barbados", "WF": "Wallis and Futuna", "BL": "Saint Barthelemy", "BM": "Bermuda", "BN": "Brunei", "BO": "Bolivia", "BH": "Bahrain", "BI": "Burundi", "BJ": "Benin", "BT": "Bhutan", "JM": "Jamaica", "BV": "Bouvet Island", "BW": "Botswana", "WS": "Samoa", "BQ": "Bonaire, Saint Eustatius and Saba ", "BR": "Brazil", "BS": "Bahamas", "JE": "Jersey", "BY": "Belarus", "BZ": "Belize", "RU": "Russia", "RW": "Rwanda", "RS": "Serbia", "TL": "East Timor", "RE": "Reunion", "TM": "Turkmenistan", "TJ": "Tajikistan", "RO": "Romania", "TK": "Tokelau", "GW": "Guinea-Bissau", "GU": "Guam", "GT": "Guatemala", "GS": "South Georgia and the South Sandwich Islands", "GR": "Greece", "GQ": "Equatorial Guinea", "GP": "Guadeloupe", "JP": "Japan", "GY": "Guyana", "GG": "Guernsey", "GF": "French Guiana", "GE": "Georgia", "GD": "Grenada", "GB": "United Kingdom", "GA": "Gabon", "SV": "El Salvador", "GN": "Guinea", "GM": "Gambia", "GL": "Greenland", "GI": "Gibraltar", "GH": "Ghana", "OM": "Oman", "TN": "Tunisia", "JO": "Jordan", "HR": "Croatia", "HT": "Haiti", "HU": "Hungary", "HK": "Hong Kong", "HN": "Honduras", "HM": "Heard Island and McDonald Islands", "VE": "Venezuela", "PR": "Puerto Rico", "PS": "Palestinian Territory", "PW": "Palau", "PT": "Portugal", "SJ": "Svalbard and Jan Mayen", "PY": "Paraguay", "IQ": "Iraq", "PA": "Panama", "PF": "French Polynesia", "PG": "Papua New Guinea", "PE": "Peru", "PK": "Pakistan", "PH": "Philippines", "PN": "Pitcairn", "PL": "Poland", "PM": "Saint Pierre and Miquelon", "ZM": "Zambia", "EH": "Western Sahara", "EE": "Estonia", "EG": "Egypt", "ZA": "South Africa", "EC": "Ecuador", "IT": "Italy", "VN": "Vietnam", "SB": "Solomon Islands", "ET": "Ethiopia", "SO": "Somalia", "ZW": "Zimbabwe", "SA": "Saudi Arabia", "ES": "Spain", "ER": "Eritrea", "ME": "Montenegro", "MD": "Moldova", "MG": "Madagascar", "MF": "Saint Martin", "MA": "Morocco", "MC": "Monaco", "UZ": "Uzbekistan", "MM": "Myanmar", "ML": "Mali", "MO": "Macao", "MN": "Mongolia", "MH": "Marshall Islands", "MK": "Macedonia", "MU": "Mauritius", "MT": "Malta", "MW": "Malawi", "MV": "Maldives", "MQ": "Martinique", "MP": "Northern Mariana Islands", "MS": "Montserrat", "MR": "Mauritania", "IM": "Isle of Man", "UG": "Uganda", "TZ": "Tanzania", "MY": "Malaysia", "MX": "Mexico", "IL": "Israel", "FR": "France", "IO": "British Indian Ocean Territory", "SH": "Saint Helena", "FI": "Finland", "FJ": "Fiji", "FK": "Falkland Islands", "FM": "Micronesia", "FO": "Faroe Islands", "NI": "Nicaragua", "NL": "Netherlands", "NO": "Norway", "NA": "Namibia", "VU": "Vanuatu", "NC": "New Caledonia", "NE": "Niger", "NF": "Norfolk Island", "NG": "Nigeria", "NZ": "New Zealand", "NP": "Nepal", "NR": "Nauru", "NU": "Niue", "CK": "Cook Islands", "XK": "Kosovo", "CI": "Ivory Coast", "CH": "Switzerland", "CO": "Colombia", "CN": "China", "CM": "Cameroon", "CL": "Chile", "CC": "Cocos Islands", "CA": "Canada", "CG": "Republic of the Congo", "CF": "Central African Republic", "CD": "Democratic Republic of the Congo", "CZ": "Czech Republic", "CY": "Cyprus", "CX": "Christmas Island", "CR": "Costa Rica", "CW": "Curacao", "CV": "Cape Verde", "CU": "Cuba", "SZ": "Swaziland", "SY": "Syria", "SX": "Sint Maarten", "KG": "Kyrgyzstan", "KE": "Kenya", "SS": "South Sudan", "SR": "Suriname", "KI": "Kiribati", "KH": "Cambodia", "KN": "Saint Kitts and Nevis", "KM": "Comoros", "ST": "Sao Tome and Principe", "SK": "Slovakia", "KR": "South Korea", "SI": "Slovenia", "KP": "North Korea", "KW": "Kuwait", "SN": "Senegal", "SM": "San Marino", "SL": "Sierra Leone", "SC": "Seychelles", "KZ": "Kazakhstan", "KY": "Cayman Islands", "SG": "Singapore", "SE": "Sweden", "SD": "Sudan", "DO": "Dominican Republic", "DM": "Dominica", "DJ": "Djibouti", "DK": "Denmark", "VG": "British Virgin Islands", "DE": "Germany", "YE": "Yemen", "DZ": "Algeria", "US": "United States", "UY": "Uruguay", "YT": "Mayotte", "UM": "United States Minor Outlying Islands", "LB": "Lebanon", "LC": "Saint Lucia", "LA": "Laos", "TV": "Tuvalu", "TW": "Taiwan", "TT": "Trinidad and Tobago", "TR": "Turkey", "LK": "Sri Lanka", "LI": "Liechtenstein", "LV": "Latvia", "TO": "Tonga", "LT": "Lithuania", "LU": "Luxembourg", "LR": "Liberia", "LS": "Lesotho", "TH": "Thailand", "TF": "French Southern Territories", "TG": "Togo", "TD": "Chad", "TC": "Turks and Caicos Islands", "LY": "Libya", "VA": "Vatican", "VC": "Saint Vincent and the Grenadines", "AE": "United Arab Emirates", "AD": "Andorra", "AG": "Antigua and Barbuda", "AF": "Afghanistan", "AI": "Anguilla", "VI": "U.S. Virgin Islands", "IS": "Iceland", "IR": "Iran", "AM": "Armenia", "AL": "Albania", "AO": "Angola", "AQ": "Antarctica", "AS": "American Samoa", "AR": "Argentina", "AU": "Australia", "AT": "Austria", "AW": "Aruba", "IN": "India", "AX": "Aland Islands", "AZ": "Azerbaijan", "IE": "Ireland", "ID": "Indonesia", "UA": "Ukraine", "QA": "Qatar", "MZ": "Mozambique" }; return countryMapping[countryCode?.toUpperCase()] || 'Unknown Country'; } function fetchBrowserDetails() { const userAgent = navigator.userAgent; let browserName = "Unknown"; if (userAgent.match(/Firefox\/\d+/)) { browserName = "Firefox"; } else if (userAgent.match(/Edg\/\d+/)) { browserName = "Microsoft Edge"; } else if (userAgent.match(/Chrome\/\d+/)) { browserName = "Chrome"; } else if (userAgent.match(/Safari\/\d+/) && !userAgent.match(/Chrome\/\d+/)) { browserName = "Safari"; } else if (userAgent.match(/MSIE \d+/) || userAgent.match(/Trident.*rv:\d+/)) { browserName = "Internet Explorer"; } return browserName; } fetch('https://ipinfo.io/json') .then(response => response.json()).then(data => { let custipdata let retrundata custipdata = { "ipaddress" : data.ip, "city" : data.city, "state" : data.region, "countrycode" : data.country, "country" : getCountryName(data.country), "loginurl" : domainName, "browserinfo" : fetchBrowserDetails(), } retrundata = postDataAPI(custipdata,'livevisitors'); retrundata.then((resData)=>{ let updatedData = JSON.parse(resData) localStorage.setItem("LiveChatVisitor",updatedData?.visitordata?.visitor_unique_id) }) }) .catch(error => { console.error('Error fetching IP details:', error); }); } chatMessagePopup.classList.add("active") if(localStorage.LiveChatCust){ // For the Message Seen Indication postDataAPI(JSON.parse(localStorage.LiveChatCust),'user-seen-messages-indication') // For the customer's online Indaction postDataAPI({custID : JSON.parse(localStorage.LiveChatCust).id},'customer-online').then((ele)=>{ }) } // To Remove the Unread Index Number popupButton.querySelector('.unreadIndexNumberPopup').innerText = "" popupButton.querySelector('.unreadIndexNumberPopup').classList.add("d-none") if(liveChatFlowload){ bodyElement.querySelector('.direct-chat-messages').appendChild(basedOnTimeMessageConversationFlow()) } // To scroll Down Chat bodyElement.querySelector(".popup-messages").scrollBy(0, bodyElement.querySelector(".popup-messages").scrollHeight) // to update the height of the first message // bodyElement.querySelector(".offline-msg").style.insetBlockStart = `${bodyElement.querySelector(".user-header")?.clientHeight}px` // bodyElement.querySelector(".popup-messages").style.marginBlockStart = `${bodyElement.querySelector(".offline-msg")?.clientHeight}px` } popupButton.innerHTML = ` ` bodyElement.appendChild(popupButton); // Adding the chat Message popup const chatMessagePopup = document.createElement("div") chatMessagePopup.className = "chat-message-popup card mb-4 animated chat-message-pop-default" chatMessagePopup.setAttribute('appearance', appearance) chatMessagePopup.innerHTML = `

Support Chat

Welcome to SPRUKO. Feel free to ask us anything ๐ŸŽ‰.
Close
Hi, Iโ€™m MeshBuddy โ€“ Letโ€™s make your brand stand out!
` bodyElement.appendChild(chatMessagePopup) // To remove the chat Message Popup chatMessagePopup.querySelector('.popup-minimize-normal').onclick = ()=>{ chatMessagePopup.classList.remove("active") } chatMessagePopup.querySelector('.dropdownCloseBtn').onclick = ()=>{ chatMessagePopup.classList.remove("active") } // Which use to add the chat Body Content const chatBody = (htmlData,noNeedFullRefresh=true)=>{ if(noNeedFullRefresh){ chatMessagePopup.querySelector(".popup-chat-main-body").innerHTML = htmlData } } // For the feedBackForm Form const feedBackForm = (data,livechatdata,question)=>{ data = data.split(",") let feedBackFormData = document.createElement("div") feedBackFormData.className = 'rating-chat-main-body' feedBackFormData.innerHTML = `
Thank you for Contacting Us
Please rate our supportive team in the following areas
${ data.map((option,index)=>{ return( `
` ) }).join('') }
` // Rating click Function feedBackFormData.querySelectorAll(".ratingIcon").forEach((star, index)=>{ star.addEventListener('click', function() { feedBackFormData.querySelectorAll(".ratingIcon").forEach(s => s.classList.remove('checked')); for (let i = 0; i <= index; i++) { feedBackFormData.querySelectorAll(".ratingIcon")[i].classList.add('checked'); } if(!feedBackFormData.querySelector(".rating-fontawesome:checked")?.value || !bodyElement.querySelector(".feedBackData").value){ feedBackFormData.querySelector(".submitFeedBackBtn").disabled = true; }else{ feedBackFormData.querySelector(".submitFeedBackBtn").disabled = false; } }); }) // feed back Form submit feedBackFormData.querySelector(".submitFeedBackBtn").onclick = ()=>{ let feedBackData = { starRating : feedBackFormData.querySelectorAll(".ratingIcon.checked").length, problemRectified : feedBackFormData.querySelector(".rating-fontawesome:checked").value, feedBackData : feedBackFormData.querySelector(".feedBackData").value } let data = { message :JSON.stringify(feedBackData), username : liveChatCust.username, id : liveChatCust.id, customerId :liveChatCust.id, messageType: "feedBack" } postDataAPI(data,'broadcast-message').then((res)=>{ chatBody(messageConversation()) emojiLoader(); feedBackFormData.querySelectorAll(".ratingIcon").forEach(e => e.classList.remove("checked") ); if(feedBackFormData.querySelector(".rating-fontawesome:checked")) { feedBackFormData.querySelector(".rating-fontawesome:checked").checked = false; } feedBackFormData.querySelector(".feedBackData").value = ""; chatMessagePopup.classList.remove("rating-section-body") bodyElement.querySelector(".feedBackBtn").classList.add('d-none') // To Scroll Down the Conversation bodyElement.querySelector(".popup-messages").scrollBy(0, bodyElement.querySelector(".popup-messages").scrollHeight) }) } // To append the feedBackFormData if(!chatMessagePopup.querySelector(".rating-chat-main-body")){ chatMessagePopup.appendChild(feedBackFormData) bodyElement.querySelector(".feedBackData").oninput = (res=>{ if(feedBackFormData.querySelector(".rating-fontawesome:checked")?.value && bodyElement.querySelectorAll(".ratingIcon.checked").length && bodyElement.querySelector(".feedBackData").value){ bodyElement.querySelector(".submitFeedBackBtn").disabled = false }else{ bodyElement.querySelector(".submitFeedBackBtn").disabled = true } }) } window.handleChange = (event)=>{ if(bodyElement.querySelectorAll(".ratingIcon.checked").length && bodyElement.querySelector(".feedBackData").value){ feedBackFormData.querySelector(".submitFeedBackBtn").disabled = false; }else{ feedBackFormData.querySelector(".submitFeedBackBtn").disabled = true; } }; function downloadTextFile(filename, textContent) { const blob = new Blob([textContent], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = filename; link.click(); URL.revokeObjectURL(url); } // For the Text file DownLoad const filename = 'liveChatConversation.txt'; const modifiedData = livechatdata.map(item => `${item.created_at} - ${item.livechat_username} - ${item.message}`); const textContent = JSON.stringify(modifiedData, null, 4); feedBackFormData.querySelector(".downloadChart").onclick = ()=>{ downloadTextFile(filename, textContent); } // Send email the text file feedBackFormData.querySelector(".emailChat").onclick = ()=>{ let userInfo = JSON.parse(localStorage.LiveChatCust) const formData = new FormData(); formData.append('file', new Blob([textContent], { type: 'text/plain' }), filename); formData.append('email', userInfo?.email); fetch(`${domainName}/livechat/livechat-download-file`, { method: 'POST', body: formData, headers: { 'X-Csrf-Token': 'N7J5vyQ9AcmVQW9dA2n4AJV1OcWzJ4pW2umV0QoI', 'X-Requested-With' : 'XMLHttpRequest', 'Accept':'application/json, text/javascript, */*; q=0.01', }, }).then((res)=>res.json()).then(data=>{ alert(data.message) }) } } let FlowChatConversation = [] // Welcome Form const welcomeForm = (onFlowmessage,offlineSendMessage) => { // To Get The IP let ipAddress = [] let geolocationPermission = false fetch('https://ipinfo.io/json') .then(response => response.json()) .then(data => { ipAddress = data }) .catch((error) =>{ console.error('Error fetching IP address:', error) ipAddress.ip = 'null' ipAddress.city = 'null' ipAddress.region = 'null' ipAddress.timezone = 'null' }); // To getting the Country Name function getCountryName(countryCode) { const countryMapping = { "BD": "Bangladesh", "BE": "Belgium", "BF": "Burkina Faso", "BG": "Bulgaria", "BA": "Bosnia and Herzegovina", "BB": "Barbados", "WF": "Wallis and Futuna", "BL": "Saint Barthelemy", "BM": "Bermuda", "BN": "Brunei", "BO": "Bolivia", "BH": "Bahrain", "BI": "Burundi", "BJ": "Benin", "BT": "Bhutan", "JM": "Jamaica", "BV": "Bouvet Island", "BW": "Botswana", "WS": "Samoa", "BQ": "Bonaire, Saint Eustatius and Saba ", "BR": "Brazil", "BS": "Bahamas", "JE": "Jersey", "BY": "Belarus", "BZ": "Belize", "RU": "Russia", "RW": "Rwanda", "RS": "Serbia", "TL": "East Timor", "RE": "Reunion", "TM": "Turkmenistan", "TJ": "Tajikistan", "RO": "Romania", "TK": "Tokelau", "GW": "Guinea-Bissau", "GU": "Guam", "GT": "Guatemala", "GS": "South Georgia and the South Sandwich Islands", "GR": "Greece", "GQ": "Equatorial Guinea", "GP": "Guadeloupe", "JP": "Japan", "GY": "Guyana", "GG": "Guernsey", "GF": "French Guiana", "GE": "Georgia", "GD": "Grenada", "GB": "United Kingdom", "GA": "Gabon", "SV": "El Salvador", "GN": "Guinea", "GM": "Gambia", "GL": "Greenland", "GI": "Gibraltar", "GH": "Ghana", "OM": "Oman", "TN": "Tunisia", "JO": "Jordan", "HR": "Croatia", "HT": "Haiti", "HU": "Hungary", "HK": "Hong Kong", "HN": "Honduras", "HM": "Heard Island and McDonald Islands", "VE": "Venezuela", "PR": "Puerto Rico", "PS": "Palestinian Territory", "PW": "Palau", "PT": "Portugal", "SJ": "Svalbard and Jan Mayen", "PY": "Paraguay", "IQ": "Iraq", "PA": "Panama", "PF": "French Polynesia", "PG": "Papua New Guinea", "PE": "Peru", "PK": "Pakistan", "PH": "Philippines", "PN": "Pitcairn", "PL": "Poland", "PM": "Saint Pierre and Miquelon", "ZM": "Zambia", "EH": "Western Sahara", "EE": "Estonia", "EG": "Egypt", "ZA": "South Africa", "EC": "Ecuador", "IT": "Italy", "VN": "Vietnam", "SB": "Solomon Islands", "ET": "Ethiopia", "SO": "Somalia", "ZW": "Zimbabwe", "SA": "Saudi Arabia", "ES": "Spain", "ER": "Eritrea", "ME": "Montenegro", "MD": "Moldova", "MG": "Madagascar", "MF": "Saint Martin", "MA": "Morocco", "MC": "Monaco", "UZ": "Uzbekistan", "MM": "Myanmar", "ML": "Mali", "MO": "Macao", "MN": "Mongolia", "MH": "Marshall Islands", "MK": "Macedonia", "MU": "Mauritius", "MT": "Malta", "MW": "Malawi", "MV": "Maldives", "MQ": "Martinique", "MP": "Northern Mariana Islands", "MS": "Montserrat", "MR": "Mauritania", "IM": "Isle of Man", "UG": "Uganda", "TZ": "Tanzania", "MY": "Malaysia", "MX": "Mexico", "IL": "Israel", "FR": "France", "IO": "British Indian Ocean Territory", "SH": "Saint Helena", "FI": "Finland", "FJ": "Fiji", "FK": "Falkland Islands", "FM": "Micronesia", "FO": "Faroe Islands", "NI": "Nicaragua", "NL": "Netherlands", "NO": "Norway", "NA": "Namibia", "VU": "Vanuatu", "NC": "New Caledonia", "NE": "Niger", "NF": "Norfolk Island", "NG": "Nigeria", "NZ": "New Zealand", "NP": "Nepal", "NR": "Nauru", "NU": "Niue", "CK": "Cook Islands", "XK": "Kosovo", "CI": "Ivory Coast", "CH": "Switzerland", "CO": "Colombia", "CN": "China", "CM": "Cameroon", "CL": "Chile", "CC": "Cocos Islands", "CA": "Canada", "CG": "Republic of the Congo", "CF": "Central African Republic", "CD": "Democratic Republic of the Congo", "CZ": "Czech Republic", "CY": "Cyprus", "CX": "Christmas Island", "CR": "Costa Rica", "CW": "Curacao", "CV": "Cape Verde", "CU": "Cuba", "SZ": "Swaziland", "SY": "Syria", "SX": "Sint Maarten", "KG": "Kyrgyzstan", "KE": "Kenya", "SS": "South Sudan", "SR": "Suriname", "KI": "Kiribati", "KH": "Cambodia", "KN": "Saint Kitts and Nevis", "KM": "Comoros", "ST": "Sao Tome and Principe", "SK": "Slovakia", "KR": "South Korea", "SI": "Slovenia", "KP": "North Korea", "KW": "Kuwait", "SN": "Senegal", "SM": "San Marino", "SL": "Sierra Leone", "SC": "Seychelles", "KZ": "Kazakhstan", "KY": "Cayman Islands", "SG": "Singapore", "SE": "Sweden", "SD": "Sudan", "DO": "Dominican Republic", "DM": "Dominica", "DJ": "Djibouti", "DK": "Denmark", "VG": "British Virgin Islands", "DE": "Germany", "YE": "Yemen", "DZ": "Algeria", "US": "United States", "UY": "Uruguay", "YT": "Mayotte", "UM": "United States Minor Outlying Islands", "LB": "Lebanon", "LC": "Saint Lucia", "LA": "Laos", "TV": "Tuvalu", "TW": "Taiwan", "TT": "Trinidad and Tobago", "TR": "Turkey", "LK": "Sri Lanka", "LI": "Liechtenstein", "LV": "Latvia", "TO": "Tonga", "LT": "Lithuania", "LU": "Luxembourg", "LR": "Liberia", "LS": "Lesotho", "TH": "Thailand", "TF": "French Southern Territories", "TG": "Togo", "TD": "Chad", "TC": "Turks and Caicos Islands", "LY": "Libya", "VA": "Vatican", "VC": "Saint Vincent and the Grenadines", "AE": "United Arab Emirates", "AD": "Andorra", "AG": "Antigua and Barbuda", "AF": "Afghanistan", "AI": "Anguilla", "VI": "U.S. Virgin Islands", "IS": "Iceland", "IR": "Iran", "AM": "Armenia", "AL": "Albania", "AO": "Angola", "AQ": "Antarctica", "AS": "American Samoa", "AR": "Argentina", "AU": "Australia", "AT": "Austria", "AW": "Aruba", "IN": "India", "AX": "Aland Islands", "AZ": "Azerbaijan", "IE": "Ireland", "ID": "Indonesia", "UA": "Ukraine", "QA": "Qatar", "MZ": "Mozambique" }; return countryMapping[countryCode?.toUpperCase()] || 'Unknown Country'; } // To get the User Browser Name function getBrowserName() { if (typeof navigator.userAgentData !== 'undefined') { // Use navigator.userAgentData if available (Chrome, Edge, Opera) return navigator.userAgentData.brands[navigator.userAgentData.brands.length - 1].brand; } else { // Fallback to parsing the User-Agent string const userAgent = navigator.userAgent; let browserName; if (userAgent.match(/Firefox\//i)) { browserName = "Firefox"; } else if (userAgent.match(/Chrome\//i)) { browserName = "Chrome"; } else if (userAgent.match(/Edge\//i)) { browserName = "Edge"; } else if (userAgent.match(/Safari\//i)) { browserName = "Safari"; } else if (userAgent.match(/Opera\//i)) { browserName = "Opera"; } else if (userAgent.match(/MSIE\//i)) { browserName = "Internet Explorer"; } else { browserName = "Unknown"; } return browserName; } } // To get the geolocation data if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(getLoc,errorlog) } function getLoc(data){ geolocationPermission = true const latitude = data.coords.latitude; const longitude = data.coords.longitude; // Construct the Nominatim API URL const apiUrl = `https://nominatim.openstreetmap.org/reverse?lat=${latitude}&lon=${longitude}&format=json`; // Make a request to the API fetch(apiUrl) .then(response => response.json()) .then(data => { if (data) { const address = data; geolocationPermission = address } else { console.error('Unable to retrieve address.'); } }) .catch(error => { console.error('Error fetching data from Nominatim API:', error); }); } function errorlog(data) { geolocationPermission = false } // To send the form data to DB myFunction = ()=>{ // To disabled the submit Button bodyElement.querySelector("#chatUserdata [type='button']").disabled = true let Userdata = bodyElement.querySelector("#chatUserdata"); const formData = new FormData(Userdata); var name = formData.get('name'); var email = formData.get('email'); var mobile = formData.get('mobilenumber'); // Clear existing errors Userdata.querySelectorAll('.errorFormMessage').forEach(elem => elem.classList.remove('errorFormMessage')); Userdata.querySelectorAll('.text-danger').forEach(elem => elem.remove()); let errors = []; // Check for name if (!name) { Userdata.querySelector("#username").classList.add("errorFormMessage"); errors.push({ element: "#username", message: "Please enter your full name" }); } // Check for email if (!email) { Userdata.querySelector("#email").classList.add("errorFormMessage"); errors.push({ element: "#email", message: "Please enter your email" }); } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { Userdata.querySelector("#email").classList.add("errorFormMessage"); errors.push({ element: "#email", message: "Please enter a valid email address." }); } // Check for mobile if (!mobile) { Userdata.querySelector("#mobile").classList.add("errorFormMessage"); errors.push({ element: "#mobile", message: "Please enter your mobile number" }); } errors.forEach(error => { let errorSpan = document.createElement("span"); errorSpan.className = "text-danger ms-2"; errorSpan.innerText = error.message; Userdata.querySelector(error.element).closest("div").appendChild(errorSpan); }); if (errors.length > 0) { bodyElement.querySelector("#chatUserdata [type='button']").disabled = false; } else { let postData if(geolocationPermission){ postData = { "name" : formData.get("name"), "email" : formData.get("email"), "mobilenumber" : formData.get("mobilenumber"), "browserAndOSInfo" : getBrowserName(), "flowChatMessages" : JSON.stringify(FlowChatConversation), "loginurl" : location.href, "fullAddress" : geolocationPermission.display_name, "loginIp" : ipAddress.ip, "city" : geolocationPermission.address.city, "state" : geolocationPermission.address.state, "timezone" : ipAddress.timezone, "country" : geolocationPermission.address.country, "visitoruniqueid" : localStorage.getItem("LiveChatVisitor") ? localStorage.getItem("LiveChatVisitor") : null, } }else{ postData = { "name" : formData.get("name"), "email" : formData.get("email"), "mobilenumber" : formData.get("mobilenumber"), "browserAndOSInfo" : getBrowserName(), "flowChatMessages" : JSON.stringify(FlowChatConversation), "loginurl" : location.href, "fullAddress" : `${ipAddress.city}, ${ipAddress.region}, ${getCountryName(ipAddress.country)}`, "loginIp" : ipAddress.ip, "city" : ipAddress.city, "state" : ipAddress.region, "timezone" : ipAddress.timezone, "country" : getCountryName(ipAddress.country), "visitoruniqueid" : localStorage.getItem("LiveChatVisitor") ? localStorage.getItem("LiveChatVisitor") : null, } } let processData = postDataAPI(postData,'customerdata') processData.then(data=>{ let responceData = JSON.parse(data) if(responceData.success){ if(localStorage.getItem("LiveChatVisitor")){ localStorage.removeItem("LiveChatVisitor"); } localStorage.setItem("LiveChatCust",JSON.stringify(responceData.custdata)) // TO Add the customer Online postDataAPI({custID : JSON.parse(localStorage.LiveChatCust).id},'customer-online').then((ele)=>{ }) // To send the First Message if(onFlowmessage){ let firstMessageData = { message : onFlowmessage, username : responceData.custdata.username, id : responceData.custdata.id, customerId :responceData.custdata.id } // To Add the first Message postDataAPI(firstMessageData,'broadcast-message').then(subdata=>{ // To Send the Offline Message if(offlineSendMessage){ let liveChatCust = localStorage.LiveChatCust ? JSON.parse(localStorage.LiveChatCust) : [] let welcomeMessagedata = { message :offlineSendMessage.errorMessage, username : liveChatCust.username, id : liveChatCust.id, customerId :liveChatCust.id, messageType: "welcomeMessage" } postDataAPI(welcomeMessagedata,'broadcast-message').then((ele)=>{ chatBody(messageConversation()) emojiLoader(); }) }else{ chatBody(messageConversation()) emojiLoader(); } }) } } }) processData.catch(error=>{ console.log("error",error); }) } } // To submit the form when the user presses the Enter key setTimeout(() => { bodyElement.getElementById("chatUserdata").addEventListener("keydown", function (event) { if (event.key === "Enter") { event.preventDefault(); // Prevent the default form submission bodyElement.querySelector("#chatUserdata .wecomeFormSubmitBtn").click() } }); let submitDetailsButton = bodyElement.querySelector('.wecomeFormSubmitBtn'); const validationEvent = () => { const usernameInput = bodyElement.querySelector('#username'); const mobileInput = bodyElement.querySelector('#mobile'); const emailInput = bodyElement.querySelector('#email'); const isUsernameValid = usernameInput.value.length > 4; const isMobileValid = mobileInput.value.length > 6; const isEmailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailInput.value); // Check all conditions if (isUsernameValid && isMobileValid && isEmailValid) { submitDetailsButton.disabled = false; } else { submitDetailsButton.disabled = true; } }; bodyElement.querySelector('#username').addEventListener('input', (ele) => { if (ele.target.value.length <= 4) { ele.target.classList.add('is-invalid'); ele.target.classList.remove('is-valid'); errorBtn = true; validationEvent(); } else { ele.target.classList.add('is-valid'); ele.target.classList.remove('is-invalid'); validationEvent(); } }) bodyElement.querySelector('#mobile').addEventListener('input', (ele) => { if (ele.target.value.length <= 6) { ele.target.classList.add('is-invalid'); ele.target.classList.remove('is-valid'); validationEvent(); } else { ele.target.classList.add('is-valid'); ele.target.classList.remove('is-invalid'); validationEvent(); } }) bodyElement.querySelector('#email').addEventListener('input', (event) => { const email = event.target.value; const isValidEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); if (!isValidEmail) { event.target.classList.add('is-invalid'); event.target.classList.remove('is-valid'); validationEvent(); } else { event.target.classList.remove('is-invalid'); event.target.classList.add('is-valid'); validationEvent(); } }); }, 1000); return ( `
Enter Basic Information
Kindly provide your name and email address before we begin
` ) } // To add the all Message conversation let liveChatCust = localStorage.LiveChatCust ? JSON.parse(localStorage.LiveChatCust) : [] const messageConversation = ()=>{ // to Update the liveChatCust liveChatCust = localStorage.LiveChatCust ? JSON.parse(localStorage.LiveChatCust) : [] let OfflineMessagePermission = false sendMessage = ()=>{ if(liveChatCust && liveChatCust.userType == 'livevisitor'){ // To open The welcome Form chatBody(welcomeForm(bodyElement.querySelector("#status_message").textContent,OfflineMessagePermission)) }else{ afterMessageSend = false // To send the Typing Indication After message send setTimeout(() => { afterMessageSend = true }, 500); const now = new Date(); const hours = now.getHours(); const minutes = now.getMinutes(); const period = hours >= 12 ? "PM" : "AM"; function sanitizeHTML(input) { const map = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''', '/': '/', // For forward slash '`': '`', // Backtick '=': '=' // Equals }; return input.replace(/[&<>"'/`=]/g, function (char) { return map[char]; }); } const formattedTime = `${((hours + 11) % 12) + 1}:${minutes}${period}`; if(bodyElement.querySelector("#status_message").textContent.trim()){ let data = { message : sanitizeHTML(bodyElement.querySelector("#status_message").textContent), username : liveChatCust.username, id : liveChatCust.id, customerId :liveChatCust.id } postDataAPI(data,'broadcast-message').then((ele)=>{ // For the Offline Message Send var allDirectChatMsgs = bodyElement.querySelectorAll('.direct-chat-msg'); var filteredDirectChatMsgs = Array.from(allDirectChatMsgs).filter(function(element) { return !element.classList.contains('right'); }); var lastDirectChatMsg = filteredDirectChatMsgs[filteredDirectChatMsgs.length - 1]; if(OfflineMessagePermission && lastDirectChatMsg.innerText.replace(/\b\d{1,2}:\d{2}[APMapm]{2}\b/, '').trim() != OfflineMessagePermission.errorMessage.trim()){ bodyElement.querySelector('.direct-chat-messages').appendChild(OfflineMessageIndication(OfflineMessagePermission.errorMessage)) // For the Message Seen Indication if(chatMessagePopup.classList.contains('active')){ postDataAPI(JSON.parse(localStorage.LiveChatCust),'user-seen-messages-indication') } bodyElement.querySelector(".popup-messages").scrollBy(0, bodyElement.querySelector(".popup-messages").scrollHeight) } }) // let directChatMessages = bodyElement.querySelector(".direct-chat-messages") // let custMessage = document.createElement("div"); // custMessage.className = "direct-chat-msg right" // custMessage.innerHTML = ` //
// ${bodyElement.querySelector("#status_message").textContent} // ${formattedTime} //
// ` // directChatMessages.appendChild(custMessage) // bodyElement.querySelector(".popup-messages").scrollBy(0, bodyElement.querySelector(".popup-messages").scrollHeight) bodyElement.querySelector("#status_message").textContent = "" } // To remove the emoji dropdown in the chatpopup bodyElement.getElementById("emojiGrid").classList.remove('d-block'); } } function formatTime(inputTime) { const date = new Date(inputTime); const hours = date.getHours(); const minutes = date.getMinutes(); const ampm = hours >= 12 ? 'PM' : 'AM'; const formattedHours = hours % 12 === 0 ? 12 : hours % 12; const formattedMinutes = minutes < 10 ? '0' + minutes : minutes; const formattedTime = `${formattedHours}:${formattedMinutes}${ampm}`; return formattedTime; } // For the Chat data function formatDateString(inputDateStr) { const inputDate = new Date(inputDateStr); const monthNames = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]; const year = inputDate.getFullYear(); const month = monthNames[inputDate.getMonth()]; const day = inputDate.getDate(); const formattedDate = `${day},${month} ${year}`; return formattedDate; } let customerMessage = (data)=>{ let custLi = document.createElement("div"); custLi.className = "direct-chat-msg right" custLi.innerHTML = `
${data.message_type == "image" ? ` img ` : data.message_type == "feedBack" ? `Your feedback has been submitted` : `${data.message}`} ${formatTime(data.created_at)}
` return custLi } let AgentMessage = (data)=>{ let agentLi = document.createElement("div"); agentLi.className = "direct-chat-msg" agentLi.innerHTML = `
${data.message_type == "image" ? ` img ` : `${data.message}`} ${formatTime(data.created_at)}
` return agentLi } let conversationDiv = document.createElement("div"); conversationDiv.className = "direct-chat-messages" conversationDiv.style.overflow = "hidden" getDataAPI(`singlecustdata/${JSON.parse(localStorage.LiveChatCust)?.id}`).then((data)=>{ if(data.nocustomerdatafound){ chatBody(messageConversationFlow()) localStorage.removeItem("LiveChatCust") return false } // To modify the size of the Live Chat icon. if(data.livechatcust.livechatIconSize == "large"){ popupButton.classList.add("chat-popup-lg") }else{ popupButton.classList.remove("chat-popup-lg") } if(document.documentElement.getAttribute('dir') == 'rtl'){ chatMessagePopup.setAttribute('dir', 'ltr'); popupButton.setAttribute('dir', 'ltr'); } // To Change the live Chat Position if(data.livechatcust.livechatPosition == "left"){ mainLiveChatDiv.setAttribute('appearance', 'left'); appearance = "left"; chatMessagePopup.setAttribute('appearance', appearance) popupButton.setAttribute('appearance', appearance) chatMessagePopup.classList.add("chat-message-popup-right") popupButton.classList.add("chat-popup-right") }else{ mainLiveChatDiv.setAttribute('appearance', 'right'); appearance = "right"; chatMessagePopup.setAttribute('appearance', appearance) popupButton.setAttribute('appearance', appearance) chatMessagePopup.classList.remove("chat-message-popup-right") popupButton.classList.remove("chat-popup-right") } if(data.livechatcust.banstatus == 'banned' && data.livechatcust.login_ip == localStorage.getItem('presentChatIp')){ // popupButton.classList.add("d-none") }else{ popupButton.classList.remove("d-none") popupButton.style.setProperty('--primary', data.livechatcust.livechatthemecolor); } bodyElement.querySelector(".chat-icon-text").classList.remove('d-none'); bodyElement.querySelector(".chat-icon-text").innerText = data.livechatcust.beforechatshowdata; if(bodyElement.querySelector(".livechatpopuptitle")){ bodyElement.querySelector(".livechatpopuptitle").innerText = data?.livechatcust?.livechatpopuptitle; } if(bodyElement.querySelector(".livechatpopupsubtitle")){ bodyElement.querySelector(".livechatpopupsubtitle").innerText = data?.livechatcust?.livechatpopupsubtitle; } chatMessagePopup.style.setProperty('--primary', data.livechatcust.livechatthemecolor); // To add the FeedBack Click Event if(data.livechatcust.engage_conversation && JSON.parse(data.livechatcust.engage_conversation).length){ chatMessagePopup.querySelector(".feedBackBtn").classList.remove("d-none") chatMessagePopup.querySelector(".feedBackBtn").onclick = ()=>{ chatMessagePopup.classList.add("rating-section-body") feedBackForm(data.livechatcust.livechatFeedbackDropdown,data.livechatdata,data.livechatcust.LivechatCustFeedbackQuestion) } } // For the Chat Flow Created Date let currentDate = null; // For the Chat Flow Messages if(data.livechatcust.chat_flow_messages){ const messageDate = formatDateString(data.livechatcust.created_at); conversationDiv.innerHTML += `
${messageDate}
`; currentDate = messageDate; JSON.parse(data.livechatcust.chat_flow_messages).map((flowMes)=>{ let updatedFlowMes = flowMes updatedFlowMes.created_at = data.livechatcust.created_at if(flowMes.authMessage == "agent"){ conversationDiv.appendChild(AgentMessage(updatedFlowMes)) }else{ conversationDiv.appendChild(customerMessage(updatedFlowMes)) } }) } let unreadIndexNumber = 0 // For the Messages append data.livechatdata.map((chatdata)=>{ const messageDate = formatDateString(chatdata.created_at); if (messageDate !== currentDate){ conversationDiv.innerHTML += `
${messageDate}
`; // For the date of the Chat currentDate = messageDate; }{ if(!chatdata.livechat_cust_id && chatdata.status != "comment"){ conversationDiv.appendChild(AgentMessage(chatdata)) }else{ if(chatdata.status != "comment"){ conversationDiv.appendChild(customerMessage(chatdata)) } } } // To get the get the unread index number if(chatdata.livechat_user_id && chatdata.status != "comment" && chatdata.status != "seen"){ unreadIndexNumber = unreadIndexNumber + 1 } }) // To add the Unread Index Number if(unreadIndexNumber){ popupButton.querySelector('.unreadIndexNumberPopup').innerText = unreadIndexNumber popupButton.querySelector('.unreadIndexNumberPopup').classList.remove('d-none') } // To show the LiveChat include Users informaction if(data.livechatcust.engage_conversation){ let livechatInfo = document.createElement('div') livechatInfo.innerHTML = `
` let onlineUserNames = []; JSON.parse(data.livechatcust.engage_conversation).map((user,index)=>{ let userSpan = document.createElement('span') userSpan.className = `avatar avatar-sm brround` userSpan.setAttribute('data-bs-toggle', 'tooltip'); userSpan.setAttribute('data-bs-custom-class', 'livechat-tooltip'); userSpan.setAttribute('data-bs-placement', 'top'); userSpan.setAttribute('data-bs-title', `${user.name}`); userSpan.style.backgroundImage = `url('${user.profileimage}')` if(index+1 <= 2){ livechatInfo.querySelector(".avatar-list-stacked").appendChild(userSpan) } onlineUserNames.push(user.name) }) if(JSON.parse(data.livechatcust.engage_conversation).length > 2){ let userSpan = document.createElement('span') userSpan.className = `avatar brround` userSpan.setAttribute('data-bs-toggle', 'tooltip'); userSpan.setAttribute('data-bs-custom-class', 'livechat-tooltip'); userSpan.setAttribute('data-bs-placement', 'top'); userSpan.setAttribute('data-bs-title', `${data.livechatcust.LivechatCustWelcomeMsg}`); userSpan.innerHTML = `+${JSON.parse(data.livechatcust.engage_conversation).length - 2}` livechatInfo.querySelector(".avatar-list-stacked").appendChild(userSpan) } let span = document.createElement('span'); span.classList.add('className'); span.textContent = data.livechatcust?.LivechatCustWelcomeMsg; livechatInfo.querySelector(".main-avatar").appendChild(span) if(bodyElement.querySelector(".before-chatstart")){ if(bodyElement.querySelector(".onlineorofflinediv")){ bodyElement.querySelector(".onlineorofflinediv").remove() } bodyElement.querySelector(".before-chatstart").innerHTML = livechatInfo.innerHTML } } // For No One joined At the time to show the online users info if(!JSON.parse(data.livechatcust.engage_conversation).length && data.livechatcust.onlineUsers && JSON.parse(data.livechatcust.onlineUsers).length){ let livechatInfo = document.createElement('div') livechatInfo.innerHTML = `
` let onlineUserNames = [] JSON.parse(data.livechatcust.onlineUsers).map((user,index)=>{ let userSpan = document.createElement('span') userSpan.className = `avatar brround` userSpan.className = `avatar brround` userSpan.setAttribute('data-bs-toggle', 'tooltip'); userSpan.setAttribute('data-bs-custom-class', 'livechat-tooltip'); userSpan.setAttribute('data-bs-placement', 'top'); userSpan.setAttribute('data-bs-title', `${user.name}`); userSpan.style.backgroundImage = `url('${user.profileurl}')` if(index+1 <= 2){ let onlineSpan = document.createElement('span') onlineSpan.className = "avatar-status bg-green" userSpan.appendChild(onlineSpan) livechatInfo.querySelector(".avatar-list-stacked").appendChild(userSpan) } onlineUserNames.push(user.name) }) if(JSON.parse(data.livechatcust.onlineUsers).length > 2){ let userSpan = document.createElement('span') userSpan.className = `avatar brround` userSpan.setAttribute('data-bs-toggle', 'tooltip'); userSpan.setAttribute('data-bs-custom-class', 'livechat-tooltip'); userSpan.setAttribute('data-bs-placement', 'top'); userSpan.setAttribute('data-bs-title', `${data.livechatcust.LivechatCustWelcomeMsg}`); userSpan.innerHTML = `+${JSON.parse(data.livechatcust.onlineUsers).length - 2}` livechatInfo.querySelector(".avatar-list-stacked").appendChild(userSpan) } let span = document.createElement('span'); span.classList.add('className'); span.classList.add('fs-5'); span.classList.add('ms-2'); span.textContent = data.livechatcust?.LivechatCustWelcomeMsg; livechatInfo.querySelector(".main-avatar").appendChild(span) if(bodyElement.querySelector(".before-chatstart")){ if(bodyElement.querySelector(".onlineorofflinediv")){ bodyElement.querySelector(".onlineorofflinediv").remove() } bodyElement.querySelector(".before-chatstart").innerHTML = livechatInfo.innerHTML } } else if(JSON.parse(data.livechatcust.engage_conversation).length && data.livechatcust.onlineUsers && JSON.parse(data.livechatcust.onlineUsers).length){ // where there was an engage agent let livechatInfo = document.createElement('div') livechatInfo.innerHTML = `
` let onlineUserNames = [] JSON.parse(data.livechatcust.engage_conversation).map((user,index)=>{ let userSpan = document.createElement('span') userSpan.className = `avatar brround` userSpan.className = `avatar brround` userSpan.setAttribute('data-bs-toggle', 'tooltip'); userSpan.setAttribute('data-bs-custom-class', 'livechat-tooltip'); userSpan.setAttribute('data-bs-placement', 'top'); userSpan.setAttribute('data-bs-title', `${user.name}`); userSpan.style.backgroundImage = `url('${user.profileurl}')` if(index+1 <= 2){ let onlineSpan = document.createElement('span') onlineSpan.className = "avatar-status bg-green" userSpan.appendChild(onlineSpan) livechatInfo.querySelector(".avatar-list-stacked").appendChild(userSpan) } onlineUserNames.push(user.name) }) if(JSON.parse(data.livechatcust.engage_conversation).length > 2){ let userSpan = document.createElement('span') userSpan.className = `avatar brround` userSpan.setAttribute('data-bs-toggle', 'tooltip'); userSpan.setAttribute('data-bs-custom-class', 'livechat-tooltip'); userSpan.setAttribute('data-bs-placement', 'top'); userSpan.setAttribute('data-bs-title', `${data.livechatcust.LivechatCustWelcomeMsg}`); userSpan.innerHTML = `+${JSON.parse(data.livechatcust.engage_conversation).length - 2}` livechatInfo.querySelector(".avatar-list-stacked").appendChild(userSpan) } let span = document.createElement('span'); span.classList.add('className'); span.classList.add('fs-5'); span.classList.add('ms-2'); span.textContent = data.livechatcust?.LivechatCustWelcomeMsg; livechatInfo.querySelector(".main-avatar").appendChild(span) if(bodyElement.querySelector(".before-chatstart")){ if(bodyElement.querySelector(".onlineorofflinediv")){ bodyElement.querySelector(".onlineorofflinediv").remove() } bodyElement.querySelector(".before-chatstart").innerHTML = livechatInfo.innerHTML } } else{ let livechatInfo = document.createElement('div') livechatInfo.innerHTML = `
` let span = document.createElement('span'); span.classList.add('className'); span.classList.add('fs-5'); span.classList.add('ms-2'); span.textContent = data.livechatcust?.LivechatCustWelcomeMsg; livechatInfo.querySelector(".main-avatar").appendChild(span) if(bodyElement.querySelector(".before-chatstart")){ if(bodyElement.querySelector(".onlineorofflinediv")){ bodyElement.querySelector(".onlineorofflinediv").remove() } bodyElement.querySelector(".before-chatstart").innerHTML = livechatInfo.innerHTML } } initializeTooltips(); // if the messages already present. At the time the messages will not add let ConversationBodyElement = bodyElement.querySelector(".popup-messages") if(!ConversationBodyElement.children.length){ ConversationBodyElement.appendChild(conversationDiv); // To scroll Down the Chat bodyElement.querySelector(".popup-messages").scrollBy(0, bodyElement.querySelector(".popup-messages").scrollHeight) // To add the Image Viewer bodyElement.querySelectorAll(".imageMessageLiveChat").forEach((element)=>{ element.parentElement.onclick = ()=>{ window.open(element.getAttribute('imagesrc')) } }) // To check the last Message time cross the 24 Hours if(data.livechatdata[0]){ let welcomeMessages = data.livechatdata.filter(item => item.message_type === "welcomeMessage"); let createdAtTimeArray = welcomeMessages.length > 0 ? welcomeMessages[welcomeMessages.length - 1].created_at : data.livechatdata[0].created_at if (createdAtTimeArray) { let lastWelcomeMessageCreatedAt = createdAtTimeArray const creationTimeString = lastWelcomeMessageCreatedAt; const creationTime = new Date(creationTimeString); const currentTime = new Date(); const timeDifference = currentTime - creationTime; const hoursDifference = timeDifference / (1000 * 60 * 60); if(data.livechatcust.liveChatFlowload == "every-24-hours" && hoursDifference >= 24){ liveChatFlowload = true } } } } // If it is Offline let statusIndicator = bodyElement.querySelector('.online-status-indicator'); console.log(statusIndicator); if(data.livechatcust.isonlineoroffline == "offline" && data.livechatcust.OfflineStatusMessage){ console.log('offline'); statusIndicator.classList.remove('online') statusIndicator.classList.add('offline') OfflineMessagePermission = { errorMessage: data.livechatcust.OfflineMessage} // To Add the Offline Message Status if (statusIndicator) { statusIndicator.innerHTML = ` ${data.livechatcust.OfflineStatusMessage} `; } } // If it is Online if(data.livechatcust.isonlineoroffline == "online" && data.livechatcust.OnlineStatusMessage){ console.log('online'); statusIndicator.classList.add('online') statusIndicator.classList.remove('offline') // To Add the Online Message Status if (statusIndicator) { statusIndicator.innerHTML = ` ${data.livechatcust.OnlineStatusMessage} `; } } // Chat File Upload if(!data.livechatcust.file_upload_permission){ bodyElement.querySelector(".liveChatFileUpload").style.display = "none" }else{ bodyElement.querySelector(".liveChatFileUpload").style.display = "" } // For the LiveChat Image Upload bodyElement.querySelector("#chat-file-upload").onchange = ()=>{ var fileInput = bodyElement.querySelector("#chat-file-upload"); var file = fileInput.files[0]; fileInput.value = '' var ThereIsError = false if(file){ const chatMsgElements = bodyElement.querySelectorAll('.direct-chat-msg.right'); const lastTwoElements = Array.from(chatMsgElements).slice(-data.livechatcust.livechatMaxFileUpload); if(!data.livechatcust.file_upload_permission){ ThereIsError = { errorMessage: "You are Not Having File Upload Permission " }; }else if (file.size > parseInt(data.livechatcust.livechatFileUploadMax) * 1024 * 1024) { ThereIsError = { errorMessage: `File size exceeds ${data.livechatcust.livechatFileUploadMax} MB. Please choose a smaller file.` }; }else if (data.livechatcust.livechatFileUploadTypes && !data.livechatcust.livechatFileUploadTypes.split(',').some(ext => file.name.toLowerCase().endsWith(ext.toLowerCase().trim()))) { ThereIsError = { errorMessage: `Invalid file extension. Please choose a file with ${data.livechatcust.livechatFileUploadTypes} extension(s).` }; }else if(lastTwoElements.every(element => element.querySelector('img'))){ ThereIsError = { errorMessage: `The maximum file upload limit has been exceeded.` }; } else{ ThereIsError = false } // For add the Upload indication let uploadingIndication = document.createElement("div") uploadingIndication.className = "direct-chat-msg right" uploadingIndication.id = "uploadingIndication" uploadingIndication.innerHTML = `
uploading...
` if(!ThereIsError){ // bodyElement.querySelector(".direct-chat-messages").appendChild(uploadingIndication) // bodyElement.querySelector(".popup-messages").scrollBy(0, bodyElement.querySelector(".popup-messages").scrollHeight) } if(!ThereIsError){ var formData = new FormData(); formData.append('chatFileUpload', file); const now = new Date(); const hours = now.getHours(); const minutes = now.getMinutes(); const period = hours >= 12 ? "PM" : "AM"; const formattedTime = `${((hours + 11) % 12) + 1}:${minutes}${period}`; fetch(`${domainName}/livechat/live-chat-image-upload`, { method: 'POST', body: formData, headers: { 'X-Csrf-Token': 'N7J5vyQ9AcmVQW9dA2n4AJV1OcWzJ4pW2umV0QoI', 'X-Requested-With' : 'XMLHttpRequest', 'Accept':'application/json, text/javascript, */*; q=0.01', }, }) .then(response =>{ return response.json() }) .then(resdata => { let data = { message :`${resdata.imageurl}`, username : liveChatCust.username, id : liveChatCust.id, customerId :liveChatCust.id, messageType: "image" } postDataAPI(data,'broadcast-message') let directChatMessages = bodyElement.querySelector(".direct-chat-messages") let custMessage = document.createElement("div"); custMessage.className = "direct-chat-msg right" custMessage.innerHTML = `
${formattedTime}
` directChatMessages.querySelector("#uploadingIndication").remove() directChatMessages.appendChild(custMessage) // To add the Image Viwer bodyElement.querySelectorAll(".imageMessageLiveChat").forEach((element)=>{ element.parentElement.onclick = ()=>{ window.open(element.getAttribute('imagesrc')) } }) bodyElement.querySelector(".popup-messages").scrollBy(0, bodyElement.querySelector(".popup-messages").scrollHeight) }) .catch(error => { console.error('Error:', error); }); }else{ alert(ThereIsError.errorMessage) } } } // Offline no need to display chat if(!parseInt(data.livechatcust.offlineDisplayLiveChat) && data.livechatcust.isonlineoroffline == "offline"){ chatMessagePopup.remove() popupButton.remove() } // To remove the LiveChat if(data.livechatcust.liveChatHidden == "true"){ chatMessagePopup.remove() popupButton.remove() } // To remove the live chat online indaction const beforeUnloadHandler = (event)=>{ postDataAPI({custID : data.livechatcust.id},'remove-customer-online').then((ele)=>{ }) setTimeout(() => { if(bodyElement.querySelector(".chat-message-popup").classList.contains("active")){ postDataAPI({custID : JSON.parse(localStorage.LiveChatCust).id},'customer-online').then((ele)=>{ }) } }, 3000); event.returnValue = "Write something clever here.." } // Adding beforeunload event To Livechat BTN bodyElement.querySelector("#chat-popup").addEventListener("click",()=>{ window.addEventListener('beforeunload', beforeUnloadHandler) }) // TO Remove the beforeunload event To Livechat Close BTN bodyElement.querySelector(".popup-minimize-normal").addEventListener("click",()=>{ window.removeEventListener('beforeunload', beforeUnloadHandler) postDataAPI({custID : data.livechatcust.id},'remove-customer-online').then((ele)=>{ }) }) // To remove the online in the initial state if(!bodyElement.querySelector(".chat-message-popup").classList.contains('active')){ postDataAPI({custID : data.livechatcust.id},'remove-customer-online').then((ele)=>{ }) } }) // Typing var debounceTimeout; var afterMessageSend = true customerTyping = (ele)=>{ clearTimeout(debounceTimeout); debounceTimeout = setTimeout(function() { if(afterMessageSend){ textAreaChanged(ele); } }, 500); } function textAreaChanged(textarea) { let data = { message :null, username : liveChatCust.username, id : null, customerId :liveChatCust.id, typingMessage : textarea.textContent } postDataAPI(data,'broadcast-message-typing') } // Enter Message Send Function handleKeyDown = (event)=>{ if (event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); sendMessage() } } return ( `
` ) } // Message flow conversation const messageConversationFlow = ()=>{ let flowChatData let OfflineMessagePermission = false // Getting the chat Flow data getDataAPI(`flow/${currentScriptElement.getAttribute('testitout') ? currentScriptElement.getAttribute('testitout') : null}/${localStorage.getItem('presentChatIp') ? localStorage.getItem('presentChatIp') : null}`).then((data)=>{ if(data.success){ // To modify the size of the Live Chat icon. if(data.success.livechatIconSize == "large"){ popupButton.classList.add("chat-popup-lg") }else{ popupButton.classList.remove("chat-popup-lg") } if(document.documentElement.getAttribute('dir') == 'rtl'){ chatMessagePopup.setAttribute('dir', 'ltr'); popupButton.setAttribute('dir', 'ltr'); } // To Change the live Chat Position if(data.success.livechatPosition == "left"){ mainLiveChatDiv.setAttribute('dir', 'rtl'); chatMessagePopup.classList.add("chat-message-popup-right") popupButton.classList.add("chat-popup-right") }else{ mainLiveChatDiv.setAttribute('dir', 'ltr'); chatMessagePopup.classList.remove("chat-message-popup-right") popupButton.classList.remove("chat-popup-right") } if(data.success.ipbannedstatus != 'banned'){ popupButton.classList.remove("d-none") popupButton.style.setProperty('--primary', data.success.livechatthemecolor); } bodyElement.querySelector(".chat-icon-text").classList.remove('d-none'); bodyElement.querySelector(".chat-icon-text").innerText = data.success.beforechatshowdata; bodyElement.querySelector(".livechatpopuptitle").innerText = data.success.livechatpopuptitle; bodyElement.querySelector(".livechatpopupsubtitle").innerText = data.success.livechatpopupsubtitle; chatMessagePopup.style.setProperty('--primary', data.success.livechatthemecolor); flowChatData = data.success.liveChatFlow ? JSON.parse(data.success.liveChatFlow).nodes : null // To shoe the first Welcome Message if(data.success.liveChatFlow && JSON.parse(data.success.liveChatFlow).nodes['1'].name == "Welcome Message" && !bodyElement.querySelector(".popup-messages")?.children.length){ AgentMessage(JSON.parse(data.success.liveChatFlow).nodes['1']) } // To show the LiveChat Info informaction if(JSON.parse(data.success.onlineUsers).length){ bodyElement.querySelector('.onlineorofflinediv')?.remove(); let livechatInfo = document.createElement('div') livechatInfo.className = "onlineorofflinediv mt-4 me-3" livechatInfo.innerHTML = `
` let onlineUserNames = [] JSON.parse(data.success.onlineUsers).map((user,index)=>{ let userSpan = document.createElement('span') userSpan.className = `avatar brround` userSpan.setAttribute('data-bs-toggle', 'tooltip'); userSpan.setAttribute('data-bs-custom-class', 'livechat-tooltip'); userSpan.setAttribute('data-bs-placement', 'top'); userSpan.setAttribute('data-bs-title', `${user.name}`); userSpan.style.backgroundImage = `url('${user.profileurl}')`; if(index+1 <= 2){ let onlineSpan = document.createElement('span') onlineSpan.className = "avatar-status bg-green" userSpan.appendChild(onlineSpan) livechatInfo.querySelector(".avatar-list-stacked").appendChild(userSpan) } onlineUserNames.push(user.name) }) if(JSON.parse(data.success.onlineUsers).length > 2){ let userSpan = document.createElement('span') userSpan.className = `avatar brround`; userSpan.setAttribute('data-bs-toggle', 'tooltip'); userSpan.setAttribute('data-bs-custom-class', 'livechat-tooltip'); userSpan.setAttribute('data-bs-placement', 'top'); userSpan.setAttribute('data-bs-title', `${data.success.LivechatCustWelcomeMsg}`); userSpan.innerHTML = `+${JSON.parse(data.success.onlineUsers).length - 2}` livechatInfo.querySelector(".avatar-list-stacked").appendChild(userSpan) } let span = document.createElement('span'); span.classList.add('className'); span.textContent = data.livechatcust?.LivechatCustWelcomeMsg; livechatInfo.querySelector(".avatar-list-stacked").appendChild(span) if(bodyElement.querySelector(".supportusersdata")){ bodyElement.querySelector(".supportusersdata").insertAdjacentElement('afterend', livechatInfo); } }else{ bodyElement.querySelector('.onlineorofflinediv')?.remove(); let livechatInfo = document.createElement('div') livechatInfo.className = "onlineorofflinediv mt-4 me-3" livechatInfo.innerHTML = `
` // For the online user names livechatInfo.querySelector('.infoNamesText').innerHTML = `
` bodyElement.querySelector(".offline-msg")?.remove() if(bodyElement.querySelector(".supportusersdata")){ bodyElement.querySelector(".supportusersdata").insertAdjacentElement('afterend', livechatInfo); } } initializeTooltips(); // If it is Online let statusIndicator = bodyElement.querySelector('.online-status-indicator'); console.log(data.success.isonlineoroffline); console.log(statusIndicator); if(data.success.isonlineoroffline == "online" && data.success.OnlineStatusMessage){ statusIndicator.classList.add('online') statusIndicator.classList.remove('offline') // To Add the Online Message Status if (statusIndicator) { statusIndicator.innerHTML = ` ${data.success.OnlineStatusMessage} `; } } // If it is Offline if(data.success.isonlineoroffline == "offline" && data.success.OfflineStatusMessage){ statusIndicator.classList.remove('online') statusIndicator.classList.add('offline') OfflineMessagePermission = { errorMessage: data.success.OfflineMessage} // To Add the Offline Message Status if (statusIndicator) { statusIndicator.innerHTML = ` ${data.success.OfflineStatusMessage} `; } } // For Offline remove liveChat if(data.success.isonlineoroffline == "offline" && !parseInt(data.success.offlineDisplayLiveChat)){ chatMessagePopup.remove() popupButton.remove() } // To remove the liveCht if(data.success.liveChatHidden == "true"){ chatMessagePopup.remove() popupButton.remove() } } }) // Agent Message div let AgentMessage = (data)=>{ // For the message div let agentLi = document.createElement("div"); agentLi.className = "direct-chat-msg" agentLi.innerHTML = `
${data.data.text}
` // For the Option buttons let liveChatOptionBtn = document.createElement("div") liveChatOptionBtn.className = "d-flex flex-wrap liveChatOptionBtn" let typeIndicator = document.createElement('div') typeIndicator.className = 'typing-indicator'; typeIndicator.innerHTML = `
` // connections node Loop data.outputs.act.connections.map((connectedNode)=>{ let optionNode = document.createElement("div") optionNode.onclick = ()=>{ // To remove the Options bodyElement.querySelector(".liveChatOptionBtn").remove() // Append the selected option as a customer message bodyElement.querySelector(".popup-messages").appendChild(customerMessage(flowChatData[connectedNode.node])) bodyElement.querySelector('.popup-messages').appendChild(typeIndicator) setTimeout(() => { // to loop the messages and options if(flowChatData[connectedNode.node].inputs.text.connections[0]){ AgentMessage(flowChatData[flowChatData[connectedNode.node].inputs.text.connections[0].node]) } bodyElement.querySelector('.popup-messages .typing-indicator')?.remove(); }, 1000); } optionNode.innerHTML = `` liveChatOptionBtn.appendChild(optionNode) bodyElement.querySelector('.popup-messages .typing-indicator')?.remove(); }) // For the Message bodyElement.querySelector(".popup-messages")?.appendChild(agentLi); // For the Options bodyElement.querySelector(".popup-messages")?.appendChild(liveChatOptionBtn); } // Customer div let customerMessage = (data)=>{ let custLi = document.createElement("div"); custLi.className = "direct-chat-msg right" custLi.innerHTML = `
${data.data.optionName}
` return custLi } function sanitizeHTML(input) { const map = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''', '/': '/', // For forward slash '`': '`', // Backtick '=': '=' // Equals }; return input.replace(/[&<>"'/`=]/g, function (char) { return map[char]; }); } sendMessage = ()=>{ if(bodyElement.querySelector("#status_message").textContent.length){ // For the Making Chat Flow Message Array bodyElement.querySelectorAll(".popup-messages .direct-chat-msg").forEach((element)=>{ if(element.classList.contains('right')){ FlowChatConversation.push({ authMessage: 'cust', message: element.querySelector(".direct-chat-text").innerText }) }else{ FlowChatConversation.push({ authMessage: 'agent', message: element.querySelector(".direct-chat-text").innerText }) } }) // To open The welcome Form chatBody(welcomeForm(sanitizeHTML(bodyElement.querySelector("#status_message").textContent),OfflineMessagePermission)) bodyElement.querySelector('.popup-minimize-normal-fields')?.addEventListener('click', function() { const targetElement = bodyElement.querySelector('.popup-fields'); if (targetElement) { targetElement.classList.add('d-none'); chatBody(messageConversationFlow()); } }); } } // Enter Message Send Function handleKeyDown = (ele)=>{ if (ele.key === 'Enter' && !ele.shiftKey) { ele.preventDefault(); sendMessage() } } return ( `
` ) } // To add the Flow Message After the 24 Hours const basedOnTimeMessageConversationFlow = ()=>{ let flowChatElement = document.createElement("div") flowChatElement.className = "basedOnTimeMessageConversationFlowDiv" let flowChatData // Getting the chat Flow data getDataAPI(`flow/null`).then((data)=>{ if(data.success){ flowChatData = JSON.parse(data.success.liveChatFlow).nodes // To shoe the first Welcome Message if(JSON.parse(data.success.liveChatFlow).nodes['1'].name == "Welcome Message"){ AgentMessage(JSON.parse(data.success.liveChatFlow).nodes['1']) } } }) // Agent Message div let AgentMessage = (data)=>{ // For the message div let agentLi = document.createElement("div"); agentLi.className = "direct-chat-msg" agentLi.innerHTML = `
${data.data.text}
` // To send the Welcome Message as a message let welcomeMessagedata = { message :data.data.text, username : liveChatCust.username, id : liveChatCust.id, customerId :liveChatCust.id, messageType: "welcomeMessage" } postDataAPI(welcomeMessagedata,'broadcast-message') // For the Option buttons let liveChatOptionBtn = document.createElement("div") liveChatOptionBtn.className = "d-flex flex-wrap liveChatOptionBtn" let typeIndicator = document.createElement('div') typeIndicator.className = 'typing-indicator'; typeIndicator.innerHTML = `
` // connections node Loop data.outputs.act.connections.map((connectedNode)=>{ let optionNode = document.createElement("div") optionNode.onclick = ()=>{ // To remove the Options bodyElement.querySelector(".liveChatOptionBtn").remove() // Append the selected option as a customer message bodyElement.querySelector(".basedOnTimeMessageConversationFlowDiv").appendChild(customerMessage(flowChatData[connectedNode.node])) bodyElement.querySelector('.basedOnTimeMessageConversationFlowDiv').appendChild(typeIndicator) // To send the Welcome Message as a message let welcomeMessagedata = { message :flowChatData[connectedNode.node].data.optionName, username : liveChatCust.username, id : liveChatCust.id, customerId :liveChatCust.id, } setTimeout(() => { postDataAPI(welcomeMessagedata,'broadcast-message').then((ele)=>{ // to loop the messages and options if(flowChatData[connectedNode.node].inputs.text.connections[0]){ AgentMessage(flowChatData[flowChatData[connectedNode.node].inputs.text.connections[0].node]) } bodyElement.querySelector('.basedOnTimeMessageConversationFlowDiv .typing-indicator')?.remove(); }) }, 1000); } optionNode.innerHTML = `` liveChatOptionBtn.appendChild(optionNode) bodyElement.querySelector('.basedOnTimeMessageConversationFlowDiv .typing-indicator')?.remove(); }) // For the Message flowChatElement.appendChild(agentLi); // For the Options flowChatElement.appendChild(liveChatOptionBtn); } // Customer div let customerMessage = (data)=>{ let custLi = document.createElement("div"); custLi.className = "direct-chat-msg right" custLi.innerHTML = `
${data.data.optionName}
` return custLi } return flowChatElement } // For the Offline Message Indication const OfflineMessageIndication = (message)=>{ let offlineChatElement = document.createElement("div") offlineChatElement.className = "direct-chat-msg" // For the Corrent Time function getCurrentTime() { const currentDate = new Date(); let hours = currentDate.getHours(); let minutes = currentDate.getMinutes(); const ampm = hours >= 12 ? 'PM' : 'AM'; // Convert hours to 12-hour format hours = hours % 12 || 12; // Add leading zero to minutes if necessary minutes = minutes < 10 ? '0' + minutes : minutes; const currentTime = hours + ':' + minutes + ampm; return currentTime; } // To post The Message let welcomeMessagedata = { message :message, username : liveChatCust.username, id : liveChatCust.id, customerId :liveChatCust.id, messageType: "welcomeMessage" } postDataAPI(welcomeMessagedata,'broadcast-message') offlineChatElement.innerHTML = `
${message} ${getCurrentTime()}
` return offlineChatElement } // Adding the WellCome form if(!localStorage.LiveChatCust){ chatBody(messageConversationFlow()) }else{ chatBody(messageConversation()) emojiLoader(); } // Adding the Emojis- let storedRange; function storeRange() { let message = bodyElement.querySelector('#status_message'); const selection = bodyElement.getSelection(); if (selection?.rangeCount) { let selected = selection.getRangeAt(0).commonAncestorContainer; if (message.contains(selected)) { // Storing the range storedRange = selection.getRangeAt(0); } else { let newRng = document.createRange(); newRng.setStart(message, message.childNodes.length); newRng.setEnd(message, message.childNodes.length); selection.removeAllRanges(); selection.addRange(newRng); storedRange = selection.getRangeAt(0); } } else { let newRng = document.createRange(); newRng.setStart(message, message.childNodes.length); newRng.setEnd(message, message.childNodes.length); selection.removeAllRanges(); selection.addRange(newRng); storedRange = selection.getRangeAt(0); } } function insertEmoji(emoji) { if (!storedRange) return; const textNode = document.createTextNode(emoji); storedRange.insertNode(textNode); // Move the caret after the inserted emoji let selection = bodyElement.getSelection(); let newRng = document.createRange(); newRng.setStartAfter(textNode); newRng.setEndAfter(textNode); selection.removeAllRanges(); selection.addRange(newRng); // Update the stored range to the new position storedRange = newRng; bodyElement.getElementById("emojiGrid").classList.toggle('d-block'); } function EmojiGridShow(){ storeRange(); bodyElement.getElementById("emojiGrid").classList.toggle('d-block'); } function emojiLoader(){ const messageElement = bodyElement.querySelector('#status_message'); messageElement.addEventListener('mouseup', storeRange); messageElement.addEventListener('keyup', storeRange); let allEmojisBtn = bodyElement.querySelector('.allEmojisBtn'); allEmojisBtn.removeEventListener('click', EmojiGridShow) allEmojisBtn.addEventListener('click', EmojiGridShow) const emojiGrid = bodyElement.getElementById("emojiGrid"); // Emojis data const emojisData = ['๐Ÿ˜€', '๐Ÿ˜ƒ', '๐Ÿ˜„', '๐Ÿ˜', '๐Ÿ˜†', '๐Ÿ˜…', '๐Ÿ˜‚', '๐Ÿคฃ', '๐Ÿ˜Š', '๐Ÿ˜‡', '๐Ÿ™‚', '๐Ÿ™ƒ', '๐Ÿ˜‰', '๐Ÿ˜Œ', '๐Ÿ˜', '๐Ÿฅฐ', '๐Ÿ˜˜', '๐Ÿ˜—', '๐Ÿ˜™', '๐Ÿ˜š', '๐Ÿ˜‹', '๐Ÿ˜›', '๐Ÿ˜œ', '๐Ÿคช', '๐Ÿ˜', '๐Ÿค‘', '๐Ÿค—', '๐Ÿคญ', '๐Ÿคซ', '๐Ÿค”', '๐Ÿค', '๐Ÿคจ', '๐Ÿ˜', '๐Ÿ˜‘', '๐Ÿ˜ถ', '๐Ÿ˜', '๐Ÿ˜’', '๐Ÿ™„', '๐Ÿ˜ฌ', '๐Ÿ˜ฎ', '๐Ÿ˜ฏ', '๐Ÿ˜ฆ', '๐Ÿ˜ง', '๐Ÿ˜จ', '๐Ÿ˜ฐ', '๐Ÿ˜ฑ', '๐Ÿ˜ณ', '๐Ÿ˜ต', '๐Ÿ˜ก', '๐Ÿ˜ ', '๐Ÿ˜ค', '๐Ÿ˜–', '๐Ÿ˜†', '๐Ÿ˜‹', '๐Ÿ˜ท', '๐Ÿ˜Ž', '๐Ÿค“', '๐Ÿค ', '๐Ÿ˜ธ', '๐Ÿ˜บ', '๐Ÿ˜ป', '๐Ÿ˜ผ', '๐Ÿ˜ฝ', '๐Ÿ™€', '๐Ÿ˜ฟ', '๐Ÿ˜พ', '๐Ÿ‘', '๐Ÿ™Œ', '๐Ÿ‘', '๐Ÿค', '๐Ÿ‘', '๐Ÿ‘Ž', '๐Ÿ‘Š', 'โœŠ', '๐Ÿค›', '๐Ÿคœ', '๐Ÿคž', 'โœŒ๏ธ', '๐Ÿค˜', '๐Ÿ‘Œ', '๐Ÿ‘ˆ', '๐Ÿ‘‰', '๐Ÿ‘†', '๐Ÿ‘‡', 'โœ‹', '๐Ÿคš', '๐Ÿ–', '๐Ÿ––', '๐Ÿ‘‹', '๐Ÿค™', '๐Ÿ’ช', '๐Ÿ–•', 'โœ๏ธ', '๐Ÿ™', '๐Ÿฆถ', '๐Ÿฆต', '๐Ÿ’', '๐Ÿ’”', 'โค๏ธ', '๐Ÿ’™', '๐Ÿ’š', '๐Ÿ’›', '๐Ÿ’œ', '๐Ÿงก', '๐Ÿ’”', 'โค๏ธ', '๐Ÿ’•', '๐Ÿ’ž', '๐Ÿ’“', '๐Ÿ’—', '๐Ÿ’–', '๐Ÿ’˜', '๐Ÿ’', '๐Ÿ’Ÿ', '๐Ÿ’ค', '๐Ÿ’ข', '๐Ÿ’ฃ', '๐Ÿ’ฅ', '๐Ÿ’ซ', '๐Ÿ’ฆ', '๐Ÿ’จ', '๐Ÿ•ณ๏ธ', '๐Ÿ’ง', '๐Ÿ’ฉ', '๐Ÿ™ˆ', '๐Ÿ™‰', '๐Ÿ™Š', '๐Ÿ’ช', '๐Ÿ‘ˆ', '๐Ÿ‘‰', '๐Ÿ‘†', '๐Ÿ‘‡', '๐Ÿ–•', '๐Ÿค˜', '๐Ÿคž', '๐ŸคŸ', '๐Ÿค™', '๐Ÿ‘Š', '๐Ÿ‘‹', '๐Ÿ‘', '๐Ÿ‘', 'โœ‹', '๐Ÿคš', '๐Ÿค', '๐Ÿ™', '๐Ÿ’', '๐Ÿ’”', 'โค๏ธ', '๐Ÿ’•', '๐Ÿ’ž', '๐Ÿ’“', '๐Ÿ’—', '๐Ÿ’–', '๐Ÿ’˜', '๐Ÿ’', '๐Ÿ’Ÿ', '๐Ÿ’ค', '๐Ÿ’ข', '๐Ÿ’ฃ', '๐Ÿ’ฅ', '๐Ÿ’ซ', '๐Ÿ’ฆ', '๐Ÿ’จ', '๐Ÿ•ณ๏ธ', '๐Ÿ’ง', '๐Ÿ’ฉ', '๐Ÿ™ˆ', '๐Ÿ™‰', '๐Ÿ™Š', '๐Ÿ’ช', '๐Ÿ‘ˆ', '๐Ÿ‘‰', '๐Ÿ‘†', '๐Ÿ‘‡', '๐Ÿ–•', '๐Ÿค˜', '๐Ÿคž', '๐ŸคŸ', '๐Ÿค™', '๐Ÿ‘Š', '๐Ÿ‘‹', '๐Ÿ‘', '๐Ÿ‘', 'โœ‹', '๐Ÿคš', '๐Ÿค', '๐Ÿ™', '๐Ÿ’', '๐Ÿ’”', 'โค๏ธ', '๐Ÿ’•', '๐Ÿ’ž', '๐Ÿ’“', '๐Ÿ’—', '๐Ÿ’–', '๐Ÿ’˜', '๐Ÿ’', '๐Ÿ’Ÿ', '๐Ÿ’ค', '๐Ÿ’ข', '๐Ÿ’ฃ', '๐Ÿ’ฅ', '๐Ÿ’ซ', '๐Ÿ’ฆ', '๐Ÿ’จ', '๐Ÿ•ณ๏ธ', '๐Ÿ’ง', '๐Ÿ’ฉ', '๐Ÿ™ˆ', '๐Ÿ™‰', '๐Ÿ™Š', '๐Ÿ’ช', '๐Ÿ‘ˆ', '๐Ÿ‘‰', '๐Ÿ‘†', '๐Ÿ‘‡', '๐Ÿ–•', '๐Ÿค˜', '๐Ÿคž', '๐ŸคŸ', '๐Ÿค™', '๐Ÿ‘Š', '๐Ÿ‘‹', '๐Ÿ‘', '๐Ÿ‘', 'โœ‹', '๐Ÿคš', '๐Ÿค', '๐Ÿ™', '๐Ÿ’', '๐Ÿ’”', 'โค๏ธ', '๐Ÿ’•', '๐Ÿ’ž', '๐Ÿ’“', '๐Ÿ’—', '๐Ÿ’–', '๐Ÿ’˜', '๐Ÿ’', '๐Ÿ’Ÿ', '๐Ÿ’ค', '๐Ÿ’ข', '๐Ÿ’ฃ', '๐Ÿ’ฅ', '๐Ÿ’ซ', '๐Ÿ’ฆ', '๐Ÿ’จ', '๐Ÿ•ณ๏ธ', '๐Ÿ’ง', '๐Ÿ’ฉ', '๐Ÿ™ˆ', '๐Ÿ™‰', '๐Ÿ™Š', '๐Ÿ’ช', '๐Ÿ‘ˆ', '๐Ÿ‘‰', '๐Ÿ‘†', '๐Ÿ‘‡', '๐Ÿ–•', '๐Ÿค˜', '๐Ÿคž', '๐ŸคŸ', '๐Ÿค™', '๐Ÿ‘Š', '๐Ÿ‘‹', '๐Ÿ‘', '๐Ÿ‘', 'โœ‹', '๐Ÿคš', '๐Ÿค', '๐Ÿ™', '๐Ÿ’', '๐Ÿ’”', 'โค๏ธ', '๐Ÿ’•', '๐Ÿ’ž', '๐Ÿ’“', '๐Ÿ’—', '๐Ÿ’–', '๐Ÿ’˜', '๐Ÿ’', '๐Ÿ’Ÿ', '๐Ÿ’ค', '๐Ÿ’ข', '๐Ÿ’ฃ', '๐Ÿ’ฅ', '๐Ÿ’ซ', '๐Ÿ’ฆ', '๐Ÿ’จ', '๐Ÿ•ณ๏ธ', '๐Ÿ’ง', '๐Ÿ’ฉ', '๐Ÿ™ˆ', '๐Ÿ™‰', '๐Ÿ™Š', '๐Ÿ’ช', '๐Ÿ‘ˆ', '๐Ÿ‘‰', '๐Ÿ‘†', '๐Ÿ‘‡', '๐Ÿ–•', '๐Ÿค˜', '๐Ÿคž', '๐ŸคŸ', '๐Ÿค™', '๐Ÿ‘Š', '๐Ÿ‘‹', '๐Ÿ‘', '๐Ÿ‘', 'โœ‹', '๐Ÿคš', '๐Ÿค', '๐Ÿ™', '๐Ÿ’', '๐Ÿ’”', 'โค๏ธ', '๐Ÿ’•', '๐Ÿ’ž', '๐Ÿ’“', '๐Ÿ’—', '๐Ÿ’–', '๐Ÿ’˜', '๐Ÿ’', '๐Ÿ’Ÿ', '๐Ÿ’ค', '๐Ÿ’ข', '๐Ÿ’ฃ', '๐Ÿ’ฅ', '๐Ÿ’ซ', '๐Ÿ’ฆ', '๐Ÿ’จ', '๐Ÿ•ณ๏ธ', '๐Ÿ’ง', '๐Ÿ’ฉ', '๐Ÿ™ˆ', '๐Ÿ™‰', '๐Ÿ™Š', '๐Ÿ’ช', '๐Ÿ‘ˆ', '๐Ÿ‘‰', '๐Ÿ‘†', '๐Ÿ‘‡', '๐Ÿ–•', '๐Ÿค˜', '๐Ÿคž', '๐ŸคŸ', '๐Ÿค™', '๐Ÿ‘Š', '๐Ÿ‘‹', '๐Ÿ‘', '๐Ÿ‘', 'โœ‹', '๐Ÿคš', '๐Ÿค', '๐Ÿ™', '๐Ÿ’', '๐Ÿ’”', 'โค๏ธ', '๐Ÿ’•', '๐Ÿ’ž', '๐Ÿ’“', '๐Ÿ’—', '๐Ÿ’–', '๐Ÿ’˜', '๐Ÿ’', '๐Ÿ’Ÿ', '๐Ÿ’ค', '๐Ÿ’ข', '๐Ÿ’ฃ', '๐Ÿ’ฅ', '๐Ÿ’ซ', '๐Ÿ’ฆ', '๐Ÿ’จ', '๐Ÿ•ณ๏ธ', '๐Ÿ’ง', '๐Ÿ’ฉ', '๐Ÿ™ˆ', '๐Ÿ™‰', '๐Ÿ™Š', '๐Ÿ’ช', '๐Ÿ‘ˆ', '๐Ÿ‘‰', '๐Ÿ‘†', '๐Ÿ‘‡', '๐Ÿ–•', '๐Ÿค˜', '๐Ÿคž', '๐ŸคŸ', '๐Ÿค™', '๐Ÿ‘Š', '๐Ÿ‘‹', '๐Ÿ‘', '๐Ÿ‘', 'โœ‹', '๐Ÿคš', '๐Ÿค', '๐Ÿ™', '๐Ÿ’', '๐Ÿ’”', 'โค๏ธ', '๐Ÿ’•', '๐Ÿ’ž', '๐Ÿ’“', '๐Ÿ’—', '๐Ÿ’–', '๐Ÿ’˜', '๐Ÿ’', '๐Ÿ’Ÿ', '๐Ÿ’ค', '๐Ÿ’ข', '๐Ÿ’ฃ', '๐Ÿ’ฅ', '๐Ÿ’ซ', '๐Ÿ’ฆ', '๐Ÿ’จ', '๐Ÿ•ณ๏ธ', '๐Ÿ’ง', '๐Ÿ’ฉ', '๐Ÿ™ˆ', '๐Ÿ™‰', '๐Ÿ™Š', '๐Ÿ’ช', '๐Ÿ‘ˆ', '๐Ÿ‘‰', '๐Ÿ‘†', '๐Ÿ‘‡', '๐Ÿ–•', '๐Ÿค˜', '๐Ÿคž', '๐ŸคŸ', '๐Ÿค™', '๐Ÿ‘Š', '๐Ÿ‘‹', '๐Ÿ‘', '๐Ÿ‘', 'โœ‹', '๐Ÿคš', '๐Ÿค', '๐Ÿ™', '๐Ÿ’', '๐Ÿ’”', 'โค๏ธ', '๐Ÿ’•', '๐Ÿ’ž', '๐Ÿ’“', '๐Ÿ’—', '๐Ÿ’–', '๐Ÿ’˜', '๐Ÿ’', '๐Ÿ’Ÿ', '๐Ÿ’ค', '๐Ÿ’ข', '๐Ÿ’ฃ', '๐Ÿ’ฅ', '๐Ÿ’ซ', '๐Ÿ’ฆ', '๐Ÿ’จ', '๐Ÿ•ณ๏ธ', '๐Ÿ’ง', '๐Ÿ’ฉ', '๐Ÿ™ˆ', '๐Ÿ™‰', '๐Ÿ™Š', '๐Ÿ’ช', '๐Ÿ‘ˆ', '๐Ÿ‘‰', '๐Ÿ‘†', '๐Ÿ‘‡', '๐Ÿ–•', '๐Ÿค˜', '๐Ÿคž', '๐ŸคŸ', '๐Ÿค™', '๐Ÿ‘Š', '๐Ÿ‘‹', '๐Ÿ‘', '๐Ÿ‘', 'โœ‹', '๐Ÿคš', '๐Ÿค', '๐Ÿ™', '๐Ÿ’', '๐Ÿ’”', 'โค๏ธ', '๐Ÿ’•', '๐Ÿ’ž', '๐Ÿ’“', '๐Ÿ’—', '๐Ÿ’–', '๐Ÿ’˜', '๐Ÿ’', '๐Ÿ’Ÿ', '๐Ÿ’ค', '๐Ÿ’ข', '๐Ÿ’ฃ', '๐Ÿ’ฅ', '๐Ÿ’ซ', '๐Ÿ’ฆ', '๐Ÿ’จ', '๐Ÿ•ณ๏ธ', '๐Ÿ’ง', '๐Ÿ’ฉ', '๐Ÿ™ˆ', '๐Ÿ™‰', '๐Ÿ™Š', '๐Ÿ’ช', '๐Ÿ‘ˆ', '๐Ÿ‘‰', '๐Ÿ‘†', '๐Ÿ‘‡', '๐Ÿ–•', '๐Ÿค˜', '๐Ÿคž', '๐ŸคŸ', '๐Ÿค™', '๐Ÿ‘Š', '๐Ÿ‘‹', '๐Ÿ‘', '๐Ÿ‘', 'โœ‹', '๐Ÿคš', '๐Ÿค', '๐Ÿ™', '๐Ÿ’', '๐Ÿ’”', 'โค๏ธ', '๐Ÿ’•', '๐Ÿ’ž', '๐Ÿ’“', '๐Ÿ’—', '๐Ÿ’–', '๐Ÿ’˜', '๐Ÿ’', '๐Ÿ’Ÿ', '๐Ÿ’ค', '๐Ÿ’ข', '๐Ÿ’ฃ', '๐Ÿ’ฅ', '๐Ÿ’ซ', '๐Ÿ’ฆ', '๐Ÿ’จ', '๐Ÿ•ณ๏ธ', '๐Ÿ’ง', '๐Ÿ’ฉ', '๐Ÿ™ˆ', '๐Ÿ™‰', '๐Ÿ™Š', '๐Ÿ’ช', '๐Ÿ‘ˆ', '๐Ÿ‘‰', '๐Ÿ‘†', '๐Ÿ‘‡', '๐Ÿ–•', '๐Ÿค˜', '๐Ÿคž', '๐ŸคŸ', '๐Ÿค™', '๐Ÿ‘Š', '๐Ÿ‘‹', '๐Ÿ‘', '๐Ÿ‘', 'โœ‹', '๐Ÿคš', '๐Ÿค', '๐Ÿ™', '๐Ÿ’', '๐Ÿ’”', 'โค๏ธ', '๐Ÿ’•', '๐Ÿ’ž', '๐Ÿ’“', '๐Ÿ’—', '๐Ÿ’–', '๐Ÿ’˜', '๐Ÿ’', '๐Ÿ’Ÿ', '๐Ÿ’ค', '๐Ÿ’ข', '๐Ÿ’ฃ', '๐Ÿ’ฅ', '๐Ÿ’ซ', '๐Ÿ’ฆ', '๐Ÿ’จ', '๐Ÿ•ณ๏ธ', '๐Ÿ’ง', '๐Ÿ’ฉ', '๐Ÿ™ˆ', '๐Ÿ™‰', '๐Ÿ™Š', '๐Ÿ’ช', '๐Ÿ‘ˆ', '๐Ÿ‘‰', '๐Ÿ‘†', '๐Ÿ‘‡', '๐Ÿ–•', '๐Ÿค˜', '๐Ÿคž', '๐ŸคŸ', '๐Ÿค™', '๐Ÿ‘Š', '๐Ÿ‘‹', '๐Ÿ‘', '๐Ÿ‘', 'โœ‹', '๐Ÿคš', '๐Ÿค', '๐Ÿ™', '๐Ÿ’', '๐Ÿ’”', 'โค๏ธ', '๐Ÿ’•', '๐Ÿ’ž', '๐Ÿ’“', '๐Ÿ’—', '๐Ÿ’–', '๐Ÿ’˜', '๐Ÿ’', '๐Ÿ’Ÿ', '๐Ÿ’ค', '๐Ÿ’ข', '๐Ÿ’ฃ', '๐Ÿ’ฅ', '๐Ÿ’ซ', '๐Ÿ’ฆ', '๐Ÿ’จ', '๐Ÿ•ณ๏ธ', '๐Ÿ’ง', '๐Ÿ’ฉ', '๐Ÿ™ˆ']; let emojis = [...new Set(emojisData)] // Number of emojis per row const emojisPerRow = 8; // Generate emoji grid for (let i = 0; i < emojis.length; i++) { if (i % emojisPerRow === 0) { // Start a new row const newRow = document.createElement("li"); newRow.className = "d-flex"; emojiGrid.appendChild(newRow); } // Create emoji element const col = document.createElement("span"); col.style.padding = "0.5rem" col.classList.add("dropdown-item",); col.style.cursor = 'pointer' col.onclick = ()=>{ insertEmoji(emojis[i]) } col.innerHTML = `${emojis[i]}`; // Append emoji to the current row const currentRow = emojiGrid.lastElementChild; // bodyElement.querySelector("#agentSendMessage").disabled = false // bodyElement.querySelector("#agentSendMessage").classList.remove('disabled') currentRow.appendChild(col); } } emojiLoader(); let debouncing let debouncing2 let debouncing3 // Public Socket Echo.channel('liveChat').listen('ChatMessageEvent',(socket)=>{ if(socket.visitoruiqueid != null && socket.visitoruiqueid == localStorage.getItem("LiveChatVisitor")){ if(!socket.message && socket.customerId == 'visitoronlinestatuscheck'){ let statusdata statusdata = { "id" : localStorage.getItem("LiveChatVisitor"), } postDataAPI(statusdata,'livevisitorsstatus'); }else{ const now = new Date(); const hours = now.getHours(); const minutes = now.getMinutes(); const period = hours >= 12 ? "PM" : "AM"; const formattedTime = `${((hours + 11) % 12) + 1}:${minutes}${period}`; // To remove the Typing induction if(bodyElement.querySelector("#typingIndication")){ bodyElement.querySelector("#typingIndication").remove() } function formatTime() { const date = new Date(); const hours = date.getHours(); const minutes = date.getMinutes(); const ampm = hours >= 12 ? 'PM' : 'AM'; const formattedHours = hours % 12 === 0 ? 12 : hours % 12; const formattedMinutes = minutes < 10 ? '0' + minutes : minutes; const formattedTime = `${formattedHours}:${formattedMinutes}${ampm}`; return formattedTime; } let conversationDiv = document.createElement("div"); conversationDiv.className = "direct-chat-messages" conversationDiv.style.overflow = "hidden" let ToVisitorLi = document.createElement("div"); ToVisitorLi.className = "direct-chat-msg"; conversationDiv.appendChild(ToVisitorLi); bodyElement.querySelector(".popup-messages").appendChild(conversationDiv); // To Scroll Down the Conversation bodyElement.querySelector(".popup-messages").scrollBy(0, bodyElement.querySelector(".popup-messages").scrollHeight) localStorage.setItem("LiveChatCust",JSON.stringify(socket.custdata)) // For the Message Seen Indication if(chatMessagePopup.classList.contains('active')){ postDataAPI({cust_unique_id : socket.visitoruiqueid},'user-seen-messages-indication') } if(!chatMessagePopup.classList.contains('active') && popupButton.querySelector('.unreadIndexNumberPopup').classList.contains("d-none")){ popupButton.querySelector('.unreadIndexNumberPopup').innerText = "1" popupButton.querySelector('.unreadIndexNumberPopup').classList.remove("d-none") }else{ if(!chatMessagePopup.classList.contains('active') && !popupButton.querySelector('.unreadIndexNumberPopup').classList.contains("d-none")){ popupButton.querySelector('.unreadIndexNumberPopup').innerText = parseInt(popupButton.querySelector('.unreadIndexNumberPopup').innerText) + 1 } } } } // For the Online Users Update if(!socket.message && socket.onlineUserUpdated == 'true' && !localStorage.LiveChatCust){ clearTimeout(debouncing) debouncing = setTimeout(() => { chatBody(messageConversationFlow(),false) }, 1000); } // For the Engage Users Update if(!socket.message && (socket.onlineUserUpdated == 'true' || socket.engageUser) && localStorage.LiveChatCust){ clearTimeout(debouncing3) debouncing3 = setTimeout(() => { chatBody(messageConversation(),false) emojiLoader(); }, 3000); } // For the Message update if(localStorage.LiveChatCust){ let liveChatCust = JSON.parse(localStorage.LiveChatCust) if(typeof(socket.customerId) == 'string' && socket.customerId == liveChatCust.id && socket.message){ const now = new Date(); const hours = now.getHours(); const minutes = now.getMinutes(); const period = hours >= 12 ? "PM" : "AM"; const formattedTime = `${((hours + 11) % 12) + 1}:${minutes}${period}`; // To remove the Typing induction if(bodyElement.querySelector("#typingIndication")){ bodyElement.querySelector("#typingIndication").remove() } let directChatMessages = bodyElement.querySelector(".direct-chat-messages") let custMessage = document.createElement("div"); custMessage.className = "direct-chat-msg" custMessage.innerHTML = `
${socket.messageType == "image" ? `` :`${socket.message}`} ${formattedTime}
` // To Open Image In the new Tab if(custMessage.querySelector("img")){ custMessage.querySelector("img").onclick = ()=>{ window.open(custMessage.querySelector("img").getAttribute('imagesrc')); } } directChatMessages.appendChild(custMessage) // To Scroll Down the Conversation bodyElement.querySelector(".popup-messages").scrollBy(0, bodyElement.querySelector(".popup-messages").scrollHeight) // For the Message Seen Indication if(chatMessagePopup.classList.contains('active')){ postDataAPI(JSON.parse(localStorage.LiveChatCust),'user-seen-messages-indication') } if(!chatMessagePopup.classList.contains('active') && popupButton.querySelector('.unreadIndexNumberPopup').classList.contains("d-none")){ popupButton.querySelector('.unreadIndexNumberPopup').innerText = "1" popupButton.querySelector('.unreadIndexNumberPopup').classList.remove("d-none") }else{ if(!chatMessagePopup.classList.contains('active') && !popupButton.querySelector('.unreadIndexNumberPopup').classList.contains("d-none")){ popupButton.querySelector('.unreadIndexNumberPopup').innerText = parseInt(popupButton.querySelector('.unreadIndexNumberPopup').innerText) + 1 } } } if(!socket.agentInfo && socket.userName != 'chatBot' && socket.customerId == liveChatCust.id && socket.message){ const now = new Date(); const hours = now.getHours(); const minutes = now.getMinutes(); const period = hours >= 12 ? "PM" : "AM"; const formattedTime = `${((hours + 11) % 12) + 1}:${minutes}${period}`; let directChatMessages = bodyElement.querySelector(".direct-chat-messages") let custMessage = document.createElement("div"); custMessage.className = "direct-chat-msg right" custMessage.innerHTML = `
${socket.messageType == "image" ? `` :`${socket.message}`} ${formattedTime}
` // To Open Image In the new Tab if(custMessage.querySelector("img")){ custMessage.querySelector("img").onclick = ()=>{ window.open(custMessage.querySelector("img").getAttribute('imagesrc')); } } directChatMessages?.appendChild(custMessage) // To Scroll Down the Conversation bodyElement.querySelector(".popup-messages")?.scrollBy(0, bodyElement.querySelector(".popup-messages").scrollHeight) } } // For the Typing induction if(!socket.message && socket.agentInfo && socket.customerId == liveChatCust?.id && socket.typingMessage){ // To remove the Typing induction if(bodyElement.querySelector("#typingIndication")){ bodyElement.querySelector("#typingIndication").remove() } let directChatMessages = bodyElement.querySelector(".direct-chat-messages") let custMessage = document.createElement("div"); custMessage.id = "typingIndication" custMessage.className = "direct-chat-msg" custMessage.innerHTML = `
Typing....
` directChatMessages.appendChild(custMessage) // To Scroll Down the Conversation bodyElement.querySelector(".popup-messages").scrollBy(0, bodyElement.querySelector(".popup-messages").scrollHeight) clearTimeout(debouncing2); debouncing2 = setTimeout(function() { if(bodyElement.querySelector("#typingIndication")){ bodyElement.querySelector("#typingIndication").remove() } }, 5000); } }) }; bodyElement.appendChild(script); } bodyElement.appendChild(link); // To add the Main Live Chat Div document.body.appendChild(mainLiveChatDiv);