zz-shopify-components 0.34.1-beta.23 → 0.34.1-beta.25

package/blocks/zz-scrollTrigger-block.liquid

@@ -0,0 +1,247 @@
+
+<style>
+  .zz-scrollTrigger-block-{{ block.id }} {
+    width: 100%;
+    height: 100vh;
+    background-color: {{ block.settings.background_color }};
+    padding: 0;
+    margin: 0;
+    position: relative;
+    {% if block.settings.scroll_direction == 'horizontal' %}
+    display: flex;
+    overflow-x: hidden;
+    {% else %}
+    overflow: hidden;
+    {% endif %}
+  }
+    .zz-scrollTrigger-block-{{ block.id }} .zz-scrollTrigger-item .responsive-width-image,
+      .zz-scrollTrigger-block-{{ block.id }} .zz-scrollTrigger-item .zz-video {
+      aspect-ratio: 16 / 9 !important;
+      max-width: 45vw !important;
+      {% comment %} border-radius: 12px; {% endcomment %}
+    }
+
+  .zz-scrollTrigger-block-{{ block.id }} .zz-scrollTrigger-item .content-video-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    {% comment %} border-radius: 12px; {% endcomment %}
+  }
+
+
+  {% if block.settings.scroll_direction == 'horizontal' %}
+  .zz-scrollTrigger-block-{{ block.id }} .zz-scrollTrigger-item {
+    width: 100vw;
+    height: 100vh;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    will-change: transform;
+  }
+  {% else %}
+  .zz-scrollTrigger-block-{{ block.id }} .zz-scrollTrigger-item {
+    width: 100%;
+    height: 100vh;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    will-change: transform, opacity;
+  }
+  {% endif %}
+  
+
+  @media (max-width: 768px) {
+    .zz-scrollTrigger-block-{{ block.id }} .zz-scrollTrigger-item {
+      height: 100vh;
+      width: 100%;
+      {% if block.settings.scroll_direction == 'horizontal' %}
+      width: 100vw;
+      padding: 0 10px;
+      {% else %}
+      padding: 0 10px;
+      {% endif %}
+    }
+  }
+</style>
+
+<div class="zz-scrollTrigger-block zz-scrollTrigger-block-{{ block.id }}" id="zz-scrollTrigger-block-{{ block.id }}">
+  {% for item in block.blocks %}
+    <div class="zz-scrollTrigger-item">
+      {% render item %}
+    </div>
+  {% endfor %}
+</div>
+
+<script>
+    document.addEventListener("DOMContentLoaded", () => {
+        if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') {
+            return;
+        }
+
+        gsap.registerPlugin(ScrollTrigger);
+        ScrollTrigger.config({
+          ignoreMobileResize: true,
+          autoRefreshEvents: "visibilitychange,DOMContentLoaded,load"
+        });
+
+        if (window.innerWidth < 1024) {
+            return;
+        }
+        
+        let items = gsap.utils.toArray('#zz-scrollTrigger-block-{{ block.id }} .zz-scrollTrigger-item');
+        let scrollTriggerInstances = [];
+        
+        if (items.length > 1) {
+            {% if block.settings.scroll_direction == 'horizontal' %}
+            const endValue = window.innerHeight * 1.3 * (items.length - 1);
+            
+            const horizontalST = gsap.to(items, {
+                xPercent: -100 * (items.length - 1),
+                ease: 'none',
+                scrollTrigger: {
+                    trigger: '#zz-scrollTrigger-block-{{ block.id }}',
+                    start: 'top top',
+                    end: `+=${endValue}`,
+                    pin: true,
+                    scrub: 1,
+                    markers: false,
+                    {% if block.settings.enable_snap %}
+                    snap: {
+                        snapTo: 1 / (items.length - 1),
+                        duration: 0.5,
+                        delay: 0.1, 
+                        directional: false,
+                        ease: "power2.inOut"
+                    },
+                    {% endif %}
+                }
+            });
+            scrollTriggerInstances.push(horizontalST.scrollTrigger);
+            {% else %}
+            gsap.set(items[0], { y: 0, opacity: 1 });
+            gsap.set(items.slice(1), { y: '10vh', opacity: 0 });
+            
+            const endValue = window.innerHeight * 1 * (items.length - 1); // 增加滚动距离让动画更平滑
+            
+            let tl = gsap.timeline({
+                scrollTrigger: {
+                    trigger: '#zz-scrollTrigger-block-{{ block.id }}',
+                    start: 'top top',
+                    end: `+=${endValue}`,
+                    pin: true,
+                    scrub: 1,
+                    markers: false,
+                    {% if block.settings.enable_snap %}
+                    snap: {
+                        snapTo: 1 / (items.length - 1),
+                        duration: 0.2,
+                        delay: 0.05, 
+                        directional: true,
+                        ease: "power2.out"
+                    },
+                    {% endif %}
+                    refreshPriority: -1,
+                }
+            });
+            scrollTriggerInstances.push(tl.scrollTrigger);
+            
+            items.forEach((item, index) => {
+                if (index < items.length - 1) {
+                    let currentItem = items[index];
+                    let nextItem = items[index + 1];
+                    
+                    tl.to(currentItem, {
+                        y: '-10vh',
+                        opacity: 0,
+                        duration: 0.1,
+                        ease: "power2.inOut"
+                    })
+                    .fromTo(nextItem, {
+                        y: '10vh',
+                        opacity: 0
+                    }, {
+                        y: 0,
+                        opacity: 1,
+                        duration: 0.1,
+                        ease: "power2.inOut"
+                    });
+                }
+            });
+            {% endif %}
+        }
+        
+        window.addEventListener('beforeunload', () => {
+            scrollTriggerInstances.forEach(st => {
+                if (st) st.kill();
+            });
+        });
+        
+        let resizeTimeout;
+        {% comment %} window.addEventListener('resize', () => {
+            clearTimeout(resizeTimeout);
+            resizeTimeout = setTimeout(() => {
+                ScrollTrigger.refresh();
+            }, 250);
+        }); {% endcomment %}
+    });
+</script>
+
+{% schema %}
+{
+  "name": "ZZ ScrollTrigger Block",
+  "settings": [
+    {
+      "type": "select",
+      "id": "scroll_direction",
+      "label": "滚动方向",
+      "options": [
+        {
+          "value": "vertical",
+          "label": "上下切换"
+        },
+        {
+          "value": "horizontal",
+          "label": "左右切换"
+        }
+      ],
+      "default": "vertical",
+      "info": "选择滚动的方向模式"
+    },
+    {
+      "type": "checkbox",
+      "id": "enable_snap",
+      "label": "启用吸附",
+      "default": false
+    },
+    {
+      "type": "color_background",
+      "id": "background_color",
+      "label": "背景颜色",
+      "default": "transparent"
+    }
+  ],
+  "blocks": [
+    {
+      "type": "@theme"
+    }
+  ],
+  "presets": [
+    {
+      "name": "ScrollTrigger滚动容器Block",
+      "blocks": [
+        {
+          "type": "zz-title",
+          "settings": {
+            "pc_title": "<p>滚动容器Block</p>"
+          }
+        }
+      ]
+    }
+  ]
+}
+{% endschema %}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-shopify-components",
-  "version": "0.34.1-beta.23",
+  "version": "0.34.1-beta.25",
   "description": "Reusable Shopify components for theme projects",
   "keywords": [
     "shopify",

package/sections/zz-live-chat.liquid

@@ -8,17 +8,59 @@
       "label": "按钮图片"
     },
     {
-        "type": "number",
-        "id": "mb_bottom",
-        "label": "移动端距离底部距离",
-        "default": 168,
+      "type": "number",
+      "id": "mb_bottom",
+      "label": "移动端距离底部距离",
+      "default": 168
     },
     {
-        "type": "number",
-        "id": "pc_bottom",
-        "label": "PC端距离底部距离",
-        "default": 88,
+      "type": "number",
+      "id": "pc_bottom",
+      "label": "PC端距离底部距离",
+      "default": 88
     },
+    {
+      "type": "text",
+      "id": "popup_title",
+      "label": "弹层标题",
+      "default": "Need help?"
+    },
+    {
+      "type": "textarea",
+      "id": "popup_description",
+      "label": "弹层描述",
+      "default": "Chat with our support team or reach us by email."
+    },
+    {
+      "type": "text",
+      "id": "popup_chat_title",
+      "label": "聊天模块标题",
+      "default": "Chat"
+    },
+    {
+      "type": "text",
+      "id": "popup_chat_hours",
+      "label": "聊天模块副标题",
+      "default": "Office Hours: 24/7"
+    },
+    {
+      "type": "text",
+      "id": "popup_email_title",
+      "label": "邮箱模块标题",
+      "default": "Reach us by email"
+    },
+    {
+      "type": "text",
+      "id": "popup_button_label",
+      "label": "聊天按钮文案",
+      "default": "Chat now"
+    },
+    {
+      "type": "text",
+      "id": "support_email_skpt",
+      "label": "联系邮箱",
+      "default": "support@hoverair.com"
+    }
   ],
   "presets": [
     {
@@ -29,133 +71,737 @@
 }
 {% endschema %}
 
-<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=259dcfbd-5663-408e-9b49-e1176a029af0" defer> </script>
+<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=259dcfbd-5663-408e-9b49-e1176a029af0" defer></script>
 <script>
-    document.addEventListener('DOMContentLoaded', function() {
-        const section = document.getElementById(
-            'shopify-section-{{section.id}}'
-          );
-        const floatingButton = section.querySelector('.floating-button');
-        let scrollTimeout;
-        let isScrolling = false;
-        let hasInsertedStyle = false;
-        // 监听点击事件
-        floatingButton.addEventListener('click', function() {
-            zE('messenger', 'open');
-            if (!hasInsertedStyle) {
-                findTargetIframe();
+  document.addEventListener('DOMContentLoaded', function() {
+    const section = document.getElementById('shopify-section-{{ section.id }}');
+    if (!section) {
+      return;
+    }
+
+    const wrapper = section.querySelector('[data-live-chat-wrapper]');
+    const floatingButton = section.querySelector('.floating-button');
+    const promptPanel = section.querySelector('[data-live-chat-panel]');
+    const closeButton = section.querySelector('[data-live-chat-close]');
+    const chatNowButton = section.querySelector('[data-live-chat-open]');
+    const emailLink = section.querySelector('[data-live-chat-email]');
+    const isDesktop = window.matchMedia('(min-width: 1024px)');
+
+    if (!wrapper || !floatingButton || !promptPanel) {
+      return;
+    }
+
+    let scrollTimeout;
+    let hasInsertedStyle = false;
+    let isLogin = false;
+    let promptTimer = null;
+    let autoTriggerTimer = null;
+    let promptVisible = false;
+    let promptSource = '';
+    let autoInteractionBound = false;
+    let hasHoveredTrigger = false;
+    let hasClickedTrigger = false;
+    let hasAutoPrompted = false;
+
+    const autoInteractionEvents = [];
+
+    function safeZE() {
+      return typeof window.zE === 'function';
+    }
+
+    function findTargetIframe() {
+      const iframes = document.querySelectorAll('iframe');
+      for (let iframe of iframes) {
+        const parentDiv = iframe.parentElement;
+        const grandParentDiv = parentDiv && parentDiv.parentElement;
+
+        if (
+          grandParentDiv &&
+          grandParentDiv.style.visibility === 'visible' &&
+          iframe.hasAttribute('tabindex') &&
+          iframe.contentDocument &&
+          iframe.contentDocument.head
+        ) {
+          const iframeStyle = document.createElement('style');
+          iframeStyle.textContent = `
+            .bLfrDm.bLfrDm.bLfrDm {
+              color: white !important;
+            }
+            .cJXunt.cJXunt.cJXunt {
+              color: white !important;
+            }
+            .sc-vrqbdz-3.epyGsD {
+              color: white !important;
+            }
+            .sc-vrqbdz-3.iaizzi {
+              color: white !important;
+            }
+            .sc-vrqbdz-11.jSJVmY.cqORhS {
+              color: white !important;
+            }
+            .bUvNuD.sc-k22q4b-0.ddHFjI {
+              color: white !important;
+            }
+            .sc-vrqbdz-3.ipfCpo {
+              color: white !important;
+            }
+            .sc-vrqbdz-7.fbohUV.cqORhS {
+              color: white !important;
+            }
+            .sc-vrqbdz-3.cSqVoo {
+              color: white !important;
+            }
+            .sc-vrqbdz-11.hMbICW.cqORhS {
+              color: white !important;
             }
+          `;
+          iframe.contentDocument.head.appendChild(iframeStyle);
+          hasInsertedStyle = true;
+          return iframe;
+        }
+      }
+
+      setTimeout(findTargetIframe, 1000);
+      return null;
+    }
+
+    function openMessenger() {
+      closePrompt();
+      if (!safeZE()) {
+        return;
+      }
+      window.zE('messenger', 'open');
+      if (!hasInsertedStyle) {
+        findTargetIframe();
+      }
+    }
+
+    function clearPromptTimer() {
+      if (promptTimer) {
+        clearTimeout(promptTimer);
+        promptTimer = null;
+      }
+    }
+
+    function clearAutoTriggerTimer() {
+      if (autoTriggerTimer) {
+        clearTimeout(autoTriggerTimer);
+        autoTriggerTimer = null;
+      }
+    }
+
+    function removeAutoInteractionListeners() {
+      if (!autoInteractionBound) {
+        return;
+      }
+
+      autoInteractionEvents.forEach(({ target, eventName, handler, options }) => {
+        target.removeEventListener(eventName, handler, options);
+      });
+      autoInteractionEvents.length = 0;
+      autoInteractionBound = false;
+    }
+
+    function addAutoInteractionListener(target, eventName, handler, options) {
+      target.addEventListener(eventName, handler, options);
+      autoInteractionEvents.push({ target, eventName, handler, options });
+    }
+
+    function closePrompt() {
+      if (!promptVisible) {
+        clearPromptTimer();
+        removeAutoInteractionListeners();
+        section.dataset.promptVisible = 'false';
+        section.dataset.promptSource = '';
+        return;
+      }
+
+      promptVisible = false;
+      promptSource = '';
+      clearPromptTimer();
+      removeAutoInteractionListeners();
+      promptPanel.classList.remove('is-visible', 'is-auto', 'is-manual');
+      floatingButton.setAttribute('aria-expanded', 'false');
+      section.dataset.promptVisible = 'false';
+      section.dataset.promptSource = '';
+    }
+
+    function bindAutoInteractionClose() {
+      if (autoInteractionBound) {
+        return;
+      }
+
+      const handleScrollClose = function() {
+        closePrompt();
+      };
+
+      const handleOutsideClose = function(event) {
+        if (!wrapper.contains(event.target)) {
+          closePrompt();
+        }
+      };
+
+      addAutoInteractionListener(window, 'scroll', handleScrollClose, { passive: true });
+      addAutoInteractionListener(window, 'wheel', handleScrollClose, { passive: true });
+      addAutoInteractionListener(window, 'touchmove', handleScrollClose, { passive: true });
+      addAutoInteractionListener(document, 'click', handleOutsideClose, true);
+      addAutoInteractionListener(document, 'touchstart', handleOutsideClose, { capture: true, passive: true });
+      autoInteractionBound = true;
+    }
+
+    function showPrompt(source) {
+      clearPromptTimer();
+      removeAutoInteractionListeners();
+
+      promptVisible = true;
+      promptSource = source;
+      promptPanel.classList.add('is-visible');
+      promptPanel.classList.toggle('is-auto', source === 'auto');
+      promptPanel.classList.toggle('is-manual', source === 'manual');
+      floatingButton.setAttribute('aria-expanded', 'true');
+      section.dataset.promptVisible = 'true';
+      section.dataset.promptSource = source;
+
+      if (source === 'auto') {
+        bindAutoInteractionClose();
+      }
+
+      const timeout = source === 'auto' && !isDesktop.matches ? 10000 : 15000;
+      promptTimer = window.setTimeout(function() {
+        closePrompt();
+      }, timeout);
+    }
+
+    function scheduleAutoPrompt() {
+      if (hasAutoPrompted) {
+        return;
+      }
+
+      clearAutoTriggerTimer();
+      autoTriggerTimer = window.setTimeout(function() {
+        if (hasAutoPrompted || promptVisible || document.hidden) {
+          return;
+        }
+
+        if (isDesktop.matches) {
+          if (hasHoveredTrigger) {
+            return;
+          }
+        } else if (hasClickedTrigger) {
+          return;
+        }
+
+        hasAutoPrompted = true;
+        showPrompt('auto');
+      }, 10000);
+    }
+
+    function handleFloatingButtonClick(event) {
+      event.preventDefault();
+      hasClickedTrigger = true;
+
+      if (isDesktop.matches) {
+        showPrompt('manual');
+        return;
+      }
+
+      openMessenger();
+    }
+
+    function handleDesktopEnter() {
+      if (!isDesktop.matches) {
+        return;
+      }
+
+      hasHoveredTrigger = true;
+      showPrompt('manual');
+    }
+
+    function handleDesktopLeave() {
+      if (!isDesktop.matches) {
+        return;
+      }
+
+      if (promptSource === 'manual') {
+        closePrompt();
+      }
+    }
+
+    function handleScrollVisibility() {
+      floatingButton.classList.add('hidden');
+      closePrompt();
+      clearTimeout(scrollTimeout);
+      scrollTimeout = window.setTimeout(function() {
+        floatingButton.classList.remove('hidden');
+      }, 500);
+    }
+
+    function handleViewportChange() {
+      closePrompt();
+      scheduleAutoPrompt();
+    }
+
+    function checkLogin() {
+      if (isLogin) {
+        return;
+      }
+
+      if (window.__ZZ_ANALYTICS_CONTEXT__ && window.__ZZ_ANALYTICS_CONTEXT__.huid) {
+        const params = {
+          email_verified: true,
+          external_id: window.__ZZ_ANALYTICS_CONTEXT__.huid
+        };
+
+        if (window.__ZZ_ANALYTICS_CONTEXT__.email) {
+          params.email = window.__ZZ_ANALYTICS_CONTEXT__.email;
+        }
+
+        if (window.__ZZ_ANALYTICS_CONTEXT__.firstName || window.__ZZ_ANALYTICS_CONTEXT__.lastName) {
+          const nameParts = [];
+          if (window.__ZZ_ANALYTICS_CONTEXT__.firstName) {
+            nameParts.push(window.__ZZ_ANALYTICS_CONTEXT__.firstName);
+          }
+          if (window.__ZZ_ANALYTICS_CONTEXT__.lastName) {
+            nameParts.push(window.__ZZ_ANALYTICS_CONTEXT__.lastName);
+          }
+          params.name = nameParts.join(' ');
+        }
+
+        handleLogin(params);
+      }
+    }
+
+    function handleLogin(params) {
+      const { email_verified } = params;
+      isLogin = true;
+
+      if (!safeZE()) {
+        return;
+      }
+
+      window.zE('messenger', 'loginUser', function(callback) {
+        Promise.resolve(requestMessagingJwt(params))
+          .then(function(jwt) {
+            callback(jwt);
+          })
+          .catch(function() {
+            return;
+          });
+      }, function(error) {
+        if (error && email_verified) {
+          handleLogin(Object.assign({}, params, { email_verified: false }));
+        }
+      });
+    }
+
+    async function requestMessagingJwt(params) {
+      const response = await fetch('https://static.zerozeroplatform.com/zendesk-jwt', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(params || {})
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch messaging jwt');
+      }
+
+      const data = await response.json();
+      if (!data || !data.jwt) {
+        throw new Error('Messaging jwt request failed');
+      }
+
+      return data.jwt;
+    }
+
+    function bindMessengerEvents() {
+      if (!safeZE()) {
+        return;
+      }
+
+      try {
+        window.zE('messenger:on', 'open', function() {
+          section.classList.add('is-messenger-open');
         });
-        
-        // 监听滚动事件
-        window.addEventListener('scroll', function() {
-            isScrolling = true;
-            floatingButton.classList.add('hidden');
-            
-            // 清除之前的定时器
-            clearTimeout(scrollTimeout);
-            
-            // 设置500毫秒后显示按钮
-            scrollTimeout = setTimeout(function() {
-                isScrolling = false;
-                floatingButton.classList.remove('hidden');
-            }, 500);
+        window.zE('messenger:on', 'close', function() {
+          section.classList.remove('is-messenger-open');
         });
+      } catch (error) {
+        return;
+      }
+    }
 
-        // 综合查找方法
-        function findTargetIframe() {
-        
-            const iframes = document.querySelectorAll('iframe');
-            for (let iframe of iframes) {
-                const parentDiv = iframe.parentElement;
-                const grandParentDiv = parentDiv?.parentElement;
-                
-                // 检查结构是否符合要求
-                if (grandParentDiv && 
-                    grandParentDiv.style.visibility === 'visible' &&
-                    iframe.hasAttribute('tabindex')) {
-                    
-                    // 向iframe中加入css样式
-                    const iframeStyle = document.createElement('style');
-                    iframeStyle.textContent = `
-                        .bLfrDm.bLfrDm.bLfrDm {
-                            color: white !important;
-                        }
-                        .cJXunt.cJXunt.cJXunt {
-                            color: white !important;
-                        }
-                        .sc-vrqbdz-3.epyGsD {
-                            color: white !important;
-                        }
-                        .sc-vrqbdz-3.iaizzi {
-                            color: white !important;
-                        }
-                        .sc-vrqbdz-11.jSJVmY.cqORhS {
-                            color: white !important;
-                        }
-
-                        .bUvNuD.sc-k22q4b-0.ddHFjI {
-                            color: white !important;
-                        }
-                        .sc-vrqbdz-3.ipfCpo {
-                            color: white !important;
-                        }
-                        .sc-vrqbdz-7.fbohUV.cqORhS {
-                            color: white !important;
-                        }
-                        .sc-vrqbdz-3.cSqVoo {
-                            color: white !important;
-                        }
-                        .sc-vrqbdz-11.hMbICW.cqORhS {
-                            color: white !important;
-                        }
-
-                    `;
-                    iframe.contentDocument.head.appendChild(iframeStyle);
-                    return iframe;
-                }
-            }
-            
-            setTimeout(findTargetIframe, 1000);
-            return null;
-        }
+    floatingButton.addEventListener('click', handleFloatingButtonClick);
+    wrapper.addEventListener('mouseenter', handleDesktopEnter);
+    wrapper.addEventListener('mouseleave', handleDesktopLeave);
+    window.addEventListener('scroll', handleScrollVisibility, { passive: true });
+
+    if (typeof isDesktop.addEventListener === 'function') {
+      isDesktop.addEventListener('change', handleViewportChange);
+    }
+
+    closeButton.addEventListener('click', function(event) {
+        event.preventDefault();
+        console.log('closeButton click');
+        closePrompt();
     });
-</script>
 
+    if (chatNowButton) {
+      chatNowButton.addEventListener('click', function(event) {
+        event.preventDefault();
+        openMessenger();
+      });
+    }
 
+    if (emailLink) {
+      emailLink.addEventListener('click', function() {
+        closePrompt();
+      });
+    }
+
+    if (typeof subscribe === 'function') {
+      subscribe('zz:user-session-updated', checkLogin);
+    }
+
+    bindMessengerEvents();
+    checkLogin();
+    scheduleAutoPrompt();
+  });
+</script>
 
 {% if section.settings.button_image %}
-    <button class="floating-button tw-fixed tw-z-[9999] tw-right-[16px] max-lg:tw-w-[48px] max-lg:tw-h-[48px] lg:tw-w-[64px] lg:tw-h-[64px]">
-        {{
-            section.settings.button_image
-            | image_url: width: 128
-            | image_tag:
-              alt: "chat",
-              class: "tw-w-full tw-h-full tw-object-cover"
-          }}
+  <div class="live-chat-entry" data-live-chat-wrapper>
+    <div
+      class="live-chat-prompt is-visible"
+      data-live-chat-panel
+      role="dialog"
+      aria-modal="false"
+      aria-label="{{ section.settings.popup_title | escape }}"
+    >
+      <button type="button" class="live-chat-prompt__close--mobile lg:tw-hidden" data-live-chat-close aria-label="{{ 'accessibility.close' | t }}">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M6.34668 6.34326L17.6604 17.657" stroke="#2D2D2D" stroke-width="1.5" stroke-linecap="round"/>
+        <path d="M6.34668 17.6567L17.6604 6.34303" stroke="#2D2D2D" stroke-width="1.5" stroke-linecap="round"/>
+        </svg>
+
+      </button>
+      <div class="live-chat-prompt__content">
+        <p class="live-chat-prompt__title">{{ section.settings.popup_title | escape }}</p>
+        <div class="live-chat-prompt__body">
+          <div class="live-chat-prompt__card live-chat-prompt__card--chat">
+            <div class="live-chat-prompt__card-main">
+              <span class="live-chat-prompt__icon live-chat-prompt__icon--chat" aria-hidden="true">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M5.05554 13.5821V10.0328C5.05554 6.19751 8.16468 3.08838 12 3.08838C15.8353 3.08838 18.9444 6.19751 18.9444 10.0328V14.6987C18.9444 17.9861 16.2795 20.6511 12.9921 20.6511" stroke="black" stroke-width="1.2"/>
+                    <path d="M7.99414 10.7126C8.49417 10.7126 8.90039 11.1189 8.90039 11.6189V13.6257C8.90031 14.1257 8.49411 14.531 7.99414 14.531H6.00586C5.50588 14.531 5.09969 14.1257 5.09961 13.6257V10.7126H7.99414Z" stroke="black" stroke-width="1.2"/>
+                    <path d="M16.0059 10.7126C15.5058 10.7126 15.0996 11.1189 15.0996 11.6189V13.6257C15.0997 14.1257 15.5059 14.531 16.0059 14.531H17.9941C18.4941 14.531 18.9003 14.1257 18.9004 13.6257V10.7126H16.0059Z" stroke="black" stroke-width="1.2"/>
+                    <path d="M12.7793 19.3147H12.2783C12.0012 19.3147 11.7764 19.5395 11.7764 19.8167C11.7766 20.0936 12.0013 20.3176 12.2783 20.3176H13.2812V19.8167C13.2812 19.5395 13.0564 19.3147 12.7793 19.3147Z" fill="black" stroke="black" stroke-width="2.00717"/>
+                </svg>
+
+              </span>
+              <div class="live-chat-prompt__copy">
+                <p class="live-chat-prompt__label">{{ section.settings.popup_chat_title | escape }}</p>
+                <p class="live-chat-prompt__meta tw-mt-[8px] tw-mb-[8px] lg:tw-mb-[12px]">{{ section.settings.popup_chat_hours | escape }}</p>
+                <button type="button" class="live-chat-prompt__cta" data-live-chat-open>
+                {{ section.settings.popup_button_label | escape }}
+                </button>
+              </div>
+            </div>
+            
+          </div>
+          <div class="live-chat-prompt__divider" aria-hidden="true"> </div>
+          <a href="mailto:{{ section.settings.support_email_skpt | escape }}" class="live-chat-prompt__card live-chat-prompt__card--email" data-live-chat-email>
+            <div class="live-chat-prompt__card-main">
+              <span class="live-chat-prompt__icon live-chat-prompt__icon--email" aria-hidden="true">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" focusable="false">
+                  <rect x="4.2" y="6" width="15.6" height="12" rx="1.5" stroke="currentColor" stroke-width="1.5"></rect>
+                  <path d="M5.5 7.5L12 12.3L18.5 7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                </svg>
+              </span>
+              <div class="live-chat-prompt__copy">
+                <p class="live-chat-prompt__label">{{ section.settings.popup_email_title | escape }}</p>
+                <p class="live-chat-prompt__email-text">{{ section.settings.support_email_skpt | escape }}</p>
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <button
+      class="floating-button tw-fixed tw-z-[9999] tw-right-[16px] max-lg:tw-w-[48px] max-lg:tw-h-[48px] lg:tw-w-[64px] lg:tw-h-[64px]"
+      aria-haspopup="dialog"
+      aria-expanded="false"
+      type="button"
+    >
+      {{
+        section.settings.button_image
+        | image_url: width: 128
+        | image_tag:
+          alt: section.settings.popup_button_label,
+          class: "tw-w-full tw-h-full tw-object-cover"
+      }}
     </button>
+  </div>
 {% endif %}
 
-
 <style>
-    .sc-16za5ry-1 {
-        color: white !important;
+  .sc-16za5ry-1 {
+    color: white !important;
+  }
+
+  .iATHzY {
+    color: white !important;
+  }
+
+  #shopify-section-{{ section.id }} .live-chat-entry {
+    position: fixed;
+    right: 16px;
+    bottom: {{ section.settings.mb_bottom }}px;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    pointer-events: none;
+  }
+
+  #shopify-section-{{ section.id }} .live-chat-entry > * {
+    pointer-events: auto;
+  }
+
+  #shopify-section-{{ section.id }} .floating-button {
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    opacity: 1;
+    bottom: auto;
+    right: auto;
+    position: relative;
+    border: 0;
+    background: transparent;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  #shopify-section-{{ section.id }} .floating-button.hidden {
+    opacity: 0;
+  }
+
+  #shopify-section-{{ section.id }} .floating-button img {
+    display: block;
+  }
+
+  #shopify-section-{{ section.id }} .live-chat-prompt {
+    width: 318px;
+    border-radius: 16px;
+    background: #ffffff;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+    color: #2d2d2d;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(12px);
+    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
+    margin-bottom: 12px;
+    position: relative;
+    overflow: visible;
+  }
+
+  #shopify-section-{{ section.id }} .live-chat-prompt.is-visible {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  }
+
+  #shopify-section-{{ section.id }} .live-chat-prompt__content {
+    padding: 20px 24px;
+  }
+
+  #shopify-section-{{ section.id }} .live-chat-prompt__title {
+    margin: 0;
+    font-family: Poppins, sans-serif;
+    font-size: 20px;
+    line-height: 1.5;
+    font-weight: 500;
+    letter-spacing: 0;
+  }
+
+  #shopify-section-{{ section.id }} .live-chat-prompt__body {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    margin-top: 18px;
+  }
+
+  #shopify-section-{{ section.id }} .live-chat-prompt__card {
+    color: #2d2d2d;
+    text-decoration: none;
+  }
+
+  #shopify-section-{{ section.id }} .live-chat-prompt__card-main {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    min-width: 0;
+    flex: 1 1 auto;
+  }
+
+  #shopify-section-{{ section.id }} .live-chat-prompt__icon {
+    width: 24px;
+    height: 24px;
+    flex: 0 0 24px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: #2d2d2d;
+  }
+
+  #shopify-section-{{ section.id }} .live-chat-prompt__copy {
+    min-width: 0;
+  }
+
+  #shopify-section-{{ section.id }} .live-chat-prompt__label,
+  #shopify-section-{{ section.id }} .live-chat-prompt__meta,
+  #shopify-section-{{ section.id }} .live-chat-prompt__email-text {
+    letter-spacing: 0;
+  }
+
+  #shopify-section-{{ section.id }} .live-chat-prompt__label {
+    font-family: Poppins, sans-serif;
+    font-size: 16px;
+    line-height: 1.5;
+    font-weight: 500;
+    color: #2d2d2d;
+  }
+
+  #shopify-section-{{ section.id }} .live-chat-prompt__meta {
+    font-family: Poppins, sans-serif;
+    font-size: 14px;
+    line-height: 1.5;
+    font-weight: 400;
+    color: #2d2d2d;
+  }
+
+  #shopify-section-{{ section.id }} .live-chat-prompt__email-text {
+    font-family: Poppins, sans-serif;
+    font-size: 14px;
+    line-height: 1.5;
+    font-weight: 400;
+    color: #378ddd;
+    word-break: break-word;
+  }
+
+  #shopify-section-{{ section.id }} .live-chat-prompt__cta {
+    border: 0;
+    border-radius: 4px;
+    background: #fc6c0f;
+    color: #ffffff;
+    font-family: Poppins, sans-serif;
+    font-size: 14px;
+    line-height: 1;
+    font-weight: 600;
+    letter-spacing: 0;
+    padding: 10px 20px;
+    min-height: 36px;
+    cursor: pointer;
+    white-space: nowrap;
+    flex: 0 0 auto;
+  }
+
+  #shopify-section-{{ section.id }} .live-chat-prompt__divider {
+    width: 100%;
+    height: 1px;
+    background: rgba(45, 45, 45, 0.1);
+  }
+
+  
+
+  #shopify-section-{{ section.id }}.is-messenger-open .live-chat-entry {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  @media (min-width: 1024px) {
+    #shopify-section-{{ section.id }} .live-chat-entry {
+      bottom: {{ section.settings.pc_bottom }}px;
+    }
+
+    #shopify-section-{{ section.id }} .live-chat-prompt {
+      margin-bottom: 16px;
+    }
+
+  }
+
+  @media (max-width: 1023px) {
+    #shopify-section-{{ section.id }} .live-chat-entry {
+      right: 16px;
+      align-items: flex-end;
     }
-    .iATHzY {
-        color: white !important;
+
+    #shopify-section-{{ section.id }} .live-chat-prompt {
+    
+      width: 252px;
+      border-radius: 10px;
+      align-self: stretch;
+      margin-bottom: 12px;
+      border-radius: 10px;
+      transform: translateY(16px);
     }
-    #shopify-section-{{ section.id }} .floating-button {
-        transition: opacity 0.3s ease;
-        opacity: 1;
-        bottom: {{ section.settings.mb_bottom }}px;
+    #shopify-section-{{ section.id }} .live-chat-prompt__label {
+        font-size: 14px;
     }
-    #shopify-section-{{ section.id }} .floating-button.hidden {
-        opacity: 0;
+    #shopify-section-{{ section.id }} .live-chat-prompt__meta {
+        font-size: 12px;
     }
-    @media (min-width: 1024px) {
-        #shopify-section-{{ section.id }} .floating-button {
-            bottom: {{ section.settings.pc_bottom }}px;
-        }
+
+    #shopify-section-{{ section.id }} .live-chat-prompt.is-visible {
+      transform: translateY(0);
     }
-    
+
+    #shopify-section-{{ section.id }} .live-chat-prompt__content {
+      padding:20px 24px;
+    }
+
+    #shopify-section-{{ section.id }} .live-chat-prompt__title {
+      font-size: 16px;
+      color: #2D2D2D;
+      line-height: 1.5;
+    }
+
+    #shopify-section-{{ section.id }} .live-chat-prompt__body {
+      margin-top: 16px;
+      gap: 20px;
+    }
+
+    #shopify-section-{{ section.id }} .live-chat-prompt__card {
+      align-items: flex-start;
+    }
+
+    #shopify-section-{{ section.id }} .live-chat-prompt__card--chat {
+      flex-direction: column;
+      align-items: stretch;
+      gap: 16px;
+    }
+
+    #shopify-section-{{ section.id }} .live-chat-prompt__card-main {
+      width: 100%;
+    }
+
+    #shopify-section-{{ section.id }} .live-chat-prompt__close--mobile {
+        position: absolute;
+        top: -16px;
+        border: 1px solid rgba(45, 45, 45, 0.08);
+        box-shadow: 0px 4px 4px 0px #0000001A;
+        border-radius: 9999px;
+        background: #f6f6f6;
+        color: #2d2d2d;
+        padding: 0;
+        width: 32px;
+        height: 32px;
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        left: -16px;
+    }
+  }
 </style>