{"id":2779,"date":"2022-03-22T10:23:00","date_gmt":"2022-03-22T04:53:00","guid":{"rendered":"http:\/\/holithemes.com\/plugins\/click-to-chat\/?p=2779"},"modified":"2025-12-24T15:48:38","modified_gmt":"2025-12-24T10:18:38","slug":"greetings-1","status":"publish","type":"post","link":"https:\/\/holithemes.com\/plugins\/click-to-chat\/greetings-1\/","title":{"rendered":"Greetings-1 Customizable Design"},"content":{"rendered":"\n\n<div class=\"g1-wrapper\">    \n\n    <!-- Animated background particles -->\n    <div class=\"background-particles\">\n        <div class=\"particle particle-1\"><\/div>\n        <div class=\"particle particle-2\"><\/div>\n        <div class=\"particle particle-3\"><\/div>\n    <\/div>\n\n    <!-- Banner Section -->\n    <section class=\"banner-section\" id=\"banner\">\n        <div class=\"container\">\n            <div class=\"banner-grid\">\n\n                <!-- Left Content -->\n                <div class=\"banner-content\">\n                    <div class=\"content-wrapper\">\n                        <h1 class=\"main-title\">\n                            <span class=\"title-line-1\">Customize Your<\/span><br>\n                            <span class=\"title-line-2\">Perfect Greeting<\/span>\n                        <\/h1>\n                        \n                        <p class=\"description\">\n                            Create fully customizable greeting dialogs with complete control over design, \n                            placement, and behavior. Make every interaction feel personal and on-brand.\n                        <\/p>\n\n                        <div class=\"cta-buttons\">\n                            <button class=\"btn-primary ctc_greetings\">View Demo<\/button>\n                            <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/docs\/greetings-1\/\" class=\"btn-secondary\">\n                                View Docs\n                            <\/a>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Right Content -->\n                <div class=\"banner-dialog\" id=\"banner-dialog\">\n                    <div class=\"dialog-container\">\n                        <div class=\"dialog-glow\"><\/div>\n                        <div class=\"dialog-wrapper\">\n                            <img decoding=\"async\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/09\/Customizable-Design.webp\" \n                                 alt=\"Customizable greeting dialog design with header, content and call-to-action sections\" \n                                 class=\"dialog-image-header\"\n                                 width=\"400\"\n                                 height=\"500\"\n                                 fetchpriority=\"high\">\n                        <\/div>\n                        <div class=\"floating-particle particle-top\"><\/div>\n                        <div class=\"floating-particle particle-bottom\"><\/div>\n                    <\/div>\n                <\/div>\n\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Dialog Breakdown Section -->\n    <section class=\"breakdown-section\" id=\"breakdown\">\n        <div class=\"container\">\n            <div class=\"section-header\">\n                <h2 class=\"section-title\">Every Greeting Element, Perfectly Crafted<\/h2>\n                <p class=\"section-description\">\n                    Break your greeting dialog into flexible, customizable components &#8211; each designed for complete\n                    visual and functional control.\n                <\/p>\n            <\/div>\n\n            <div class=\"breakdown-items\">\n\n                <!-- Header Content -->\n                <div class=\"breakdown-item\" data-index=\"0\">\n                    <div class=\"breakdown-content\">\n                        <div class=\"part-badge\">Section 1<\/div>\n                        <h3 class=\"part-title\">Header Content (Title &#038; Intro)<\/h3>\n                        <p class=\"part-description\">\n                            Customize the greeting header with your brand colors, logo, and introductory message\n                            to create a strong first impression and build trust instantly.\n                        <\/p>\n                        <div class=\"features-grid\">\n                            <div class=\"feature-item\">\n                                <div class=\"feature-dot\"><\/div>\n                                <span>Custom colors &#038; gradients<\/span>\n                            <\/div>\n                            <div class=\"feature-item\">\n                                <div class=\"feature-dot\"><\/div>\n                                <span>Logo integration<\/span>\n                            <\/div>\n                            <div class=\"feature-item\">\n                                <div class=\"feature-dot\"><\/div>\n                                <span>Personalized messaging<\/span>\n                            <\/div>\n                            <div class=\"feature-item\">\n                                <div class=\"feature-dot\"><\/div>\n                                <span>Avatar support<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"breakdown-image\">\n                        <div class=\"dialog-highlight-container\">\n                            <div class=\"dialog-glow\"><\/div>\n                            <div class=\"dialog-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/11\/G1-Header-Higlight.webp\" \n                                 alt=\"Header content section with custom colors, logo and personalized messaging\" \n                                 class=\"dialog-image\" \n                                 loading=\"lazy\"\n                                 width=\"240\"\n                                 height=\"300\">\n                                <div class=\"highlight-overlay\"><\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Main Content -->\n                <div class=\"breakdown-item reverse\" data-index=\"1\">\n                    <div class=\"breakdown-content\">\n                        <div class=\"part-badge\">Section 2<\/div>\n                        <h3 class=\"part-title\">Main Content (Core Message)<\/h3>\n                        <p class=\"part-description\">\n                            The core message area where you guide visitors using clear, engaging text,\n                            emojis, and interactive elements to enhance communication.\n                        <\/p>\n                        <div class=\"features-grid\">\n                            <div class=\"feature-item\">\n                                <div class=\"feature-dot\"><\/div>\n                                <span>Rich text formatting<\/span>\n                            <\/div>\n                            <div class=\"feature-item\">\n                                <div class=\"feature-dot\"><\/div>\n                                <span>Emoji Support<\/span>\n                            <\/div>\n                            <div class=\"feature-item\">\n                                <div class=\"feature-dot\"><\/div>\n                                <span>Interactive elements<\/span>\n                            <\/div>\n                            <div class=\"feature-item\">\n                                <div class=\"feature-dot\"><\/div>\n                                <span>Dynamic content<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"breakdown-image\">\n                        <div class=\"dialog-highlight-container\">\n                            <div class=\"dialog-glow\"><\/div>\n                            <div class=\"dialog-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/11\/G1-main-content-highlight.webp\" \n                                 alt=\"Main content area with rich text formatting and emoji support\" \n                                 class=\"dialog-image\" \n                                 loading=\"lazy\"\n                                 width=\"240\"\n                                 height=\"300\">\n                                <div class=\"highlight-overlay\"><\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- CTA Button -->\n                <div class=\"breakdown-item\" data-index=\"2\">\n                    <div class=\"breakdown-content\">\n                        <div class=\"part-badge\">Section 3<\/div>\n                        <h3 class=\"part-title\">Call-to-Action &#038; Bottom Content<\/h3>\n                        <p class=\"part-description\">\n                            Drive action with fully customizable call-to-action buttons. Control button styles,\n                            text, and behavior to maximize engagement and conversions.\n                        <\/p>\n                        <div class=\"features-grid\">\n                            <div class=\"feature-item\">\n                                <div class=\"feature-dot\"><\/div>\n                                <span>Custom button styles<\/span>\n                            <\/div>\n                            <div class=\"feature-item\">\n                                <div class=\"feature-dot\"><\/div>\n                                <span>Links Support<\/span>\n                            <\/div>\n                            <div class=\"feature-item\">\n                                <div class=\"feature-dot\"><\/div>\n                                <span>Hover effects<\/span>\n                            <\/div>\n                            <div class=\"feature-item\">\n                                <div class=\"feature-dot\"><\/div>\n                                <span>Conversion tracking<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"breakdown-image\">\n                        <div class=\"dialog-highlight-container\">\n                            <div class=\"dialog-glow\"><\/div>\n                            <div class=\"dialog-wrapper\">\n                                <img decoding=\"async\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/11\/G1-bottom-Content-Highlight.webp\" \n                                 alt=\"Call-to-action button and bottom content with custom styling\" \n                                 class=\"dialog-image\" \n                                 loading=\"lazy\"\n                                 width=\"240\"\n                                 height=\"300\">\n                                <div class=\"highlight-overlay\"><\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Smart Status Indicators -->\n    <section class=\"status-section\" id=\"status\">\n        <div class=\"container\">\n            <div class=\"section-header\">\n                <h2 class=\"section-title\">Smart Status Indicators<\/h2>\n                <p class=\"section-description\">\n                    Automatically show online or offline status to set clear expectations and build user trust.\n                <\/p>\n            <\/div>\n\n            <div class=\"status-examples\">\n\n                <!-- Online Status -->\n                <div class=\"status-example\">\n                    <div class=\"status-info\">\n                        <h3 class=\"status-title\">Online Status<\/h3>\n                        <p class=\"status-description\">\n                            Show when your team is available using real-time status indicators and personalized avatars.\n                        <\/p>\n                        <div class=\"status-features\">\n                            <div class=\"status-feature\">\n                                <div class=\"feature-dot online\"><\/div>\n                                <span>Custom online colors<\/span>\n                            <\/div>\n                            <div class=\"status-feature\">\n                                <div class=\"feature-dot online\"><\/div>\n                                <span>Avatar integration<\/span>\n                            <\/div>\n                            <div class=\"status-feature\">\n                                <div class=\"feature-dot online\"><\/div>\n                                <span>Real-time updates<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"status-dialog-container\">\n                        <div class=\"dialog-glow online-glow\"><\/div>\n                        <div class=\"status-dialog online-dialog\">\n                            <img decoding=\"async\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/11\/Online-and-header-image.webp\"\n                                 alt=\"Online status indicator with avatar\"\n                                 class=\"avatar-image\"\n                                 loading=\"lazy\"\n                                 width=\"320\"\n                                 height=\"200\">\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Offline Status -->\n                <div class=\"status-example reverse\">\n                    <div class=\"status-info\">\n                        <h3 class=\"status-title\">Offline Status<\/h3>\n                        <p class=\"status-description\">\n                            Display offline messages, alternate actions, or fallback contact options when your team is unavailable.\n                        <\/p>\n                        <div class=\"status-features\">\n                            <div class=\"status-feature\">\n                                <div class=\"feature-dot offline\"><\/div>\n                                <span>Custom offline colors<\/span>\n                            <\/div>\n                            <div class=\"status-feature\">\n                                <div class=\"feature-dot offline\"><\/div>\n                                <span>Hide Dialog when offline<\/span>\n                            <\/div>\n                            <div class=\"status-feature\">\n                                <div class=\"feature-dot offline\"><\/div>\n                                <span>Alternate WhatsApp number &#038; Call to Action when offline<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"status-dialog-container\">\n                        <div class=\"dialog-glow offline-glow\"><\/div>\n                        <div class=\"status-dialog offline-dialog\">\n                            <img decoding=\"async\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/11\/Greetings-offline-status-1.webp\" \n                                 alt=\"Offline status indicator with red color and automated response\" \n                                 class=\"avatar-image\" \n                                 loading=\"lazy\"\n                                 width=\"320\"\n                                 height=\"200\">\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Smart Trigger Actions -->\n    <section class=\"actions-section\" id=\"actions\">\n        <div class=\"container\">\n            <div class=\"section-header\">\n                <h2 class=\"section-title\">Smart Trigger Actions (Pro)<\/h2>\n                <p class=\"section-description\">\n                    Launch your greeting dialogs at the perfect moment with intelligent trigger systems. \n                    Choose from time-based, scroll, click, or viewport triggers for maximum engagement.\n                <\/p>\n                <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/pricing\" class=\"section-button section-button\">View Pricing<\/a>\n            <\/div>\n\n            <div class=\"actions-grid\">\n                <!-- Time-based Trigger -->\n                <div class=\"action-item\" data-trigger=\"time\">\n                    <div class=\"action-icon\">\n                        <div class=\"icon-container time-icon\">\n                            <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                                <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n                                <polyline points=\"12,6 12,12 16,14\"\/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                    <h3 class=\"action-title\">Time-Based Trigger<\/h3>\n                    <p class=\"action-description\">\n                        Automatically display the greeting dialog after a specified time delay. Perfect for giving users \n                        time to explore before offering assistance.\n                    <\/p>\n                    <div class=\"action-features\">\n                        <ul>\n                            <li>Customizable delay<\/li>\n                            <li>One-time or recurring display<\/li>\n                            <li>User session awareness<\/li>\n                        <\/ul>\n                    <\/div>\n                    <div class=\"action-demo\">\n                        <div class=\"demo-timeline\">\n                            <div class=\"timeline-point active\"><\/div>\n                            <div class=\"timeline-line\"><\/div>\n                            <div class=\"timeline-point\"><\/div>\n                            <div class=\"timeline-text\">5s delay<\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Scroll Trigger -->\n                <div class=\"action-item\" data-trigger=\"scroll\">\n                    <div class=\"action-icon\">\n                        <div class=\"icon-container scroll-icon\">\n                            <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                                <path d=\"M12 2v20\"\/>\n                                <path d=\"m19 15-7 7-7-7\"\/>\n                                <path d=\"m19 9-7 7-7-7\"\/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                    <h3 class=\"action-title\">Scroll Trigger<\/h3>\n                    <p class=\"action-description\">\n                        Trigger the greeting when users scroll a certain percentage of the page. \n                        Ideal for engaging users who show interest by scrolling.\n                    <\/p>\n                    <div class=\"action-features\">\n                        <ul>\n                            <li>Percentage-based activation<\/li>\n                            <li>Scroll direction awareness<\/li>\n                            <li>Mobile-optimized detection<\/li>\n                        <\/ul>\n                    <\/div>\n                    <div class=\"action-demo\">\n                        <div class=\"demo-scroll\">\n                            <div class=\"scroll-bar\">\n                                <div class=\"scroll-progress\"><\/div>\n                            <\/div>\n                            <div class=\"scroll-text\">50% scrolled<\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Click Trigger -->\n                <div class=\"action-item\" data-trigger=\"click\">\n                    <div class=\"action-icon\">\n                        <div class=\"icon-container click-icon\">\n                            <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                                <path d=\"M9 12l2 2 4-4\"\/>\n                                <path d=\"M21 12c-1 0-3-1-3-3s2-3 3-3 3 1 3 3-2 3-3 3\"\/>\n                                <path d=\"M3 12c1 0 3-1-3-3s-2-3-3-3-3 1-3 3 2 3 3 3\"\/>\n                                <path d=\"M3 12h6m6 0h6\"\/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                    <h3 class=\"action-title\">Click Trigger<\/h3>\n                    <p class=\"action-description\">\n                        Launch the greeting when users click specific elements like buttons, links, or images. \n                        Perfect for contextual help and targeted assistance.\n                    <\/p>\n                    <div class=\"action-features\">\n                        <ul>\n                            <li>Multiple element targeting<\/li>\n                            <li>CSS selector support<\/li>\n                            <li>Event delegation handling<\/li>\n                        <\/ul>\n                    <\/div>\n                    <div class=\"action-demo\">\n                        <div class=\"demo-click\">\n                            <div class=\"click-button\">\n                                <div class=\"click-ripple ctc_greetings\"><\/div>\n                                Click Me\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Viewport Trigger -->\n                <div class=\"action-item\" data-trigger=\"viewport\">\n                    <div class=\"action-icon\">\n                        <div class=\"icon-container viewport-icon\">\n                            <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                                <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/>\n                                <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/>\n                                <circle cx=\"12\" cy=\"12\" r=\"2\"\/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                    <h3 class=\"action-title\">Viewport Trigger<\/h3>\n                    <p class=\"action-description\">\n                        Display the greetings dialog when specific content enters the user&#8217;s viewport. \n                        Great for section-specific assistance and progressive disclosure.\n                    <\/p>\n                    <div class=\"action-features\">\n                        <ul>\n                            <li>Viewport visibility detection<\/li>\n                            <li>Threshold customization<\/li>\n                            <li>Multiple viewport zones<\/li>\n                        <\/ul>\n                    <\/div>\n                    <div class=\"action-demo\">\n                        <div class=\"demo-viewport\">\n                            <div class=\"viewport-frame\">\n                                <div class=\"viewport-content\"><\/div>\n                                <div class=\"viewport-trigger\"><\/div>\n                            <\/div>\n                            <div class=\"viewport-text\">In view<\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Customization Section -->\n    <section class=\"customization-section\" id=\"customization\">\n        <div class=\"container\">\n            <div class=\"section-header\">\n                <h2 class=\"section-title\">Endless Customization<\/h2>\n                <p class=\"section-description\">\n                    Make every greeting truly yours with flexible colors, sizes, and placement options.\n                <\/p>\n            <\/div>\n\n            <!-- Color Variations -->\n            <div class=\"customization-group\">\n                <h3 class=\"group-title\">\ud83c\udfa8 Color Variations<\/h3>\n                <div class=\"color-variations\">\n                    <div class=\"color-variant\" data-color=\"green\">\n                        <img decoding=\"async\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/11\/Greeting-1-green.webp\" \n                             alt=\"Green color variant of greeting dialog\" \n                             class=\"variant-image\" \n                             loading=\"lazy\"\n                             width=\"200\"\n                             height=\"250\">\n                    <\/div>  \n                    <div class=\"color-variant\" data-color=\"purple\">\n                        <img decoding=\"async\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/11\/Greetings-1-blue.webp\" \n                             alt=\"Blue color variant of greeting dialog\" \n                             class=\"variant-image\" \n                             loading=\"lazy\"\n                             width=\"200\"\n                             height=\"250\">\n                    <\/div>\n\n                    <div class=\"color-variant\" data-color=\"green\">\n                        <img decoding=\"async\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/11\/greeting-1-yellow.webp\" \n                             alt=\"Yellow color variant of greeting dialog\" \n                             class=\"variant-image\" \n                             loading=\"lazy\"\n                             width=\"200\"\n                             height=\"250\">\n                    <\/div>\n                <\/div>\n            <\/div>\n            <!-- Size Settings -->\n            <div class=\"customization-group\">\n                <h3 class=\"group-title\">\ud83d\udcd0 Size Settings<\/h3>\n                <div class=\"size-options\">\n                    <div class=\"size-option\">\n                        <div class=\"size-preview small-size\">\n                            <div class=\"size-content\">\n                                <div class=\"size-header\">\n                                    <div class=\"size-avatar\"><\/div>\n                                    <div class=\"size-title\">Greeting Dialog<\/div>\n                                <\/div>\n                                <div class=\"size-footer\">Small<\/div>\n                            <\/div>\n                        <\/div>\n                        <div class=\"size-info\">\n                            <p class=\"size-name\">Small<\/p>\n                            <p class=\"size-desc\">Compact welcome messages<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"size-option\">\n                        <div class=\"size-preview medium-size\">\n                            <div class=\"size-content\">\n                                <div class=\"size-header\">\n                                    <div class=\"size-avatar\"><\/div>\n                                    <div class=\"size-title\">Greeting Dialog<\/div>\n                                <\/div>\n                                <div class=\"size-footer\">Medium<\/div>\n                            <\/div>\n                        <\/div>\n                        <div class=\"size-info\">\n                            <p class=\"size-name\">Medium<\/p>\n                            <p class=\"size-desc\">Standard greeting dialogs<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"size-option\">\n                        <div class=\"size-preview large-size\">\n                            <div class=\"size-content\">\n                                <div class=\"size-header\">\n                                    <div class=\"size-avatar\"><\/div>\n                                    <div class=\"size-title\">Greeting Dialog<\/div>\n                                <\/div>\n                                <div class=\"size-footer\">Large<\/div>\n                            <\/div>\n                        <\/div>\n                        <div class=\"size-info\">\n                            <p class=\"size-name\">Large<\/p>\n                            <p class=\"size-desc\">Detailed onboarding flows<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Dialog Placement -->\n            <div class=\"customization-group\">\n                <h3 class=\"group-title\">\ud83d\udccd Dialog Placement<\/h3>\n                <div class=\"placement-options\">\n                    <div class=\"placement-option\">\n                        <div class=\"placement-info\">\n                            <h4 class=\"placement-name\">Corner Placement<\/h4>\n                            <p class=\"placement-desc\">Positioned next to chat button in bottom corner<\/p>\n                        <\/div>\n                        <div class=\"placement-preview\">\n                            <div class=\"mock-website\">\n                                <div class=\"mock-content\">\n                                    <div class=\"content-line\"><\/div>\n                                    <div class=\"content-line short\"><\/div>\n                                    <div class=\"content-line medium\"><\/div>\n                                <\/div>\n                                <div class=\"dialog-placement corner\">\n                                    <div class=\"mini-dialog\">\n                                        <div class=\"mini-title\">Greeting Dialog<\/div>\n                                        <div class=\"mini-content\">Click to chat<\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"placement-option\">\n                        <div class=\"placement-info\">\n                            <h4 class=\"placement-name\">Modal Overlay<\/h4>\n                            <p class=\"placement-desc\">Centered modal-style overlay for maximum attention<\/p>\n                        <\/div>\n                        <div class=\"placement-preview\">\n                            <div class=\"mock-website\">\n                                <div class=\"mock-content\">\n                                    <div class=\"content-line\"><\/div>\n                                    <div class=\"content-line short\"><\/div>\n                                    <div class=\"content-line medium\"><\/div>\n                                <\/div>\n                                <div class=\"dialog-placement modal\">\n                                    <div class=\"mini-dialog\">\n                                        <div class=\"mini-title\">Greeting Dialog<\/div>\n                                        <div class=\"mini-content\">Click to chat<\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Explore Other Greeting Types -->\n    <section class=\"other-greetings\">\n        <div class=\"container\">\n            <h2 class=\"section-title\">Explore Other Greeting Types<\/h2>\n            <p class=\"section-description\">\n                Choose from our complete collection of greeting widgets, each designed for specific use cases and business needs.\n            <\/p>\n            \n            <div class=\"cards-grid\">\n                <div class=\"card\">\n                    <div class=\"card-image-container\" data-modal-image=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/09\/Content-Specific-Greetings.webp\" data-modal-alt=\"Content-Specific Greetings\">\n                        <img decoding=\"async\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/09\/Content-Specific-Greetings.webp\" \n                             alt=\"Content-specific greeting widget with dynamic messaging\" \n                             loading=\"lazy\"\n                             width=\"300\"\n                             height=\"200\" \/>\n                    <\/div>\n                    <h3>Content-Specific Greetings<\/h3>\n                    <p>Create dynamic greetings that respond to what users are exploring with intelligent content-aware messaging.<\/p>\n                    <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/greetings-2\" class=\"btn btn-secondary greeting-btn\">View Content-Specific<\/a>\n                <\/div>\n                \n                <div class=\"card\">\n                    <div class=\"card-image-container\" data-modal-image=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/09\/Greetings-Form-Greetings.webp\" data-modal-alt=\"Greetings Form\">\n                        <img decoding=\"async\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/09\/Greetings-Form-Greetings.webp\" \n                             alt=\"Interactive greeting form with lead capture and validation\" \n                             loading=\"lazy\"\n                             width=\"300\"\n                             height=\"200\" \/>\n                    <\/div>\n                    <h3>Greetings Form<\/h3>\n                    <p>Capture visitor information directly through interactive greeting forms with built-in lead capture and validation.<\/p>\n                    <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/greetings-form\" class=\"btn btn-secondary greeting-btn\">View Greetings Form<\/a>\n                <\/div>\n                \n                <div class=\"card\">\n                    <div class=\"card-image-container\" data-modal-image=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/09\/Multi-Agent-Greetings.webp\" data-modal-alt=\"Multi Agent\">\n                        <img decoding=\"async\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/09\/Multi-Agent-Greetings.webp\" \n                             alt=\"Multi-agent greeting with team member profiles and department routing\" \n                             loading=\"lazy\"\n                             width=\"300\"\n                             height=\"200\" \/>\n                    <\/div>\n                    <h3>Multi Agent<\/h3>\n                    <p>Connect visitors to different team members with multiple agent profiles and department-based routing.<\/p>\n                    <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/multi-agent\" class=\"btn btn-secondary greeting-btn\">View Multi Agent<\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Final CTA -->\n    <section class=\"cta-final-section\">\n        <div class=\"container\">\n            <div class=\"cta-content\">\n                <h2 class=\"cta-title\">\ud83d\ude80 Start Greeting Your Customers Today<\/h2>\n                <p class=\"cta-description\">\n                    Trusted by 700,000+ WordPress sites worldwide to boost engagement and conversions.\n                <\/p>\n                <div class=\"cta-buttons-final\">\n                    <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/docs\/greetings-1\/\" class=\"btn-cta-primary\">\n                        Get Started Now\n                    <\/a>\n                    <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/pricing\/\" class=\"btn-cta-secondary\">\n                        Upgrade to Pro \u2b50\n                    <\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Image Modal -->\n    <div id=\"imageModal\" class=\"image-modal\" role=\"dialog\" aria-modal=\"true\" aria-hidden=\"true\">\n        <div class=\"modal-overlay\"><\/div>\n        <div class=\"modal-content\">\n            <button class=\"modal-close\" aria-label=\"Close modal\">&times;<\/button>\n            <img decoding=\"async\" id=\"modalImage\" src=\"\" alt=\"\" \/>\n        <\/div>\n    <\/div>\n\n<\/div>\n\n\n\n\n<style>\n.ht-header-nav-desktop ul {\n    margin: 0;\n}\n<\/style>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Customize Your Perfect Greeting Create fully customizable greeting dialogs with complete control over design, placement, and behavior. Make every interaction feel personal and on-brand. View Demo View Docs Every Greeting Element, Perfectly Crafted Break your greeting dialog into flexible, customizable components &#8211; each designed for complete visual and functional control. Section 1 Header Content (Title [&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":["g1.min__20251113_115324.css"],"js":["g1.min__20251113_092914.js"],"js_attr":{"g1.min__20251113_092914.js":{"attr":"","footer":"1"}}}},"categories":[45,65],"tags":[],"class_list":["post-2779","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\/2779","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=2779"}],"version-history":[{"count":0,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts\/2779\/revisions"}],"wp:attachment":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/media?parent=2779"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/categories?post=2779"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/tags?post=2779"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}