`;
buttonCloseMessage.onclick = function () {
if (document.getElementById("buttonMessage"))
document.getElementById("buttonMessage").remove();
};
if (obj.buttonMessage) {
buttonMessage.appendChild(buttonCloseMessage);
document.body.appendChild(buttonMessage);
}
document.body.appendChild(mainButton);
document.body.appendChild(messageBadge);
document.body.appendChild(mainDiv);
document.body.appendChild(messageHolder);
mainDiv.appendChild(webchatIframe);
registerProxy();
webchatIframe.onload = () => {
if (sessionStorage.getItem("isWebchatOpen") === "true") openChat();
};
}
/**
* @name REGISTER_PROXY
* @desc Registers event listener for iframe events
*/
function registerProxy() {
window.addEventListener(
"message",
(event) => {
switch (event.data.action) {
// Trying to minimize in mobile
case MINIMIZE_EVENT:
toggleChat();
break;
// iframe sending us app color
case SET_COLOR_EVENT:
// Setting button color
appColor = event.data.color;
setButtonColor();
// Sending resolution to main App
document
.getElementById("iframeWebChat")
.contentWindow.postMessage(
{ action: ISLOWRES_EVENT, state: lowRes() },
"*"
);
window.onresize = () => {
// Creating eventHandler on resize so main app always knows current resolution
document
.getElementById("iframeWebChat")
.contentWindow.postMessage(
{ action: ISLOWRES_EVENT, state: lowRes() },
"*"
);
};
//Show Button Message
if (obj.buttonMessage)
document.getElementById("buttonMessage").style.display = "";
// Checking last webchat state (opened,closed)
// Timeout is needed so animation shows in time
break;
case CURRENT_URL:
// Sends current url to webchat's vue app
updateCurrentURL();
break;
case NEWMESSAGE_EVENT:
if (!event.data.message.self)
injectNewMessage(
event.data.message.message,
event.data.message.bot
);
break;
case REQUEST_PERMISSION:
Notification.requestPermission();
break;
case WEBCHAT_READY:
if (typeof onWebChatReady === "function") onWebChatReady();
if (typeof objReturn.onWebChatReady === "function")
objReturn.onWebChatReady();
break;
case WEBCHAT_EVENT:
if (typeof objReturn.onWebChatEvent === "function")
objReturn.onWebChatEvent(event.data.data);
break;
case WEBCHAT_SIZE:
document.getElementById(
"integrawebchatmaindivcontent"
).style.zoom = `1.${event.data.size}`;
break;
}
},
false
);
}
function updateCurrentURL() {
webchatIframe.contentWindow.postMessage(
{
action: CURRENT_URL,
state: JSON.stringify({
URL: webchatTraceUserPath(),
title: getPageTitle(),
}),
},
"*"
);
}
/**
* @name SET_BUTTON_COLOR
* @desc Sets main button color
* @param color
*/
function setButtonColor() {
let button = document.getElementById("startChat");
let chaticon = document.getElementById("chaticon").children[0];
chaticon.style.fill = invertColor(appColor);
button.style = "background-color:" + appColor;
button.classList.add("buttonReady");
}
/**
* @name INJECT_NEW_MESSAGE
* @desc Injects div with new message when the chat is closed
*/
function injectNewMessage(message_text, bot) {
if (!isChatOpen) {
messageQuant++;
// Creating a div with the new received message and showing to client
if (!bot) {
let message = document.createElement("div");
message.classList.add("wc-new-message");
message.innerHTML += message_text;
// Appending message to holder and resizing it
let holder = document.querySelector(".unread-messages-holder");
holder.classList.add("show");
holder.appendChild(message);
// Resizing holder, accounting for padding and margin per message
holder.style.height =
holder.clientHeight + message.clientHeight + 8 + "px";
// We wait a few seconds to show the element so the animation is shown properly
setTimeout(() => {
message.classList.add("show");
}, 200);
//We hide the message after a 6 sec timeout
setTimeout(() => {
message.classList.remove("show");
}, 6000);
}
// Since a new message was received, we show the badge with the corresponding messages number
let badge = document.getElementById("BadgeCounter");
badge.innerHTML = messageQuant;
badge.classList.add("show");
}
}
/**
* @name INVERT_COLOR
* @desc Takes a color && returns the oposit
* @returns {string}
*/
invertColor = (hex = "#FFFFFF", bw = true) => {
function padZero(str, len) {
len = len || 2;
var zeros = new Array(len).join("0");
return (zeros + str).slice(-len);
}
//https://stackoverflow.com/questions/35969656
if (hex.indexOf("#") === 0) {
hex = hex.slice(1);
}
// convert 3-digit hex to 6-digits.
if (hex.length === 3) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}
if (hex.length !== 6) {
throw new Error("Invalid HEX color.");
}
var r = parseInt(hex.slice(0, 2), 16),
g = parseInt(hex.slice(2, 4), 16),
b = parseInt(hex.slice(4, 6), 16);
if (bw) {
// http://stackoverflow.com/a/3943023/112731
return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? "#0F120F" : "#F1F2EB";
}
};
/**
* @name TOGGLE_CHAT
* @desc toggles the chat open/close
*/
function toggleChat(toggle) {
isChatOpen = !isChatOpen;
sessionStorage.setItem("isWebchatOpen", isChatOpen);
// Hiding message badge since the client is opening the chat
let badge = document.getElementById("BadgeCounter");
badge.innerHTML = messageQuant;
badge.classList.remove("show");
messageQuant = 0;
// Hinding floating messages since the client is opening the chat
document.querySelector(".unread-messages-holder").classList.remove("show");
if (obj.buttonMessage) {
if (document.getElementById("buttonMessage"))
document.getElementById("buttonMessage").remove();
}
// Toggling iframe classes to hide/show respectibly
document.getElementById("iframeWebChat").classList.toggle("showIframe");
document
.getElementById("integrawebchatmaindivcontent")
.classList.toggle("isWebchatOpen");
if (checkMobile()) {
document.getElementById("startChat").classList.toggle("hide");
}
}
function openChat() {
if (!isChatOpen) {
isChatOpen = true;
sessionStorage.setItem("isWebchatOpen", "true");
// Hiding message badge since the client is opening the chat
let badge = document.getElementById("BadgeCounter");
badge.innerHTML = messageQuant;
badge.classList.remove("show");
messageQuant = 0;
// Hinding floating messages since the client is opening the chat
document
.querySelector(".unread-messages-holder")
.classList.remove("show");
// Toggling iframe classes to hide/show respectibly
document.getElementById("iframeWebChat").classList.add("showIframe");
document
.getElementById("integrawebchatmaindivcontent")
.classList.add("isWebchatOpen");
if (checkMobile()) {
document.getElementById("startChat").classList.add("hide");
}
}
}
/**
* @name NO_SUPPORT
* @desc Lets user know the device he/she is using
* is not supported by the app
*/
function noSupport() {
let text = {
en: "Browser not supported",
es: "Navegador no soportado",
pt: "navegador não suportado",
};
document.body.innerHTML +=
'