(function () {
document.head.insertAdjacentHTML('beforeend', '
${message}
`;
chatMessages.appendChild(messageElement);
chatMessages.scrollTop = chatMessages.scrollHeight;
chatInput.value = '';
adjustChatInputHeight();
showTypingIndicator();
if (!shortPollStarted) {
shortPollStarted = true;
shortPoll();
}
fetch(settings.chatWebHookUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Lead-Host': settings.leadHost,
'From-Address': settings.fromAddress,
},
body: JSON.stringify({
"chatInput": message,
"sessionId": sessionId,
"companyInfo": settings.company_info,
"brandName": settings.brand_name
})
})
.then(response => response.json())
.then(data => {
hideTypingIndicator();
if (data && data.answer) {
if (data.action === 'human-request') {
mode = 'support';
showTypingIndicator('Waiting for support');
// todo add message like 'Waiting for support' to indicate iin sms chats
}
} else {
reply('No response from server');
}
})
.catch(error => {
console.error('Error:', error);
hideTypingIndicator();
reply('Error communicating with server');
});
}
function onUserRequestToSupport(message) {
console.log('User request to support:', message);
const messageElement = document.createElement('div');
messageElement.className = 'chat-widget-message-row chat-widget-message-row--outgoing';
messageElement.innerHTML = `
${message}
`;
chatMessages.appendChild(messageElement);
chatMessages.scrollTop = chatMessages.scrollHeight;
chatInput.value = '';
adjustChatInputHeight();
showTypingIndicator();
fetch(settings.crmHost + '/chat-widget/incomingMessageToSupport', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
"chatInput": message,
"sessionId": sessionId,
})
})
.then(response => response.json())
.then(data => {
console.log(data)
//set lastMessageId
lastMessage = data;
console.log('lastMessage', lastMessage);
})
.catch(error => {
console.error('Error:', error);
hideTypingIndicator();
reply('Error communicating with server');
});
}
function shortPoll() {
setInterval(() => {
const data = {
"lastMessageId": lastMessage.sms_id,
"sessionId": sessionId,
};
// 1. Convert the data object into a query string
const queryString = new URLSearchParams(data).toString();
// 2. Append the query string to the base URL
const url = settings.crmHost + '/chat-widget/getNewMessages?' + queryString;
fetch(url, {
method: 'get',
headers: {
'Content-Type': 'application/json',
},
})
.then(response => response.json())
.then(data => {
if (Array.isArray(data) && data.length > 0) {
lastMessage = data.at(-1);
data.forEach(function (item) {
hideTypingIndicator();
reply(item.sms_body);
if (item.sms_user_id) {
mode = 'support';
}
});
}
});
}, 5000); // Poll every 5 seconds
}
function reply(message) {
const chatMessages = document.getElementById('chat-messages');
const replyElement = document.createElement('div');
replyElement.className = 'chat-widget-message-row chat-widget-message-row--incoming';
replyElement.innerHTML = `
${message}
`;
chatMessages.appendChild(replyElement);
chatMessages.scrollTop = chatMessages.scrollHeight;
}
reply(settings.greeting);
closePopup();
document.addEventListener('click', function (event) {
if (!chatWidgetContainer.contains(event.target) && isPopupOpen()) {
closePopup();
}
});
document.addEventListener('keydown', function (event) {
if (event.key === 'Escape' && isPopupOpen()) {
closePopup();
}
});
})();
