{"id":3597,"date":"2022-10-14T14:09:21","date_gmt":"2022-10-14T08:39:21","guid":{"rendered":"http:\/\/holithemes.com\/plugins\/click-to-chat\/?p=3597"},"modified":"2026-04-08T14:54:53","modified_gmt":"2026-04-08T09:24:53","slug":"multi-agent","status":"publish","type":"post","link":"https:\/\/holithemes.com\/plugins\/click-to-chat\/multi-agent\/","title":{"rendered":"Multi Agent"},"content":{"rendered":"\n\n    <div class=\"multi-agent-wrapper\">\n        <main>\n            <!-- Hero Section -->\n            <section class=\"banner-section\" id=\"banner\" aria-label=\"Main hero section\">\n                <div class=\"container\">\n                    <div class=\"banner-grid\">\n                        <!-- Left Content -->\n                        <div class=\"banner-content\">\n                            <div class=\"content-wrapper\">\n                                <h1 class=\"main-title\">\n                                    <span class=\"title-line-1\">Right Agent, Right Time,<\/span>\n                                    <br>\n                                    <span class=\"title-line-2\">Right Chat<\/span>\n                                <\/h1>\n\n                                <p class=\"description\">\n                                    Ensure every visitor routes to the right team member like Sales, Support, or Billing based on availability. Faster replies lead to higher conversions.\n                                <\/p>\n\n                                <div class=\"cta-buttons\">\n                                    <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/pricing\"\n                                        class=\"btn-primary\">Upgrade to Pro<\/a>\n                                    <button class=\"btn-secondary ctc_greetings\">View Live Demo<\/button>\n                                <\/div>\n                                <span class=\"tagline\">Included in Click to Chat Pro \ud83d\udc8e<\/span>\n                            <\/div>\n                        <\/div>\n\n                        <!-- Right Content - 3D Dialog -->\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\/Multi-Agent-Greetings.webp\"\n                                        alt=\"Multi Agent Chat Widget showing team selection interface with sales, support, and billing options\"\n                                        class=\"dialog-image-header\" width=\"400\" height=\"500\" 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                    <\/div>\n                <\/div>\n            <\/section>\n\n            <!-- Feature Section 1 -->\n            <section class=\"feature-section\" aria-labelledby=\"feature1-title\">\n                <div class=\"container\">\n                    <div class=\"feature-content\">\n                        <div class=\"feature-text\">\n                            <h2 id=\"feature1-title\">Route Visitors to the Right Team Instantly<\/h2>\n                            <p>\n                                Let customers choose exactly who they need \u2014 Sales, Support, Billing, or any department.\n                                No more mixed chats. No more internal forwarding. Just direct conversations that convert faster.\n                            <\/p>\n                        <\/div>\n                        <div class=\"feature-visual\">\n                            <div class=\"widget-mockup\">\n                                <div class=\"widget-header\">Choose Your Team<\/div>\n                                <div class=\"widget-agents\">\n                                    <div class=\"widget-agent\">\ud83d\udc68 Sales Team <span class=\"status online\"\n                                            aria-label=\"Online\"><\/span><\/div>\n                                    <div class=\"widget-agent\">\ud83d\udee0\ufe0f Support Team <span class=\"status online\"\n                                            aria-label=\"Online\"><\/span><\/div>\n                                    <div class=\"widget-agent\">\ud83d\udcb0 Billing Team <span class=\"status offline\"\n                                            aria-label=\"Offline\"><\/span><\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <!-- Feature Section 2 -->\n            <section class=\"feature-section\" aria-labelledby=\"feature2-title\">\n                <div class=\"container\">\n                    <div class=\"feature-content\">\n                        <div class=\"feature-visual\">\n                            <div class=\"schedule-mockup mockup-hover\">\n                                <div class=\"schedule-header\">Agent Schedules<\/div>\n                                <div class=\"schedule-timeline-new\">\n                                    <div class=\"timeline-header\">\n                                        <span class=\"time-label\">Time \u2192<\/span>\n                                        <div class=\"time-markers\">\n                                            <span>12AM<\/span>\n                                            <span>6AM<\/span>\n                                            <span>12PM<\/span>\n                                            <span>6PM<\/span>\n                                            <span>12AM<\/span>\n                                        <\/div>\n                                    <\/div>\n                                    <div class=\"agent-row\">\n                                        <span class=\"agent-label\">Agent A<\/span>\n                                        <div class=\"timeline-track\">\n                                            <div class=\"schedule-bar\" style=\"left:0%; width: 30%;\"><\/div>\n                                        <\/div>\n                                    <\/div>\n                                    <div class=\"agent-row\">\n                                        <span class=\"agent-label\">Agent B<\/span>\n                                        <div class=\"timeline-track\">\n                                            <div class=\"schedule-bar\" style=\"left: 30%; width: 25%;\"><\/div>\n                                        <\/div>\n                                    <\/div>\n                                    <div class=\"agent-row\">\n                                        <span class=\"agent-label\">Agent C<\/span>\n                                        <div class=\"timeline-track\">\n                                            <div class=\"schedule-bar\" style=\"left: 55%; width: 40%;\"><\/div>\n                                            <!-- <span class=\"break-label\">Offline<\/span> -->\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        <div class=\"feature-text\">\n                            <h2 id=\"feature2-title\">Custom Availability &#038; Shift Control<\/h2>\n                            <p>\n                                Define working hours for every agent. Cover multiple shifts and time zones without confusion.\n                                Stay responsive 24\/7 and never miss a high-intent customer.\n                            <\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <!-- Feature Section 3 -->\n            <section class=\"feature-section\" aria-labelledby=\"feature3-title\">\n                <div class=\"container\">\n                    <div class=\"feature-content\">\n                        <div class=\"feature-text\">\n                            <h2 id=\"feature3-title\">Smart Offline Lead Protection<\/h2>\n                            <p>When agents go offline, your leads shouldn\u2019t disappear. Control exactly what happens:<\/p>\n\n                            <ol class=\"offline-options-list\">\n                                <li class=\"offline-option-item\">\n                                    <span class=\"option-number\">1<\/span>\n                                    <div class=\"option-content\">\n                                        <strong>Hide Offline Agents<\/strong>\n                                        <p>Show only available team members to prevent frustration.<\/p>\n                                    <\/div>\n                                <\/li>\n                                <li class=\"offline-option-item\">\n                                    <span class=\"option-number\">2<\/span>\n                                    <div class=\"option-content\">\n                                        <strong>Show Next Availability<\/strong>\n                                        <p>Set expectations and keep prospects engaged.<\/p>\n                                    <\/div>\n                                <\/li>\n                                <li class=\"offline-option-item\">\n                                    <span class=\"option-number\">3<\/span>\n                                    <div class=\"option-content\">\n                                        <strong>Disable Chat Button<\/strong>\n                                        <p>Maintain visibility while preventing unnecessary drop-offs.<\/p>\n                                    <\/div>\n                                <\/li>\n                            <\/ol>\n\n                            <p>Protect every conversation \u2014 even outside business hours.<\/p>\n                        <\/div>\n\n                        <div class=\"feature-visual\">\n                            <div class=\"offline-mockup mockup-hover\">\n                                <div class=\"offline-options\">\n                                    <div class=\"option-card\">\ud83d\udd12 Hide Offline Agents<\/div>\n                                    <div class=\"option-card time-option active\">\u23f0 Back in 3 hours<\/div>\n                                    <div class=\"option-card disabled-option\">\ud83d\udeab Disable Chat Button<\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <!-- Feature Section 4 -->\n            <section class=\"feature-section\" aria-labelledby=\"feature4-title\">\n                <div class=\"container\">\n                    <div class=\"feature-content\">\n                        <div class=\"feature-visual\">\n                            <div class=\"profile-mockup mockup-hover\">\n                                <div class=\"agent-profile\">\n                                    <div class=\"agent-avatar\" aria-hidden=\"true\">\ud83d\udc64<\/div>\n                                    <div class=\"agent-info\">\n                                        <div class=\"agent-name\">John Smith<\/div>\n                                        <div class=\"agent-role\">Sales Manager<\/div>\n                                        <div class=\"agent-greeting\">&#8220;Hi! Ready to boost your sales?&#8221;<\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        <div class=\"feature-text\">\n                            <h2 id=\"feature4-title\">Build Trust with Real Agent Profiles<\/h2>\n                            <p>\n                                Add names, photos, roles, and custom greetings. When visitors see real people,\n                                they engage faster and convert more confidently.\n                            <\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <!-- Feature Section 5 -->\n            <section class=\"feature-section\" aria-labelledby=\"feature5-title\">\n                <div class=\"container\">\n                    <div class=\"feature-content\">\n                        <div class=\"feature-text\">\n                            <h2 id=\"feature5-title\">Global Ready with Multilingual Support<\/h2>\n                            <p>\n                                Translate each agent\u2019s profile with WPML or Polylang and serve customers worldwide\n                                without operational complexity.\n                            <\/p>\n                        <\/div>\n                        <div class=\"feature-visual\">\n                            <div class=\"multilingual-mockup mockup-hover\">\n                                <div class=\"language-selector\" role=\"tablist\" aria-label=\"Language selection\">\n                                    <button class=\"lang-option active\" role=\"tab\" aria-selected=\"true\"\n                                        data-lang=\"en\">\ud83c\uddfa\ud83c\uddf8 English<\/button>\n                                    <button class=\"lang-option\" role=\"tab\" aria-selected=\"false\" data-lang=\"es\">\ud83c\uddea\ud83c\uddf8\n                                        Spanish<\/button>\n                                    <button class=\"lang-option\" role=\"tab\" aria-selected=\"false\" data-lang=\"hi\">\ud83c\uddee\ud83c\uddf3\n                                        Hindi<\/button>\n                                <\/div>\n                                <div class=\"translated-content\">\n                                    <div class=\"agent-name-translated\" data-i18n=\"sales_team\">Sales Team<\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <!-- Comparison Section -->\n            <section class=\"comparison-section\" aria-labelledby=\"comparison-title\">\n                <div class=\"container\">\n                    <h2 id=\"comparison-title\">From One Contact to a Fully Structured Team<\/h2>\n                    <div class=\"comparison-grid\">\n                        <article class=\"comparison-item\">\n                            <div class=\"default-widget-mockup\">\n                                <div class=\"single-chat-button\">\n                                    <div class=\"whatsapp-btn\">Start WhatsApp Chat<\/div>\n                                <\/div>\n                            <\/div>\n                            <p>Before: Simple one-click chat &#8211; everyone goes to the same contact.<\/p>\n                        <\/article>\n                        <div class=\"comparison-arrow\" aria-hidden=\"true\">\u2192<\/div>\n                        <article class=\"comparison-item\">\n                            <div class=\"multi-agent-mockup\">\n                                <div class=\"widget-header\">\ud83d\ude80 Choose Your Team<\/div>\n                                <div class=\"agent-options\">\n                                    <div class=\"agent-option\">\ud83d\udc68 Sales Team<\/div>\n                                    <div class=\"agent-option\">\ud83d\udee0\ufe0f Support Team<\/div>\n                                    <div class=\"agent-option\">\ud83d\udcb0 Billing Team<\/div>\n                                <\/div>\n                            <\/div>\n                            <p>Now: Smart selection &#8211; visitors connect with the right department instantly.<\/p>\n                        <\/article>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <!-- How It Works -->\n            <section class=\"how-it-works\" aria-labelledby=\"how-it-works-title\">\n                <div class=\"container\">\n                    <h2 id=\"how-it-works-title\">Set Up Multi Agent in Minutes<\/h2>\n                    <div class=\"steps-grid\" role=\"list\">\n                        <article class=\"step-card\" role=\"listitem\">\n                            <div class=\"step-number\">1<\/div>\n                            <h3>Add Agents<\/h3>\n                            <p>\u2728 Quick Setup<\/p>\n                        <\/article>\n                        <article class=\"step-card\" role=\"listitem\">\n                            <div class=\"step-number\">2<\/div>\n                            <h3>Schedule<\/h3>\n                            <p>\u23f0 Smart Timing<\/p>\n                        <\/article>\n                        <article class=\"step-card\" role=\"listitem\">\n                            <div class=\"step-number\">3<\/div>\n                            <h3>Configure<\/h3>\n                            <p>\ud83d\udd04 Enable\/Disable<\/p>\n                        <\/article>\n                        <article class=\"step-card\" role=\"listitem\">\n                            <div class=\"step-number\">4<\/div>\n                            <h3>Customize<\/h3>\n                            <p>\ud83c\udfa8 Beautiful Interface<\/p>\n                        <\/article>\n                        <article class=\"step-card\" role=\"listitem\">\n                            <div class=\"step-number\">5<\/div>\n                            <h3>Publish Now<\/h3>\n                            <p>\ud83e\udd1dAgent Added<\/p>\n                        <\/article>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <!-- Use Cases -->\n            <section class=\"use-cases\" aria-labelledby=\"use-cases-title\">\n                <div class=\"container\">\n                    <h2 id=\"use-cases-title\">Perfect for Any Team Size or Industry<\/h2>\n                    <div class=\"use-cases-grid\" role=\"list\">\n                        <article class=\"use-case-card mockup-hover\" role=\"listitem\">\n                            <div class=\"use-case-icon\" aria-hidden=\"true\">\ud83c\udfe2<\/div>\n                            <h3>Global Support Teams<\/h3>\n                            <p>Time zone coverage with custom agent schedules. Perfect for international businesses with\n                                distributed teams.<\/p>\n                        <\/article>\n                        <article class=\"use-case-card mockup-hover\" role=\"listitem\">\n                            <div class=\"use-case-icon\" aria-hidden=\"true\">\ud83d\udcbc<\/div>\n                            <h3>Role-Based Communication<\/h3>\n                            <p>Let users choose who they talk to. Direct inquiries to the right department from the\n                                start.<\/p>\n                        <\/article>\n                        <article class=\"use-case-card mockup-hover\" role=\"listitem\">\n                            <div class=\"use-case-icon\" aria-hidden=\"true\">\ud83c\udf19<\/div>\n                            <h3>After-Hours Support<\/h3>\n                            <p>Hide offline agents or queue chats, showing the agent&#8217;s next availability time for\n                                smoother interactions.<\/p>\n                        <\/article>\n                    <\/div>\n                <\/div>\n            <\/section>\n            <!-- Action Triggers Section -->\n            <section class=\"actions-section\" id=\"actions\" aria-labelledby=\"actions-title\">\n                <div class=\"container\">\n                    <div class=\"section-header\">\n                        <h2 id=\"actions-title\" class=\"section-title\">Engage Users at the Right Moment<\/h2>\n                        <p class=\"section-description\">\n                            Trigger greeting dialogs smartly &#8211; by time, scroll, click, or viewport &#8211; for better\n                            engagement.\n                        <\/p>\n                        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/pricing\" class=\"section-button\">View\n                            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\"\n                                        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 after a specified time delay. Perfect for giving\n                                users time to explore before offering assistance.\n                            <\/p>\n                            <div class=\"action-features\">\n                                <div class=\"action-feature\">\u2022 Customizable delay (1-60 seconds)<\/div>\n                                <div class=\"action-feature\">\u2022 One-time or recurring display<\/div>\n                                <div class=\"action-feature\">\u2022 User session awareness<\/div>\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\"\n                                        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. Ideal for\n                                engaging users who show interest by scrolling.\n                            <\/p>\n                            <div class=\"action-features\">\n                                <div class=\"action-feature\">\u2022 Percentage-based activation<\/div>\n                                <div class=\"action-feature\">\u2022 Scroll direction awareness<\/div>\n                                <div class=\"action-feature\">\u2022 Mobile-optimized detection<\/div>\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\"\n                                        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                                <div class=\"action-feature\">\u2022 Multiple element targeting<\/div>\n                                <div class=\"action-feature\">\u2022 CSS selector support<\/div>\n                                <div class=\"action-feature\">\u2022 Event delegation handling<\/div>\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\"\n                                        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 greeting when specific content enters the user&#8217;s viewport. Great for\n                                section-specific assistance and progressive disclosure.\n                            <\/p>\n                            <div class=\"action-features\">\n                                <div class=\"action-feature\">\u2022 Intersection Observer API<\/div>\n                                <div class=\"action-feature\">\u2022 Threshold customization<\/div>\n                                <div class=\"action-feature\">\u2022 Multiple viewport zones<\/div>\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            <!-- Size Settings Section -->\n            <section class=\"size-section\" aria-labelledby=\"size-title\">\n                <div class=\"container\">\n                    <div class=\"customization-group\">\n                        <h3 id=\"size-title\" class=\"group-title\">\ud83d\udcd0 Make It Fit Your Website Perfectly<\/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                <\/div>\n            <\/section>\n\n            <!-- Dialog Placement Section -->\n            <section class=\"placement-section\" aria-labelledby=\"placement-title\">\n                <div class=\"container\">\n                    <div class=\"section-header\">\n                        <h2 id=\"placement-title\" class=\"section-title\">\ud83d\udcac Place It Where It Converts Best<\/h2>\n                        <p class=\"section-description\">\n                            Choose how your greeting forms appear to users. Position them strategically for maximum\n                            engagement and user experience.\n                        <\/p>\n                    <\/div>\n\n                    <div class=\"placement-grid\">\n                        <div class=\"placement-option\">\n                            <h3 class=\"placement-title\">Corner Placement<\/h3>\n                            <p class=\"placement-description\">\n                                Positioned next to chat button in bottom corner\n                            <\/p>\n\n                            <div class=\"placement-mockup\">\n                                <div class=\"mockup-lines\">\n                                    <div class=\"line\"><\/div>\n                                    <div class=\"line\"><\/div>\n                                    <div class=\"line\"><\/div>\n                                <\/div>\n                                <div class=\"corner-dialog\">\n                                    <div class=\"dialog-content\">\n                                        <div class=\"dialog-label\">Greeting<\/div>\n                                        <div class=\"dialog-sublabel\">Multi Agent here<\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n\n                        <div class=\"placement-option\">\n                            <h3 class=\"placement-title\">Modal Overlay<\/h3>\n                            <p class=\"placement-description\">Centered modal-style overlay<\/p>\n\n                            <div class=\"placement-mockup\">\n                                <div class=\"mockup-lines\">\n                                    <div class=\"line\"><\/div>\n                                    <div class=\"line\"><\/div>\n                                    <div class=\"line\"><\/div>\n                                <\/div>\n                                <div class=\"modal-dialog\">\n                                    <div class=\"dialog-content\">\n                                        <div class=\"dialog-label\">Greeting<\/div>\n                                        <div class=\"dialog-sublabel\">Multi Agent here<\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <!-- Multi Agent Mockups Section -->\n            <section class=\"mockup-variations\" aria-labelledby=\"mockup-variations-title\">\n                <div class=\"container\">\n                    <h2 id=\"mockup-variations-title\" class=\"section-title\">Real Conversations, Real Results<\/h2>\n                    <p class=\"section-description\">\n                        See how Multi Agent adapts to different brand styles with customizable colors and agent\n                        configurations.\n                    <\/p>\n\n                    <div class=\"mockup-grid\">\n                        <div class=\"mockup-image\">\n                            <img decoding=\"async\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/11\/Screenshot-2025-11-17-104900.webp\"\n                                alt=\"Multi Agent Blue Theme\" loading=\"lazy\" width=\"800\" height=\"600\">\n                        <\/div>\n                        <div class=\"mockup-image\">\n                            <img decoding=\"async\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/11\/Screenshot-2025-11-17-103417.webp\"\n                                alt=\"Multi Agent Purple Theme\" loading=\"lazy\" width=\"800\" height=\"600\">\n                        <\/div>\n                        <div class=\"mockup-image\">\n                            <img decoding=\"async\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/11\/Screenshot-2025-11-17-102254.webp\"\n                                alt=\"Multi Agent Green Theme\" loading=\"lazy\" width=\"800\" height=\"600\">\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <!-- FAQ Section -->\n            <section class=\"faq-section\" aria-labelledby=\"faq-title\">\n                <div class=\"container\">\n                    <h2 id=\"faq-title\">Quick Answers Before You Get Started<\/h2>\n                    <div class=\"faq-list\">\n                        <div class=\"faq-item\">\n                            <div class=\"faq-question\">What happens when an agent is offline?<\/div>\n                            <div class=\"faq-answer\">You can choose to hide offline agents, disable\/show with next\n                                availability time.<\/div>\n                        <\/div>\n                        <div class=\"faq-item\">\n                            <div class=\"faq-question\">Can I add unlimited agents?<\/div>\n                            <div class=\"faq-answer\">Yes, we can add as many agents as needed. There&#8217;s no limit on the\n                                number of agents we can configure.<\/div>\n                        <\/div>\n                        <div class=\"faq-item\">\n                            <div class=\"faq-question\">Can I customize agent schedules and working hours?<\/div>\n                            <div class=\"faq-answer\">Yes, we can set custom working hours for each agent, including\n                                different time sets, days of the week, breaks, and availability periods. Each agent can\n                                have their own unique schedule.<\/div>\n                        <\/div>\n                        <div class=\"faq-item\">\n                            <div class=\"faq-question\">Can I translate each agent&#8217;s profile separately?<\/div>\n                            <div class=\"faq-answer\">Yes, with WPML or Polylang integration, we can localize each agent&#8217;s\n                                name, description, and messages.<\/div>\n                        <\/div>\n                        <div class=\"faq-item\">\n                            <div class=\"faq-question\">Is Multi Agent available in the free version?<\/div>\n                            <div class=\"faq-answer\">Multi Agent is a premium feature available only in Click to Chat\n                                Pro.<\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n\n\n            <!-- Explore Other Greeting Types Section -->\n            <!-- Explore More Greeting Types Selection -->\n    <section class=\"other-greetings\" aria-labelledby=\"other-greetings-title\">\n        <div class=\"container\">\n            <h2 id=\"other-greetings-title\" class=\"section-title\">Explore More Greeting Types<\/h2>\n            <p class=\"section-description\">\n                Choose the greeting style that fits your business needs.\n            <\/p>\n            \n            <div class=\"cards-grid\" role=\"list\">\n                <article class=\"card card-pro\"  role=\"listitem\">\n                    <figure class=\"card-image-container\" onclick=\"openModal('https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/09\/Greetings-Form-Greetings.webp', '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=\"Greetings Form\"\n                             loading=\"lazy\" width=\"300\" height=\"200\" \/>\n                    <\/figure>\n                    <div class=\"card-title-row\">\n                        <h3>Greetings Form<\/h3>\n                        <span class=\"badge badge-pro\">PRO<\/span>\n                    <\/div>\n                    <p>Collect user details before starting WhatsApp chat.<\/p>\n                    <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/greetings-form\" class=\"btn btn-primary greeting-btn\">Explore Pro Feature<\/a>\n                <\/article>\n            <\/div>\n        <\/div>\n    <\/section>\n\n            <!-- Call to Action Section -->\n            <section class=\"cta-final-section\" aria-labelledby=\"cta-title\">\n                <div class=\"container\">\n                    <div class=\"cta-content\">\n                        <h2 id=\"cta-title\" class=\"cta-title\">\ud83d\ude80 Start Converting Visitors into Customers Today<\/h2>\n                        <p class=\"cta-description\">\n                            Join 700,000+ businesses already using greeting widgets to boost conversions and engage\n                            visitors.\n                        <\/p>\n                        <nav class=\"cta-buttons-final\" role=\"navigation\" aria-label=\"Call to action buttons\">\n                            <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/pricing\/\"\n                                class=\"btn-cta-primary\">Upgrade to PRO \u2b50<\/a>\n                            <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/docs\/multi-agent\/\"\n                                class=\"btn-cta-secondary\">View Docs<\/a>    \n                        <\/nav>\n                    <\/div>\n                <\/div>\n            <\/section>\n        <\/main>\n\n        <!-- Image Modal -->\n        <div id=\"imageModal\" class=\"image-modal\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"modal-title\"\n            aria-hidden=\"true\">\n            <div class=\"modal-overlay\" onclick=\"closeModal()\" aria-label=\"Close modal\"><\/div>\n            <div class=\"modal-content\">\n                <button class=\"modal-close\" onclick=\"closeModal()\" aria-label=\"Close modal\">&times;<\/button>\n                <img decoding=\"async\" id=\"modalImage\" src=\"\" alt=\"\" \/>\n            <\/div>\n        <\/div>\n    <\/div>\n\n\n\n<style>\n.greetings_header_image {\ndisplay: none;\n}\n\n.ht-header-nav-desktop ul {\n    margin: 0;\n}\n<\/style>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Right Agent, Right Time, Right Chat Ensure every visitor routes to the right team member like Sales, Support, or Billing based on availability. Faster replies lead to higher conversions. Upgrade to Pro View Live Demo Included in Click to Chat Pro \ud83d\udc8e Route Visitors to the Right Team Instantly Let customers choose exactly who they [&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":["multiagent-r5BdTnZ_20260408_092343.css"],"js":["multiagent-BTuKnTud_20260408_092343.js"],"js_attr":{"multiagent-BTuKnTud_20260408_092343.js":{"attr":"","footer":"1"}}}},"categories":[52,45,65],"tags":[],"class_list":["post-3597","post","type-post","status-publish","format-standard","hentry","category-click-to-chat-pro","category-greetings","category-page-by-ht-design"],"_links":{"self":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts\/3597","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=3597"}],"version-history":[{"count":2,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts\/3597\/revisions"}],"predecessor-version":[{"id":7343,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts\/3597\/revisions\/7343"}],"wp:attachment":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/media?parent=3597"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/categories?post=3597"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/tags?post=3597"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}