const SIZE = 60; // size of the chat button in pixels
const BTN_RAD = SIZE / 2; // radius of the chat button in pixels
const BG_CHAT = "linear-gradient(45deg, #59C3C6, #59C3C6, #2B0341)";
const chatButtonLogo = ``;
const chatButtonClose = ``;
const chatButtonCloseIcon = ``;
const scriptTag = document.currentScript;
let botID = scriptTag.id || ""
let description = "";
//Chat Button
const chatButton = document.createElement("div");
chatButton.setAttribute("id", "chat-bubble-button");
chatButton.style.position = "fixed";
chatButton.style.bottom = "20px";
chatButton.style.width = SIZE + "px";
chatButton.style.height = SIZE + "px";
chatButton.style.borderRadius = BTN_RAD + "px";
chatButton.style.background = BG_CHAT;
chatButton.style.boxShadow = "0 4px 8px 0 rgba(0, 0, 0, 0.2)";
chatButton.style.cursor = "pointer";
chatButton.style.zIndex = 999999999;
chatButton.style.transition = "all .2s ease-in-out";
chatButton.addEventListener("mouseenter", (event) => {
chatButton.style.transform = "scale(1.05)";
});
chatButton.addEventListener("mouseleave", (event) => {
chatButton.style.transform = "scale(1)";
});
chatButton.addEventListener("click", () => {
if (chat.style.display === "none") {
chat.style.display = "flex";
chatButtonIcon.innerHTML = chatButtonCloseIcon;
overlay.style.display = "block";
document.body.style.overflow = "hidden";
} else {
chat.style.display = "none";
chatButtonIcon.innerHTML = chatButtonLogo;
chatButtonIcon.appendChild(chatButtonText);
overlay.style.display = "none";
document.body.style.overflow = "auto";
}
});
//Chat Button Icon
const chatButtonIcon = document.createElement("div");
chatButtonIcon.style.display = "flex";
chatButtonIcon.style.alignItems = "center";
chatButtonIcon.style.justifyContent = "center";
chatButtonIcon.style.width = "100%";
chatButtonIcon.style.height = "100%";
chatButtonIcon.style.zIndex = 999999999;
chatButtonIcon.innerHTML = chatButtonLogo;
chatButton.appendChild(chatButtonIcon);
const chatButtonText = document.createElement("div");
chatButtonText.style.position = "absolute";
chatButtonText.style.top = "-45px";
chatButtonText.style.right = "0px"
chatButtonText.style.padding = "4px 8px";
chatButtonText.style.backgroundColor = "#ffffff"; // Background color
chatButtonText.style.borderRadius = "40px"; // Border radius
chatButtonText.style.fontSize = "12px"; // Font size
chatButtonText.style.fontWeight = "bold"; // Font weight
chatButtonText.style.color = "#59C3C6";
chatButtonText.style.border = "2px solid";
chatButtonText.style.display = "none"; // Hide initially
chatButtonText.style.whiteSpace = "nowrap";
chatButtonText.textContent = description;
chatButtonIcon.appendChild(chatButtonText);
const overlay = document.createElement("div");
overlay.style.position = "fixed";
overlay.style.top = "0";
overlay.style.left = "0";
overlay.style.width = "100%";
overlay.style.height = "100%";
overlay.style.backgroundColor = "rgba(0, 0, 0, 0.3)";
overlay.style.backdropFilter = "blur(1px)";
overlay.style.zIndex = "999999998";
overlay.style.display = "none";
overlay.style.touchAction = "none";
overlay.addEventListener("click", () => {
chat.style.display = "none";
chatButtonIcon.innerHTML = chatButtonLogo;
chatButtonIcon.appendChild(chatButtonText);
overlay.style.display = "none";
document.body.style.overflow = "auto";
});
// Responsive
function adjustForSmallScreens() {
const smallScreenWidth = 550;
if (window.innerWidth < smallScreenWidth) {
chat.style.position = "fixed";
chat.style.top = "0";
chat.style.left = "0";
chat.style.transform = "none";
chat.style.width = "100%";
chat.style.height = "100%";
chat.style.right = "unset";
chat.style.borderRadius = "0px";
} else {
chat.style.position = "fixed";
chat.style.top = "45%";
chat.style.left = "50%";
chat.style.transform = "translate(-50%, -50%)";
chat.style.width = "60vw";
chat.style.height = "70vh";
chat.style.boxShadow =
"rgba(150, 150, 150, 0.15) 0px 6px 24px 0px, rgba(150, 150, 150, 0.15) 0px 0px 0px 1px";
chat.style.borderRadius = "5px";
}
}
//Initailize Chat
const chat = document.createElement("div");
chat.setAttribute("id", "chat-bubble-window");
chat.style.display = "none";
chat.style.zIndex = 999999999;
chat.style.borderRadius = "5px";
const chatCloseButton = document.createElement("div");
chatCloseButton.style.position = "absolute";
chatCloseButton.style.top = "10px";
chatCloseButton.style.right = "10px";
chatCloseButton.style.width = "24px";
chatCloseButton.style.height = "24px";
chatCloseButton.style.cursor = "pointer";
chatCloseButton.innerHTML = chatButtonClose;
chatCloseButton.addEventListener("click", () => {
chat.style.display = "none";
chatButton.style.display = "flex";
document.body.style.overflow = "auto";
overlay.style.display = "none";
chatButtonIcon.innerHTML = chatButtonLogo;
chatButtonIcon.appendChild(chatButtonText);
});
chat.appendChild(chatCloseButton);
window.addEventListener("resize", adjustForSmallScreens);
const borderRadius = window.innerWidth < 500 ? '0px' : '5px';
async function getData() {
try {
const response = await fetch(`https://wisello-backend.azurewebsites.net/completion/shops/${botID}`);
if (!response.ok) {
throw new Error("Failed to fetch data from the API.");
}
const data = await response.json();
description = data.bubble_message || description;
chatButtonText.textContent = description; // Set the description here
chatButtonText.style.display = "inline-block";
console.log(data);
} catch (error) {
console.error("Error fetching data from the API:", error);
}
}
async function init() {
await getData();
chat.innerHTML = ``;
const getColor = async () => {
chatButton.style.right = "20px";
chatButton.style.left = "unset";
chat.style.position = "fixed";
chat.style.top = "45%";
chat.style.left = "50%";
chat.style.transform = "translate(-50%, -50%)";
chat.style.width = "60vw";
chat.style.height = "70vh";
chat.style.boxShadow =
"rgba(150, 150, 150, 0.15) 0px 6px 24px 0px, rgba(150, 150, 150, 0.15) 0px 0px 0px 1px";
chat.style.display = "none";
chat.style.zIndex = 999999999;
chat.style.borderRadius = "5px";
document.body.appendChild(chatButton);
document.body.appendChild(overlay);
document.body.appendChild(chat);
chat.appendChild(chatCloseButton);
};
getColor();
adjustForSmallScreens();
}
if (document.readyState === "complete") {
init();
adjustForSmallScreens();
getData();
} else {
window.addEventListener("load", init);
adjustForSmallScreens();
}