var CARTHIKE_ENV = "prod"; var currentScript = document.currentScript; var chConfig = null; var CARTHIKE_SERVER_URL = "http://localhost:3333"; if (CARTHIKE_ENV === "dev") { CARTHIKE_SERVER_URL = "https://localhost"; } else if (CARTHIKE_ENV === "staging") { CARTHIKE_SERVER_URL = "https://staging.carthike.com"; } else if (CARTHIKE_ENV === "prod") { CARTHIKE_SERVER_URL = "https://whatsapp.carthike.com"; } function getParameterByName(name, url) { if (!url) url = window.location.href; name = name.replace(/[\[\]]/g, "\\$&"); var regex = new RegExp("[?&]" + name + "(=([^]*)|&|#|$)"), results = regex.exec(url); if (!results) return null; if (!results[2]) return ""; return decodeURIComponent(results[2].replace(/\+/g, " ")); } function carthike_injectCss(css) { /** @type {Element} */ var style = document.createElement("style"); /** @type {string} */ style.type = "text/css"; /** @type {string} */ style.rel = "stylesheet"; style.media = "all"; try { /** @type {string} */ style.styleSheet.cssText = css; } catch (t) {} try { /** @type {string} */ style.innerHTML = css; } catch (t) {} document.getElementsByTagName("head")[0].appendChild(style); } function carthike_getCss() { return ".carthike-mobile-messenger-active {overflow: hidden;height: 100%;width: 100%;position: fixed;}"; } carthike_injectCss(carthike_getCss()); var oc_isMobile = null; var OC_DOM = new (function () { var IS_READY = false; var CALLBACKS = []; var SELF = this; SELF.ready = function (callback) { //check to see if we're already finished if (IS_READY === true && typeof callback === "function") { callback(); return; } //else, add this callback to the queue CALLBACKS.push(callback); }; var addEvent = function (event, obj, func) { if (window.addEventListener) { obj.addEventListener(event, func, false); } else if (document.attachEvent) { obj.attachEvent("on" + event, func); } }; var doScrollCheck = function () { //check to see if the callbacks have been fired already if (IS_READY === true) { return; } //now try the scrolling check try { document.documentElement.doScroll("left"); } catch (error) { setTimeout(doScrollCheck, 1); return; } //there were no errors with the scroll check and the callbacks have not yet fired, so fire them now fireCallbacks(); }; var fireCallbacks = function () { //check to make sure these fallbacks have not been fired already if (IS_READY === true) { return; } //loop through the callbacks and fire each one var callback = false; for (var i = 0, len = CALLBACKS.length; i < len; i++) { callback = CALLBACKS[i]; if (typeof callback === "function") { callback(); } } //now set a flag to indicate that callbacks have already been fired IS_READY = true; }; var listenForDocumentReady = function () { //check the document readystate if (document.readyState === "complete") { return fireCallbacks(); } //begin binding events based on the current browser if (document.addEventListener) { addEvent("DOMContentLoaded", document, fireCallbacks); addEvent("load", window, fireCallbacks); } else if (document.attachEvent) { addEvent("load", window, fireCallbacks); addEvent("readystatechange", document, fireCallbacks); //check for the scroll stuff if (document.documentElement.doScroll && window.frameset === null) { doScrollCheck(); } } }; //since we have the function declared, start listening listenForDocumentReady(); })(); function ocAppendScript(src) { var n = document.createElement("script"); return (n.type = "text/javascript"), (n.charset = "utf-8"), (n.src = src), n; } function getCarthikeConfig(shop) { let url = `${CARTHIKE_SERVER_URL}/api/chat/public/config?shop=${shop}`; if ( window.Shopify && typeof window.Shopify.AdminBarInjector !== "undefined" ) { url = `${url}&admin=true`; } let params = new URL(document.location.toString()).searchParams; let carthike_version = params.get("carthike_version"); if (carthike_version) { url = `${url}&carthike_version=${carthike_version}`; } return fetch(url).then((response) => { return response.json(); }); } function processCarthikeConfig(config) { const element = document.getElementById("carthike-chat-wrapper"); if (element) { console.log("script already installed ignoring current script"); return; } if (config && config.isEnabled) { renderChatButton(config); // renderWidget(config); } if (config && config.shareButton.isEnabled) { renderShareButton(config); } } function getCarthikeChatButtonCss(config) { return ` :root { --carthike-button-background-color: ${config.colors.buttonBackgroundColor}; --carthike-button-text-color: ${config.colors.buttonTextColor}; --carthike-button-icon-color: ${config.colors.buttonIconColor} }; --carthike-share-button-background-color: ${config.shareButton.colors.buttonBackgroundColor} }; --carthike-share-button-text-color: ${config.shareButton.colors.buttonTextColor} }; --carthike-share-button-icon-color: ${config.shareButton.colors.buttonIconColor} }; #carthike-chat-wrapper{ max-width: 128px; } #carthike-chat-button-container.right{ position: fixed; bottom: ${config.dimensions.bottomPosition}px; right: ${config.dimensions.rightPosition}px; z-index: 999; } #carthike-chat-button-container.left{ position: fixed; bottom: ${config.dimensions.bottomPosition}px; left: ${config.dimensions.leftPosition}px; z-index: 999; } #carthike-chat-button-container .whatsappbutton{ border-radius: 6px; background-color: var(--carthike-button-background-color); color: var(--carthike-button-text-color); cursor: pointer; font-size: ${config.dimensions.buttonTextFontSize}px; font-weight: 600; display: inline-flex; align-items: center; padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; border:0 } #carthike-chat-button-container .whatsappbutton svg { fill: var(--carthike-button-icon-color); stroke:none; } #carthike-chat-button-container .whatsappbutton svg{ width:${config.dimensions.iconSize}px; margin-left:-0.25rem; margin-right:0.5rem; height:${config.dimensions.iconSize}px; } #carthike-chat-button-container .whatsappbutton.buttonWithIcon { border-radius: 50%; padding: 12px 12px; } #carthike-chat-button-container .whatsappbutton.buttonWithIcon svg { margin: 0; } #carthike-container .carthike-messenger-frame { z-index: 2147483000!important; position: fixed!important; bottom: 20px; right: 20px; height: calc(100% - 20px - 20px); width: 370px; max-height: 590px!important; -webkit-box-shadow: 0 5px 40px rgba(0,0,0,.16)!important; box-shadow: 0 5px 40px rgba(0,0,0,.16)!important; border-radius: 8px!important; overflow: hidden!important; opacity: 1!important; } #carthike-chat-button-container .whatsappbutton, #carthike-welcome-message-container .welcome-message-button{ display:${config.desktop.isEnabled ? "inline-flex" : "none !important"}; } @media screen and (max-width: 767px){ #carthike-chat-button-container .whatsappbutton{ display:${ config.mobile.isEnabled ? "inline-flex !important" : "none !important" }; } #carthike-chat-button-container.right{ position: fixed; bottom: ${config.mobile.dimensions.bottomPosition}px; right: ${config.mobile.dimensions.rightPosition}px; z-index: 1000000; } #carthike-chat-button-container.left{ position: fixed; bottom: ${config.mobile.dimensions.bottomPosition}px; left: ${config.mobile.dimensions.leftPosition}px; z-index: 1000000; } #carthike-chat-button-container .whatsappbutton svg{ width:${config.mobile.dimensions.iconSize}px; margin-left:-0.25rem; margin-right:0.5rem; height:${config.mobile.dimensions.iconSize}px; } #carthike-chat-button-container .whatsappbutton{ font-size: ${config.mobile.dimensions.buttonTextFontSize}px; } } `; } function getCarthikeShareButtonCss(config) { return ` :root { --carthike-share-button-background-color: ${config.shareButton.colors.buttonBackgroundColor}; --carthike-share-button-text-color: ${config.shareButton.colors.buttonTextColor}; --carthike-share-button-icon-color: ${config.shareButton.colors.buttonIconColor} }; #carthike-share-wrapper{ max-width: 128px; } #carthike-share-button-container{ max-width: 128px; } #carthike-share-button-container.right{ position: fixed; bottom: 50%; right: 0; z-index: 1000000; } #carthike-share-button-container.left{ position: fixed; bottom: 50%; left: 0px; z-index: 1000000; } #carthike-share-button-container .whatsappsharebutton{ background-color: var(--carthike-share-button-background-color); color: var(--carthike-share-button-text-color); display:flex; cursor: pointer; flex-direction:column-reverse; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; border:0 } #carthike-share-button-container.right .whatsappsharebutton { border-radius: unset !important; border-top-left-radius: 6px !important; border-bottom-left-radius: 6px !important; } #carthike-share-button-container.left .whatsappsharebutton { border-radius: unset !important; border-top-right-radius: 6px !important; border-bottom-right-radius: 6px !important; } #carthike-share-button-container .whatsappsharebutton span{ writing-mode: tb; transform: rotate(-180deg); text-transform: capitalize; } #carthike-share-button-container .whatsappsharebutton svg { fill: var(--carthike-share-button-icon-color); } #carthike-share-button-container .whatsappsharebutton svg{ width:16px; margin-left:-0.25rem; margin-top:0.5rem; height:16px; } #carthike-share-button-container .whatsappsharebutton.buttonWithIcon { border-radius: 50%; padding: 12px 12px; } #carthike-share-button-container .whatsappsharebutton.buttonWithIcon svg { margin: 0; } `; } function getWelcomeMessageCss(config) { return ` #carthike-welcome-message-container{ display: flex; opacity:0; -webkit-transition: all 800ms ease-in-out; } #carthike-welcome-message-container .welcome-message-button{ box-shadow:0px 0px 5px 0px #d3d3d3; padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; display:flex; border-radius: 0.375rem; font-size: 16px; background-color: rgb(255, 255, 255); position:relative; color: #374151; cursor:pointer; } #carthike-welcome-message-container .welcome-close-button-wrapper{ top: -8px; right: -5px; position: absolute; width: 16px; height: 16px; cursor: pointer; border-radius: 9999px; border: 1px solid #9fa6b2; background-color: #ffffff; } #carthike-welcome-message-container .welcome-close-button-wrapper svg{ stroke: currentColor; color: #9fa6b2; position:absolute; width: 16px; left: -1px; height: 16px; } #carthike-welcome-message-container.right{ position: fixed; bottom:40px; right: 16px; z-index: 1000000; } #carthike-welcome-message-container.left{ position: fixed; bottom: 64px; left: 16px; z-index: 1000000; } #carthike-welcome-message-container.animate-card{ opacity:1; bottom: calc(${config.dimensions.bottomPosition}px + 48px); } @media screen and (max-width: 767px){ #carthike-welcome-message-container.animate-card{ opacity:1; bottom: calc(${config.mobile.dimensions.bottomPosition}px + 48px); } } `; } function getChatWidgetCSS(config) { return ` :root { --carthike-widget-header-background-color: ${config.colors.widgetHeaderColor}; --carthike-widget-header-text-color: ${config.colors.widgetHeaderTextColor}; } #carthike-chat-widget{ box-shadow: 0 0 30px rgb(0 0 0 / 30%); background: #fff; overflow: hidden; width: 350px; font-family: inherit; font-size: 14px; line-height: 1.4; bottom: 0px; display: block; z-index:99999999; border-radius:8px; -webkit-transition: all 100ms ease-in-out; opacity:0; } #carthike-chat-widget.right{ right: 20px; position:fixed; } #carthike-chat-widget.left{ left: 20px; position:fixed; } #carthike-chat-widget .chat-widget-header{ color: var(--carthike-widget-header-text-color); padding: 24px; background-color: var(--carthike-widget-header-background-color); } #carthike-chat-widget .chat-widget-close-btn{ position:absolute; right:12px; cursor:pointer; } #carthike-chat-widget .chat-widget-title{ font-family: inherit; font-style: normal; font-weight: 300; font-size: 28px; line-height: 100%; text-align: left; } #carthike-chat-widget .chat-widget-description{ margin-top: 12px; font-family: inherit; font-style: normal; font-weight: 300; font-size: 16px; text-align: left; } #carthike-chat-widget .chat-cont{ padding: 0; background: #ffffff; height: 400px; overflow-y: auto; } #carthike-chat-widget .chat-list-cont{ font-size: 13px; padding: 8px 8px; overflow: hidden; border-bottom: 1px solid #F0F0F0; background-color: lightgrey; display: flex; background: #FFF; cursor: pointer; } #carthike-chat-widget .chat-user-avatar{ display: inline-block; vertical-align: middle; margin-right: 5px; overflow: hidden; right: 10px; border-radius: 60px; } #carthike-chat-widget .chat-user-meta{ display: inline-block; vertical-align: middle; line-height: 1; color: #000; font-size: 14px; margin-top: 2px; text-align: left; flex: 1; padding-left: 6px; } #carthike-chat-widget .chat-user-name{ display: block; font-size: 18px; font-weight: 300; margin-block-start: 0.3em; margin-block-end: 0.4em; text-transform:capitalize; } #carthike-chat-widget .chat-user-desc{ display: block; font-weight: normal; margin: 0; padding: 0; line-height: 1; color: #555555cc; text-transform:capitalize; } @media screen and (max-width: 767px){ #carthike-chat-widget{ right: 0px !important; width: 100%; height: 100%; bottom: 0px !important; } } #carthike-chat-widget.animate-widget{ opacity:1; bottom: 20px; } `; } function getWhatsappButtonSVG() { return ` `; } function renderChatButton(config) { carthike_injectCss(getCarthikeChatButtonCss(config)); console.log(config); if (canShowContactUsButton(config)) { const div = document.createElement("div"); div.id = "carthike-chat-wrapper"; var label = ""; var ariaLabel = ""; if (config.design === "buttonWithTextIcon") { label = ` ${config.texts.contactUsLabel} `; ariaLabel = config.texts.contactUsLabel; } else { ariaLabel = "Contact us"; } var html = `
`; div.innerHTML = html; const body = document.querySelector("body"); body.appendChild(div); CHcreateMessageListener(); if (config.welcomeMessage.isEnabled) { setTimeout(() => { renderWelcomeMessageCard(config); }, config.welcomeMessage.delay * 1000); } } } function renderShareButton(config) { carthike_injectCss(getCarthikeShareButtonCss(config)); const body = document.querySelector("body"); const div = document.createElement("div"); let shareButtonLabel = ""; if (config.shareButton.design === "buttonWithTextIcon") { shareButtonLabel = ` ${config.shareButton.label} `; } div.id = "carthike-share-wrapper"; const shareButtonHtml = ` `; div.innerHTML = shareButtonHtml; body.appendChild(div); CHcreateShareListener(); } function CHIsToday(dateObj) {} function renderWelcomeMessageCard(config) { let lastShownWelcomeMessageItem = localStorage.getItem( "last_shown_welcome_message" ); if (lastShownWelcomeMessageItem) { if (config.welcomeMessage.frequency != 0) { const diff = Date.now() - Number(lastShownWelcomeMessageItem); const daysInMillis = config.welcomeMessage.frequency * 86400000; if (diff < daysInMillis) { // for one day in millis return; } } } carthike_injectCss(getWelcomeMessageCss(config)); const div = document.createElement("div"); div.id = "carthike-welcome-message-wrapper"; var html = ` `; div.innerHTML = html; const body = document.querySelector("body"); body.appendChild(div); CHcreateCloseWelcomeMessageListener(); CHcreateWelcomeMessageClickListener(); setTimeout(() => { const cont = document.querySelector("#carthike-welcome-message-container"); cont.classList.add("animate-card"); }, 1000); localStorage.setItem("last_shown_welcome_message", Date.now()); } function getCloseIcon() { return ``; } function renderWidget(config) { if (document.querySelector("#carthike-widget-wrapper")) { return; } carthike_injectCss(getChatWidgetCSS(config)); const div = document.createElement("div"); div.id = "carthike-widget-wrapper"; const agents = config.additionalAgents; const html = `