Tristan Yang
64 lines
1.8 KiB
JavaScript
64 lines
1.8 KiB
JavaScript
// IIFC
|
|
((w, d) => {
|
|
const {
|
|
hostId = 1,
|
|
closeWidth = 48,
|
|
closeHeight = 48,
|
|
openWidth = 380,
|
|
openHeight = 680,
|
|
themeColor = "#1fe1f9",
|
|
position = "right",
|
|
welcome = ""
|
|
} = d.currentScript.dataset;
|
|
const _src = d.currentScript.src;
|
|
const wrapper = d.createElement("iframe");
|
|
wrapper.id = "VOCECHAT_WIDGET";
|
|
const styles = {
|
|
position: "fixed",
|
|
borderRadius: "8px",
|
|
right: "16px",
|
|
[position]: "16px", // [position] = [right] or [left]
|
|
bottom: "16px",
|
|
border: "none",
|
|
zIndex: 9999,
|
|
boxShadow: `rgb(0 0 0 / 25%) 0px 25px 50px -12px`
|
|
};
|
|
Object.assign(wrapper.style, styles);
|
|
wrapper.src = `${new URL(_src).origin}/widget.html?host=${hostId}&themeColor=${encodeURIComponent(
|
|
themeColor
|
|
)}&from=${encodeURIComponent(location.hostname)}&welcome=${encodeURIComponent(welcome)}`;
|
|
wrapper.width = closeWidth;
|
|
wrapper.height = closeHeight;
|
|
wrapper.frameborder = 0;
|
|
w.addEventListener(
|
|
"message",
|
|
(event) => {
|
|
const { data: CMD } = event;
|
|
switch (CMD) {
|
|
case "OPEN":
|
|
wrapper.setAttribute("width", openWidth);
|
|
wrapper.setAttribute("height", openHeight);
|
|
break;
|
|
case "CLOSE":
|
|
wrapper.setAttribute("width", closeWidth);
|
|
wrapper.setAttribute("height", closeHeight);
|
|
break;
|
|
case "RELOAD_WITH_OPEN":
|
|
{
|
|
const url = new URL(wrapper.src);
|
|
url.searchParams.append("open", new Date().getTime());
|
|
console.log("new src", url.href);
|
|
wrapper.src = url.href;
|
|
wrapper.setAttribute("width", openWidth);
|
|
wrapper.setAttribute("height", openHeight);
|
|
}
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
},
|
|
false
|
|
);
|
|
d.body.appendChild(wrapper);
|
|
})(window, document);
|