{"id":5111,"date":"2025-01-07T14:51:06","date_gmt":"2025-01-07T09:21:06","guid":{"rendered":"https:\/\/holithemes.com\/plugins\/click-to-chat\/?p=5111"},"modified":"2025-11-19T12:18:27","modified_gmt":"2025-11-19T06:48:27","slug":"demo-greeting-dialog-viewport","status":"publish","type":"post","link":"https:\/\/holithemes.com\/plugins\/click-to-chat\/demo-greeting-dialog-viewport\/","title":{"rendered":"DEMO: Greeting dialog Viewport"},"content":{"rendered":"\n<div class=\"viewport-wrapper\">\n    <section class=\"hero-section\" aria-label=\"Hero section with interactive viewport trigger\">\n        <!-- Animated Background -->\n        <div class=\"hero-background\" aria-hidden=\"true\"><\/div>\n        <div class=\"hero-overlay\" aria-hidden=\"true\"><\/div>\n        \n        <!-- Floating Particles -->\n        <div class=\"particles-container\" aria-hidden=\"true\">\n            <div class=\"particle\"><\/div>\n            <div class=\"particle\"><\/div>\n            <div class=\"particle\"><\/div>\n            <div class=\"particle\"><\/div>\n            <div class=\"particle\"><\/div>\n            <div class=\"particle\"><\/div>\n            <div class=\"particle\"><\/div>\n            <div class=\"particle\"><\/div>\n            <div class=\"particle\"><\/div>\n            <div class=\"particle\"><\/div>\n            <div class=\"particle\"><\/div>\n            <div class=\"particle\"><\/div>\n            <div class=\"particle\"><\/div>\n            <div class=\"particle\"><\/div>\n            <div class=\"particle\"><\/div>\n            <div class=\"particle\"><\/div>\n            <div class=\"particle\"><\/div>\n            <div class=\"particle\"><\/div>\n            <div class=\"particle\"><\/div>\n            <div class=\"particle\"><\/div>\n        <\/div>\n\n        <!-- Hero Content -->\n        <div class=\"hero-content\">\n            <h1 class=\"hero-title\">\n                Interactive \n                <span class=\"hero-title-gradient\">Experience<\/span>\n            <\/h1>\n            <p class=\"hero-feature-label\">Feature: Viewport<\/p>\n\n            <p class=\"hero-description\">\n                The Greeting Dialog will be triggered when the button below reaches 25% of the screen.\n            <\/p>\n            <p class=\"scroll-indicator\" aria-live=\"polite\">Scroll down to see the magic \u2193<\/p>\n        <\/div>\n\n        <!-- WhatsApp Button -->\n        <div class=\"whatsapp-button-container\" id=\"whatsappButton\">\n            <button class=\"whatsapp-button\" aria-label=\"WhatsApp trigger point button\">\n                <span class=\"button-background\" aria-hidden=\"true\"><\/span>\n                <span class=\"button-overlay\" aria-hidden=\"true\"><\/span>\n                <span class=\"button-content\">\n                    <span class=\"button-text ctc_greetings_now\">Trigger Point<\/span>\n                <\/span>\n                <span class=\"button-hover-effect\" aria-hidden=\"true\"><\/span>\n            <\/button>\n            <div class=\"viewport-status\" id=\"viewportStatus\" aria-live=\"polite\">\u2190 Below 25% of the viewport<\/div>\n            \n            <!-- Trigger Indicator -->\n            <div class=\"trigger-indicator\" id=\"triggerIndicator\" role=\"status\" aria-live=\"assertive\">\n                <p class=\"trigger-message\">Greeting Dialog Opened! \ud83c\udf89<\/p>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Additional Content Section -->\n    <section class=\"content-section section-one\" aria-labelledby=\"viewport-title\">\n        <div class=\"container\">\n            <div class=\"content-wrapper\">\n                <h2 id=\"viewport-title\" class=\"section-title\">Viewport Activated Widget<\/h2>\n\n                <!-- Pro Feature Label -->\n                <p class=\"pro-feature-badge\">\u2728 Available in Pro Version<\/p>\n\n                <p class=\"section-description\">\n                    As users scroll through the page, the trigger (with the class name .ctc_greetings_now) gradually moves upward and becomes active when it reaches <strong>25% of the visible screen<\/strong>. This behavior is dynamically handled using scroll event listeners that track the element&#8217;s position relative to the viewport.\n                <\/p>\n\n                <div class=\"features-grid\">\n                    <article class=\"feature-card\">\n                        <h3 class=\"feature-title\">\ud83d\udda5\ufe0f For focus and target interaction<\/h3>\n                        <p class=\"feature-description\">\n                            Triggers the widget at 25% scroll to capture attention at the right moment.\n                            Perfect for driving focused engagement and boosting conversions.\n                        <\/p>\n                    <\/article>\n                    <article class=\"feature-card\">\n                        <h3 class=\"feature-title\">\ud83e\udde9 Custom Trigger Behavior<\/h3>\n                        <p class=\"feature-description\">\n                            The .ctc_greetings_now class lets us control exactly when and where the widget triggers\u2014flexible for any layout or design.\n                        <\/p>\n                    <\/article>\n                <\/div>\n\n                <!-- CTA Button -->\n                <div class=\"cta-container\">\n                    <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/pricing\" class=\"cta-button\" rel=\"noopener\">Upgrade to Pro<\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n<\/div>\n\n\n\n<style>\n.navigation.post-navigation {\n    display: none !important;\n}\n<\/style>\n\n\n\n<script>\n  \/\/ Scroll to top when the page is refreshed or loaded\n  window.onbeforeunload = function () {\n    window.scrollTo(0, 0);\n  };\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Interactive Experience Feature: Viewport The Greeting Dialog will be triggered when the button below reaches 25% of the screen. Scroll down to see the magic \u2193 Trigger Point \u2190 Below 25% of the viewport Greeting Dialog Opened! \ud83c\udf89 Viewport Activated Widget \u2728 Available in Pro Version As users scroll through the page, the trigger (with [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"disabled","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"disabled","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":"","_htd2_assets":{"css":["viewport_20250908_094041.css","viewport.min__20251119_064754.css"],"js":["viewport.min__20251119_064754.js"],"callbacks":["dequeue_astra"],"js_attr":{"viewport.min__20251119_064754.js":{"attr":"","footer":"1"}}}},"categories":[45,65],"tags":[],"class_list":["post-5111","post","type-post","status-publish","format-standard","hentry","category-greetings","category-page-by-ht-design"],"_links":{"self":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts\/5111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/comments?post=5111"}],"version-history":[{"count":0,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts\/5111\/revisions"}],"wp:attachment":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/media?parent=5111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/categories?post=5111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/tags?post=5111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}