${chatTrigger?.popup_message ? linkifyMessage(chatTrigger.popup_message) : ''}
`
// Not running as Shopify theme app extension
if (widgetToken) {
baseUrl = scriptTag.src.replace(`/widget/zipchat.js?id=${widgetToken}`, '/widget');
// Case when shopify is loading the script tag, we need to remove the &shop parameter
const shopParamIndex = baseUrl.indexOf('&shop=');
if (shopParamIndex !== -1) {
baseUrl = baseUrl.substring(0, shopParamIndex);
}
chatbotUrl = new URL(baseUrl);
} else {
chatbotUrl = new URL(`${data.api_base}/widget`);
}
chatbotUrl.searchParams.append('current_url', currentUrl);
// Append the token to the chatbot URL
function generateRandomString(length) {
var result = '';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (var i = 0; i < length; i++) {
result += characters.charAt(Math.floor(Math.random() * characters.length));
}
return result;
}
var visitor_token = localStorage.getItem('visitor_token');
if (!visitor_token) {
visitor_token = generateRandomString(20);
localStorage.setItem('visitor_token', visitor_token);
}
chatbotUrl.searchParams.append('visitor_token', visitor_token);
chatbotUrl.searchParams.append('widget_token', data.widget_token);
// Create the chat bubble container
var chatBubbleContainer = document.createElement('div');
chatBubbleContainer.setAttribute('id', 'widget-chat-container');
// chatBubbleContainer.style.opacity = "0"
// Create the chat bubble button
var chatBubbleButton = document.createElement('div');
chatBubbleButton.setAttribute('id', 'widget-chat-button');
chatBubbleButton.style.position = 'fixed';
chatBubbleButton.style.width = `${50 + chatBubbleSizeDifference}px`;
chatBubbleButton.style.height = `${50 + chatBubbleSizeDifference}px`;
chatBubbleButton.style.borderRadius = '50%';
chatBubbleButton.style.backgroundColor = widgetData.color;
chatBubbleButton.style.boxShadow = 'rgba(0, 0, 0, 0.2) 0px 4px 8px 0px';
chatBubbleButton.style.cursor = 'pointer';
chatBubbleButton.style.zIndex = widgetZIndex;
chatBubbleButton.style.transition = 'all 0.2s ease-in-out 0s';
let horizontalPosition = widgetCorner.includes("right") ? "right" : "left";
let verticalPosition = widgetCorner.includes("bottom") ? "bottom" : "top";
chatBubbleButton.style[horizontalPosition] = `${widgetHorizontal}px`;
chatBubbleButton.style[verticalPosition] = `${widgetVertical}px`;
var chatBubbleIcon = document.createElement('div');
chatBubbleIcon.style.display = 'flex';
chatBubbleIcon.style.alignItems = 'center';
chatBubbleIcon.style.justifyContent = 'center';
chatBubbleIcon.style.width = '100%';
chatBubbleIcon.style.height = '100%';
chatBubbleIcon.style.zIndex = widgetZIndex;
// dynamically change the svgs size based on the widget size
const svgSizeMap = {
'small': 0,
'medium': 6,
'large': 12
};
const svgSizeDifference = svgSizeMap[widgetSize] || 0;
const baseSize = 24;
const newSize = baseSize + svgSizeDifference;
const newImageSize = 52 + chatBubbleSizeDifference;
// chat svg icon
var svg = createChatIcon(widgetData.bubble_icon_type || "modern", newSize, widgetData.bubble_icon_url, newImageSize);
// close svg icon
var crossSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
crossSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
crossSvg.setAttribute("fill", "none");
crossSvg.setAttribute("viewBox", "0 0 24 24");
crossSvg.setAttribute("stroke-width", "1.5");
crossSvg.setAttribute("stroke", "#ffffff");
crossSvg.setAttribute("width", `${newSize}px`);
crossSvg.setAttribute("height", `${newSize}px`);
crossSvg.setAttribute('style', `width:${newSize}px;height:${newSize}px;fill:none;`);
var crossPath1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
crossPath1.setAttribute("stroke-linecap", "round");
crossPath1.setAttribute("stroke-linejoin", "round");
crossPath1.setAttribute("d", "M6 18L18 6M6 6l12 12");
crossSvg.appendChild(crossPath1);
// Append the SVG to the chat bubble icon
chatBubbleIcon.appendChild(svg);
// Appen the cross svg that we will hide and show
crossSvg.style.display = "none";
chatBubbleIcon.appendChild(crossSvg)
// Append the chat bubble icon to the chat bubble button
chatBubbleButton.appendChild(chatBubbleIcon);
// Append the chat bubble button to the user's website
document.body.appendChild(chatBubbleContainer);
chatBubbleContainer.appendChild(chatBubbleButton);
document.querySelector("#widget-chat-button").addEventListener("mousedown", function (event) {
event.stopPropagation();
document.getElementById("widget-chat-button").style.transform = "scale(0.7)";
});
document.querySelector("#widget-chat-button").addEventListener("mouseup", function (event) {
event.stopPropagation();
document.getElementById("widget-chat-button").style.transform = "scale(1)";
});
if (!localStorage.getItem('chatPreviewMessageHidden') && !!chatTrigger?.popup_message) {
chatBubbleContainer.appendChild(chatPreviewMessage);
chatBubbleContainer.querySelector('#chat-preview-message').addEventListener("click", function (event) {
if (event.target.nodeName === 'A') {
return;
}
event.stopPropagation();
var chatPreviewMessage = document.querySelector('#chat-preview-message');
chatPreviewMessage.style.transform = "scale(0)";
chatPreviewMessage.style.display = 'none'
document.querySelector("#widget-chat-button").click();
});
function showChatPreviewMessage() {
chatPreviewMessage.style.transform = "scale(1)";
chatPreviewMessage.style.opacity = "1";
chatPreviewMessage.style.display = "";
}
function hideChatPreviewMessage() {
chatPreviewMessage.style.transform = "scale(0)";
chatPreviewMessage.style.display = 'none'
chatPreviewMessage.remove()
}
function showPreviewMessageByTime(delay, callback){
setTimeout(() => {
callback();
}, delay);
}
function showPreviewMessageByScrollPercentage(thresholdPercentage, callback){
window.addEventListener('scroll', function() {
const scrollTop = window.scrollY || document.documentElement.scrollTop;
const windowHeight = window.innerHeight || document.documentElement.clientHeight;
const documentHeight = document.documentElement.scrollHeight;
const scrollPercentage = (scrollTop + windowHeight) / documentHeight * 100;
if (scrollPercentage >= thresholdPercentage) {
callback();
window.removeEventListener('scroll', arguments.callee);
}
});
}
chatBubbleContainer.querySelector('#close-preview-message').addEventListener("click", function (event) {
event.stopPropagation();
hideChatPreviewMessage();
// Set the localStorage flag to prevent showing the chat preview message again
localStorage.setItem('chatPreviewMessageHidden', 'true');
});
if (!!chatTrigger && chatTrigger.setup_type == 'advanced'){
if (chatTrigger.all_rules_met && (!!chatTrigger.show_after_scroll_percentage && !!chatTrigger.show_after_seconds)){
showPreviewMessageByScrollPercentage(chatTrigger.show_after_scroll_percentage,
() => showPreviewMessageByTime(chatTrigger.show_after_seconds * 1000, showChatPreviewMessage))
}
else {
if (!!chatTrigger.show_after_scroll_percentage){
showPreviewMessageByScrollPercentage(chatTrigger.show_after_scroll_percentage, showChatPreviewMessage)
}
if (!!chatTrigger.show_after_seconds){
showPreviewMessageByTime(chatTrigger.show_after_seconds * 1000, showChatPreviewMessage)
}
}
}
else {
showPreviewMessageByTime(2000, showChatPreviewMessage)
}
}
// Opening closing the chatbot when cliking on the widget button
document.querySelector("#widget-chat-button").addEventListener("click", function (event) {
event.stopPropagation();
createChatbotIframe(
chatbotUrl.toString(),
widgetHorizontal,
widgetVertical,
widgetCorner,
widgetZIndex,
chatBubbleSizeDifference,
chatBubbleContainer,
chatTrigger,
chatBubbleIcon,
svg,
crossSvg
);
});
// On mobile, I added a 'x' to close the chatbot, because it's in the iframe, I need to do a post message
window.addEventListener('message', function(event) {
if (event.origin !== event.data.origin) {
return;
}
var iframe = document.getElementById("zipchat-iframe");
if (event.data.action === 'close-iframe') {
iframe.style.transform = "scale(0)";
iframe.style.opacity = "0";
iframe.style.pointerEvents = 'none';
svg.style.display = "block";
crossSvg.style.display = "none";
toggleBodyScroll(true)
document.body.style.position = "";
document.body.style.inset = "";
document.body.style.margin = "";
}
if (event.data.action === 'remove-iframe') {
iframe.remove()
document.getElementById("widget-chat-button").remove()
}
});
// If the clicked element is neither the chat button nor the iframe itself, close the iframe.
window.addEventListener("click", function(event) {
var iframe = document.getElementById("zipchat-iframe");
var chatButton = document.getElementById("widget-chat-button");
if (event.target !== chatButton && event.target !== iframe && iframe) {
iframe.style.transform = "scale(0)";
iframe.style.opacity = "0";
iframe.style.pointerEvents = 'none';
svg.style.display = "block";
crossSvg.style.display = "none";
toggleBodyScroll(true)
}
});
window.zipchatWidgetLoaded = true;
})
.catch(error => {
console.error('Error fetching data:', error);
});
}
if (document.readyState === 'loading') {
// If the document is still loading, wait for DOMContentLoaded
document.addEventListener('DOMContentLoaded', function() {
loadWidget();
setupUrlChangeDetection();
});
} else {
// If the document has already finished loading, we can run the function now
loadWidget();
setupUrlChangeDetection();
}
})();