(function () {
const config = {"enabled":true,"general":{"phoneNumber":"254721646152","prefilledMessage":{"enabled":false,"text":"Hey there, I have a question!","variables":false}},"appearance":{"type":"logoTextButton","agentImage":null,"buttonText":"Chat with us","size":"medium","placement":{"position":"bottomRight","spacing":{"left":16,"right":16,"bottom":16}},"visibility":{"showOnMobile":true,"showOnDesktop":true},"colors":{"icon":"#ffffff","text":"#ffffff","background":"#59ce72"},"zindex":9999},"enhancements":{"notificationBadge":{"enabled":false,"count":1},"greetingMessage":{"enabled":false,"text":"Hi, how can I help you?"}},"developers":{"customCSS":false},"tracking":{"googleAnalytics":{"enabled":false},"metaPixel":{"enabled":false}}};
if (window.eazeappsWhatsAppChatButtonLoaded) return;
window.eazeappsWhatsAppChatButtonLoaded = true;
class GTYWhatsAppChatButton extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'});
this.config = config;
if (this.config.enabled == false) {
return false;
}
this.style.display = 'block';
let wrapper = this.getWrapper(this.config.appearance.zindex ? this.config.appearance.zindex : 9999);
let wrapperEl = wrapper.content.querySelector('.gty-wacb-wrapper');
let whatsAppLink = this.getWhatsAppLink(this.config.general.phoneNumber, (this.config.general.prefilledMessage.enabled ? this.config.general.prefilledMessage.text : false), this.config.general.prefilledMessage.variables);
let button = this.getButton(this.config.appearance.type, whatsAppLink, this.config.appearance.colors, this.config.appearance.agentImage, this.config.appearance.buttonText);
let greetingMessage = this.getGreetingMessage(this.config.enhancements.greetingMessage.enabled, this.config.enhancements.greetingMessage.text, whatsAppLink);
let notificationBadge = this.getNotificationBadge(this.config.enhancements.notificationBadge.enabled, this.config.enhancements.notificationBadge.count, whatsAppLink);
wrapperEl.appendChild(greetingMessage.content.cloneNode(true));
wrapperEl.appendChild(notificationBadge.content.cloneNode(true));
wrapperEl.appendChild(button.content.cloneNode(true));
this.shadowRoot.appendChild(wrapper.content.cloneNode(true));
this.shadowRoot.appendChild(this.getPlacementStyle(this.config.appearance.placement.position, this.config.appearance.placement.spacing));
this.shadowRoot.appendChild(this.getSizeStyle(this.config.appearance.size, this.config.appearance.placement.position));
this.shadowRoot.appendChild(this.getVisibilityStyle(this.config.appearance.visibility.showOnMobile, this.config.appearance.visibility.showOnDesktop));
this.shadowRoot.appendChild(this.getCustomCSSStyle(this.config.developers.customCSS));
let trackableLinks = this.shadowRoot.querySelectorAll('a');
for (let i = 0; i < trackableLinks.length; i++) {
this.applyLinkTracking(this.config.tracking, trackableLinks[i]);
}
}
applyLinkTracking(tracking, link) {
if (tracking.googleAnalytics.enabled) {
link.addEventListener('click', function () {
if (typeof gtag === 'function') {
gtag('event', 'gty_whatsapp_button_click');
} else {
console.error('GTY WACB: Google Analytics Tracking unavailable, Google Analytics tag (gtag) not found.');
}
});
}
if (tracking.metaPixel.enabled) {
link.addEventListener('click', function () {
if (typeof fbq === 'function') {
fbq('trackCustom', 'gty_whatsapp_button_click');
} else {
console.error('GTY WACB: Meta Pixel Tracking unavailable, Meta Pixel tag (fbq) not found.');
}
});
}
}
applyVariables(message) {
const replacements = {
"current_url": function () {
return window.location.href;
}
}
for (let [placeholder, replacement] of Object.entries(replacements)) {
message = message.replace(new RegExp(`\\{\\{\\s*${placeholder.replace(/\s+/g, '\\s*')}\\s*\\}\\}`, 'g'), replacement);
}
return message
}
getWrapper(zIndex) {
const wrapper = document.createElement('template');
wrapper.innerHTML = `
`;
return wrapper;
}
getNotificationBadge(enabled, count, link) {
const notificationBadge = document.createElement('template');
if (!enabled || count <= 0) {
return notificationBadge;
}
notificationBadge.innerHTML = `
${count}`;
return notificationBadge;
}
getGreetingMessage(enabled, text, link) {
const greetingMessage = document.createElement('template');
if (!enabled || !text) {
return greetingMessage;
}
greetingMessage.innerHTML = `
${text}
`;
return greetingMessage;
}
getButton(type, link, colors, agentImage = false, buttonText = false) {
let button = document.createElement('template');
if (type == "logoTextButton" && !buttonText) {
return button;
}
switch (type) {
case "logoTextButton":
button.innerHTML = `
${buttonText}
`;
break;
case "logoCircleButton":
button.innerHTML = `
`;
break;
case "agentCircleButton":
button.innerHTML = `
`;
break;
}
return button;
}
getVisibilityStyle(showOnMobile, showOnDesktop) {
const style = document.createElement("style");
let styleContent = "";
if (showOnMobile == false) {
styleContent += `
@media (max-width: 767px) {
.gty-wacb-wrapper {
display: none;
}
}`
}
if (showOnDesktop == false) {
styleContent += `
@media (min-width: 768px) {
.gty-wacb-wrapper {
display: none;
}
}`
}
style.textContent = styleContent;
return style;
}
getPlacementStyle(position, spacing) {
const style = document.createElement("style");
let styleContent = `
.gty-wacb-wrapper {
bottom: ${spacing.bottom}px;`
switch (position) {
case "bottomLeft":
styleContent += `left: ${spacing.left}px;`
break;
case "bottomRight":
styleContent += `right: ${spacing.right}px;`
break;
}
styleContent += `}`
style.textContent = styleContent;
return style;
}
getSizeStyle(size, position) {
const style = document.createElement("style");
const sizes = {
"small": 0.75,
"medium": 1,
"large": 1.25
};
let styleContent = `
.gty-wacb-wrapper {
transform: scale(${sizes[size]});`;
switch (position) {
case "bottomLeft":
styleContent += `transform-origin: left bottom;`;
break;
case "bottomRight":
styleContent += `transform-origin: right bottom;`;
break;
}
styleContent += `}`;
style.textContent = styleContent;
return style;
}
getCustomCSSStyle(customCSS) {
const style = document.createElement("style");
if (!customCSS) {
return style;
}
style.textContent = customCSS;
return style;
}
getWhatsAppLink(phoneNumber, message, variables) {
if (!phoneNumber) {
throw ('phoneNumber missing')
}
let link = new URL("https://wa.me/");
link.pathname = phoneNumber;
if (message) {
if (variables) {
message = this.applyVariables(message);
}
link.searchParams.append("text", message);
}
return link;
}
}
window.customElements.define('gty-whatsapp-chat-button', GTYWhatsAppChatButton);
document.body.appendChild(new GTYWhatsAppChatButton);
}());