{"id":2783,"date":"2022-03-22T10:24:32","date_gmt":"2022-03-22T04:54:32","guid":{"rendered":"http:\/\/holithemes.com\/plugins\/click-to-chat\/?p=2783"},"modified":"2026-02-12T18:20:27","modified_gmt":"2026-02-12T12:50:27","slug":"greetings-form","status":"publish","type":"post","link":"https:\/\/holithemes.com\/plugins\/click-to-chat\/greetings-form\/","title":{"rendered":"Greetings Form"},"content":{"rendered":"\n<div class=\"greetings-form-wrapper\">\n      <!-- Animated background particles -->\n      <div class=\"background-particles\" aria-hidden=\"true\">\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      <!-- Hero Section -->\n      <header class=\"hero\">\n        <div class=\"hero-content\">\n          <section class=\"hero-left\">\n            <div class=\"hero-badge\">\n              <span class=\"badge-icon\" aria-hidden=\"true\">\u2728<\/span>\n              Collect visitor details before starting WhatsApp chat\n            <\/div>\n\n            <h1 class=\"hero-title\">\n              Capture <span class=\"text-cyan\">Leads with<\/span><br \/>\n              <span class=\"text-purple\">Greetings Form<\/span>\n            <\/h1>\n\n              <p class=\"hero-description\">\n                Create stunning, personalized greeting forms with complete design\n                control. From colors to placement, make every interaction uniquely\n                yours.\n              <\/p>\n\n            <div class=\"hero-buttons\">\n              <button class=\"btn-primary ctc_greetings\" type=\"button\">\n                View Live Demo\n              <\/button>\n              <a\n                href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/pricing\"\n                class=\"btn-secondary\"\n              >\n                View Pricing\n              <\/a>\n            <\/div>\n          <\/section>\n\n          <aside class=\"hero-right\">\n            <div class=\"hero-image\">\n              <div class=\"dialog-container\">\n                <div class=\"dialog-glow\" aria-hidden=\"true\"><\/div>\n                <div class=\"dialog-wrapper\">\n                  <img fetchpriority=\"high\" decoding=\"async\"\n                    src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/09\/Greetings-Form-Greetings.webp\"\n                    alt=\"Greeting form widget with input fields and WhatsApp integration\"\n                    class=\"dialog-image-header\"\n                    loading=\"eager\"\n                    width=\"320\"\n                    height=\"240\"\n                  \/>\n                <\/div>\n                <div class=\"floating-particle particle-top\" aria-hidden=\"true\"><\/div>\n                <div class=\"floating-particle particle-bottom\" aria-hidden=\"true\"><\/div>\n              <\/div>\n            <\/div>\n          <\/aside>\n        <\/div>\n      <\/header>\n\n      <!-- Why This Greeting Type -->\n      <section id=\"why\" aria-labelledby=\"why-title\">\n        <div class=\"container\">\n          <h2 id=\"why-title\" class=\"section-title\">\n            Why Use Greeting Forms?\n          <\/h2>\n          <p class=\"section-subtitle\">\n            Collect meaningful information before chat starts and deliver more\n            personalized WhatsApp conversations.\n          <\/p>\n\n          <div class=\"cards-grid\">\n            <article class=\"card\">\n              <div class=\"card-icon\" aria-hidden=\"true\">\ud83d\udcdd<\/div>\n              <h3>Lead Capture Made Easy<\/h3>\n              <p>\n                Ask the right questions before chat begins and receive visitor\n                details directly in WhatsApp.\n              <\/p>\n            <\/article>\n\n            <article class=\"card\">\n              <div class=\"card-icon\" aria-hidden=\"true\">\u26a1<\/div>\n              <h3>Instant Qualification<\/h3>\n              <p>\n                Convert visitors into leads immediately with interactive forms\n                that encourage participation and build connections.\n              <\/p>\n            <\/article>\n\n            <article class=\"card\">\n              <div class=\"card-icon\" aria-hidden=\"true\">\ud83c\udfaf<\/div>\n              <h3>Structured Conversations<\/h3>\n              <p>\n                Gather qualified leads with structured forms that pre-fill\n                WhatsApp messages with visitor details for personalized\n                conversations.\n              <\/p>\n            <\/article>\n          <\/div>\n        <\/div>\n      <\/section>\n\n      <!-- Form Field Types -->\n      <section class=\"section field-types-section\" aria-labelledby=\"field-types-title\">\n        <div class=\"container\">\n          <header class=\"section-header\">\n            <h2 id=\"field-types-title\" class=\"section-title\">\n              Form Field <span class=\"text-purple\">Types<\/span>\n            <\/h2>\n            <p class=\"section-description\">\n              Build flexible greeting forms using multiple field types designed\n              for real-world use cases.\n            <\/p>\n          <\/header>\n\n          <div class=\"field-types-grid\">\n            <!-- Cards unchanged structurally, only copy refined -->\n            <article class=\"field-type-card\">\n              <div class=\"field-type-icon text-icon\">T<\/div>\n              <h3 class=\"field-type-title\">Text Field<\/h3>\n              <p class=\"field-type-description\">\n                Capture names or short text responses with validation and\n                placeholders.\n              <\/p>\n              <ul class=\"field-type-features\">\n                <li>Single-line input<\/li>\n                <li>Custom validation<\/li>\n                <li>Placeholder support<\/li>\n              <\/ul>\n            <\/article>\n\n            <article class=\"field-type-card\">\n              <div class=\"field-type-icon email-icon\">\u2709<\/div>\n              <h3 class=\"field-type-title\">Email Field<\/h3>\n              <p class=\"field-type-description\">\n                Collect verified email addresses with built-in format validation.\n              <\/p>\n              <ul class=\"field-type-features\">\n                <li>Email validation<\/li>\n                <li>Mobile-optimized keyboard<\/li>\n                <li>Error prevention<\/li>\n              <\/ul>\n            <\/article>\n\n            <article class=\"field-type-card\">\n              <div class=\"field-type-icon textarea-icon\">\u2261<\/div>\n              <h3 class=\"field-type-title\">Textarea Field<\/h3>\n              <p class=\"field-type-description\">\n                Allow visitors to share detailed messages or requirements.\n              <\/p>\n              <ul class=\"field-type-features\">\n                <li>Multi-line input<\/li>\n                <li>Great for inquiries<\/li>\n                <li>Auto-resize support<\/li>\n              <\/ul>\n            <\/article>\n\n            <article class=\"field-type-card\">\n              <div class=\"field-type-icon checkbox-icon\">\u2611<\/div>\n              <h3 class=\"field-type-title\">Checkbox Field<\/h3>\n              <p class=\"field-type-description\">\n                Collect consent, preferences, or confirmations.\n              <\/p>\n              <ul class=\"field-type-features\">\n                <li>Yes \/ No values<\/li>\n                <li>Required option<\/li>\n                <li>Privacy consent<\/li>\n              <\/ul>\n            <\/article>\n\n            <article class=\"field-type-card\">\n              <div class=\"field-type-icon select-icon\">\u25bc<\/div>\n              <h3 class=\"field-type-title\">Select Field<\/h3>\n              <p class=\"field-type-description\">\n                Dropdown field for services, categories, or options.\n              <\/p>\n              <ul class=\"field-type-features\">\n                <li>Multiple options<\/li>\n                <li>Custom values<\/li>\n                <li>Clean UI<\/li>\n              <\/ul>\n            <\/article>\n\n            <article class=\"field-type-card\">\n              <div class=\"field-type-icon phone-icon\">#<\/div>\n              <h3 class=\"field-type-title\">Phone Number Field<\/h3>\n              <p class=\"field-type-description\">\n                International phone input with country code detection.\n              <\/p>\n              <ul class=\"field-type-features\">\n                <li>Country code selector<\/li>\n                <li>Number validation<\/li>\n                <li>Auto formatting<\/li>\n              <\/ul>\n            <\/article>\n\n            <article class=\"field-type-card\">\n              <div class=\"field-type-icon date-icon\">\ud83d\udcc5<\/div>\n              <h3 class=\"field-type-title\">Date Field<\/h3>\n              <p class=\"field-type-description\">\n                Useful for bookings, appointments, and scheduling.\n              <\/p>\n              <ul class=\"field-type-features\">\n                <li>Date picker UI<\/li>\n                <li>Min \/ max limits<\/li>\n                <li>Date with time slots<\/li>\n              <\/ul>\n            <\/article>\n\n            <article class=\"field-type-card\">\n              <div class=\"field-type-icon hidden-icon\">\ud83d\udc41\ufe0f<\/div>\n              <h3 class=\"field-type-title\">Hidden Field<\/h3>\n              <p class=\"field-type-description\">\n                Pass tracking data silently into WhatsApp messages.\n              <\/p>\n              <ul class=\"field-type-features\">\n                <li>Invisible to users<\/li>\n                <li>UTM &#038; page data<\/li>\n                <li>Analytics friendly<\/li>\n              <\/ul>\n            <\/article>\n          <\/div>\n        <\/div>\n      <\/section>\n\n        <!-- Form Builder -->\n        <section class=\"section\" id=\"form-builder-section\" aria-labelledby=\"form-builder-title\">\n          <div class=\"container\">\n            <header class=\"section-header\">\n              <h2 id=\"form-builder-title\" class=\"section-title\">\n                Greetings Form <span class=\"text-purple\">Builder<\/span>\n              <\/h2>\n              <p class=\"section-description\">\n                Build powerful greeting forms with 8 types of input fields.\n                Configure and customize each field.\n              <\/p>\n            <\/header>\n\n            <div class=\"form-builder\">\n              <div class=\"builder-panel\">\n                <div class=\"panel-header\">\n                  <h3 class=\"panel-title\">Greetings Form<\/h3>\n                  <p class=\"panel-note\">\n                    \ud83d\udccb Demo Interface &#8211; Actual UI vary in product. <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/docs\/greetings-form\/\" target=\"_blank\" class=\"demo-link\">Learn more about greetings<\/a>\n                  <\/p>\n                <\/div>\n\n                <div class=\"panel-content\">\n                  <div class=\"field-types\">\n                    <div class=\"field-type active\" data-type=\"text\">\n                      <span class=\"field-icon\" aria-hidden=\"true\">\ud83d\udcdd<\/span>\n                      <span class=\"field-label\">Text<\/span>\n                      <span class=\"field-check\" aria-hidden=\"true\">\u2713<\/span>\n                    <\/div>\n                    <div class=\"field-type\" data-type=\"email\">\n                      <span class=\"field-icon\" aria-hidden=\"true\">\ud83d\udce7<\/span>\n                      <span class=\"field-label\">Email<\/span>\n                    <\/div>\n                    <div class=\"field-type\" data-type=\"textarea\">\n                      <span class=\"field-icon\" aria-hidden=\"true\">\ud83d\udcc4<\/span>\n                      <span class=\"field-label\">TextArea (large field)<\/span>\n                    <\/div>\n                    <div class=\"field-type\" data-type=\"checkbox\">\n                      <span class=\"field-icon\" aria-hidden=\"true\">\u2611\ufe0f<\/span>\n                      <span class=\"field-label\">Checkbox<\/span>\n                    <\/div>\n                    <div class=\"field-type\" data-type=\"select\">\n                      <span class=\"field-icon\" aria-hidden=\"true\">\ud83d\udccb<\/span>\n                      <span class=\"field-label\">Select<\/span>\n                    <\/div>\n                    <div class=\"field-type\" data-type=\"number\">\n                      <span class=\"field-icon\" aria-hidden=\"true\">\ud83d\udcde<\/span>\n                      <span class=\"field-label\">Number (intl tel input)<\/span>\n                    <\/div>\n                    <div class=\"field-type\" data-type=\"date\">\n                      <span class=\"field-icon\" aria-hidden=\"true\">\ud83d\udcc5<\/span>\n                      <span class=\"field-label\">Date<\/span>\n                    <\/div>\n                    <div class=\"field-type\" data-type=\"hidden\">\n                      <span class=\"field-icon\" aria-hidden=\"true\">\ud83d\udc41\ufe0f<\/span>\n                      <span class=\"field-label\">Hidden<\/span>\n                    <\/div>\n                  <\/div>\n\n                  <div class=\"field-config\">\n                    <div class=\"config-group\">\n                      <label class=\"config-label\" for=\"field-name\">Field Name<\/label>\n                      <input\n                        type=\"text\"\n                        class=\"config-input\"\n                        id=\"field-name\"\n                        value=\"Name\"\n                        maxlength=\"50\"\n                      >\n                    <\/div>\n\n                    <div class=\"config-group\">\n                      <label class=\"config-label\" for=\"field-placeholder\">Placeholder<\/label>\n                      <input\n                        type=\"text\"\n                        class=\"config-input\"\n                        id=\"field-placeholder\"\n                        value=\"Name\"\n                        maxlength=\"100\"\n                      >\n                    <\/div>\n\n                    <div class=\"config-checkboxes\">\n                      <label class=\"checkbox-label\">\n                        <input type=\"checkbox\" id=\"field-required\">\n                        <span>Required<\/span>\n                      <\/label>\n\n                      <label class=\"checkbox-label teal\">\n                        <input type=\"checkbox\" id=\"field-prefilled\">\n                        <span>Add to Prefilled message<\/span>\n                      <\/label>\n                    <\/div>\n\n                    <button class=\"add-field-btn\" type=\"button\">Add Field to Form<\/button>\n                  <\/div>\n                <\/div>\n              <\/div>\n\n              <div class=\"preview-panel\">\n                <h3 class=\"preview-title\">Preview<\/h3>\n                <h5 class=\"panel-note\">(This is Demo, Real Interface Is Different)<\/h5>\n\n                <div class=\"preview-form\">\n                  <div class=\"form-header\">\n                    <div class=\"form-profile\">\n                      <div class=\"profile-avatar\">\n                        <img decoding=\"async\"\n                          src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2024\/03\/new_style8.jpg\"\n                          alt=\"Profile avatar for Click to Chat\"\n                          loading=\"lazy\"\n                          width=\"40\"\n                          height=\"40\"\n                        >\n                      <\/div>\n                      <div class=\"profile-info\">\n                        <div class=\"profile-name\">Click to Chat<\/div>\n                        <div class=\"profile-status\">\n                          <div class=\"status-dot\" aria-hidden=\"true\"><\/div>\n                          <span>Online<\/span>\n                        <\/div>\n                      <\/div>\n                    <\/div>\n                  <\/div>\n\n                  <div class=\"form-body\">\n                    <div class=\"form-message\">\n                      Any questions related to Greetings &#8211; Form?\n                    <\/div>\n\n                    <div class=\"form-fields\" id=\"form-fields\">\n                      <!-- Dynamic fields will be added here -->\n                    <\/div>\n\n                    <button class=\"whatsapp-btn\" onclick=\"handleWhatsAppClick()\" type=\"button\">\n                      <svg\n                        class=\"whatsapp-icon\"\n                        fill=\"currentColor\"\n                        viewBox=\"0 0 24 24\"\n                        width=\"20\"\n                        height=\"20\"\n                        aria-hidden=\"true\"\n                      >\n                        <path\n                          d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.488z\"\n                        \/>\n                      <\/svg>\n                      Whatsapp Us\n                    <\/button>\n\n                    <div class=\"form-footer\">\n                      <div class=\"status-dot\" aria-hidden=\"true\"><\/div>\n                      <span>Online<\/span>\n                      <span>|<\/span>\n                      <span class=\"privacy-link\">Privacy<\/span>\n                      <span>|<\/span>\n                      <span>Demo<\/span>\n                    <\/div>\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/section>\n\n        <!-- Smart Trigger Actions -->\n        <section class=\"actions-section\" id=\"actions\" aria-labelledby=\"actions-title\">\n          <div class=\"container\">\n            <header class=\"section-header\">\n              <h2 id=\"actions-title\" class=\"section-title\">Smart Trigger Actions<\/h2>\n              <p class=\"section-description\">\n                Trigger greeting dialogs smartly &#8211; by time, scroll, click, or\n                viewport &#8211; for better engagement.\n              <\/p>\n              <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/pricing\" class=\"section-button\">View Pricing<\/a>\n            <\/header>\n\n            <div class=\"actions-grid\">\n              <!-- Time-based Trigger -->\n              <article 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\" aria-hidden=\"true\">\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.\n                  Perfect for giving users time to explore before offering\n                  assistance.\n                <\/p>\n                <ul class=\"action-features\">\n                  <li>Customizable delay (1-60 seconds)<\/li>\n                  <li>One-time or recurring display<\/li>\n                  <li>User session awareness<\/li>\n                <\/ul>\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              <\/article>\n\n              <!-- Scroll Trigger -->\n              <article 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\" aria-hidden=\"true\">\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\n                  the page. Ideal for engaging users who show interest by\n                  scrolling.\n                <\/p>\n                <ul class=\"action-features\">\n                  <li>Percentage-based activation<\/li>\n                  <li>Scroll direction awareness<\/li>\n                  <li>Mobile-optimized detection<\/li>\n                <\/ul>\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              <\/article>\n\n              <!-- Click Trigger -->\n              <article 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\" aria-hidden=\"true\">\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\n                  buttons, links, or images. Perfect for contextual help and\n                  targeted assistance.\n                <\/p>\n                <ul class=\"action-features\">\n                  <li>Multiple element targeting<\/li>\n                  <li>CSS selector support<\/li>\n                  <li>Event delegation handling<\/li>\n                <\/ul>\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              <\/article>\n\n              <!-- Viewport Trigger -->\n              <article 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\" aria-hidden=\"true\">\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\n                  viewport. Great for section-specific assistance and progressive\n                  disclosure.\n                <\/p>\n                <ul class=\"action-features\">\n                  <li>Intersection Observer API<\/li>\n                  <li>Threshold customization<\/li>\n                  <li>Multiple viewport zones<\/li>\n                <\/ul>\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              <\/article>\n            <\/div>\n          <\/div>\n        <\/section>\n\n        <!-- Size Settings -->\n        <section class=\"section\" aria-labelledby=\"size-settings-title\">\n          <div class=\"container\">\n            <div class=\"customization-group\">\n              <h3 id=\"size-settings-title\" class=\"group-title\">\ud83d\udcd0 Size Settings<\/h3>\n              <div class=\"size-options\">\n                <article 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                <\/article>\n                <article 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                <\/article>\n                <article 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                <\/article>\n              <\/div>\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                <article class=\"color-variant\">\n                  <div class=\"form-mockup green-theme\">\n                    <div class=\"mockup-header\">\n                      <div class=\"mockup-title\">HoliThemes<\/div>\n                    <\/div>\n                    <div class=\"mockup-body\">\n                      <div class=\"mockup-field name-field\"><\/div>\n                      <div class=\"mockup-field number-field\"><\/div>\n                      <div class=\"mockup-button\">WhatsApp us<\/div>\n                    <\/div>\n                  <\/div>\n                  <div class=\"variant-name\">Green Theme<\/div>\n                <\/article>\n                <article class=\"color-variant\">\n                  <div class=\"form-mockup blue-theme\">\n                    <div class=\"mockup-header\">\n                      <div class=\"mockup-title\">HoliThemes<\/div>\n                    <\/div>\n                    <div class=\"mockup-body\">\n                      <div class=\"mockup-field email-field\"><\/div>\n                      <div class=\"mockup-field date-field\"><\/div>\n                      <div class=\"mockup-button\">WhatsApp us<\/div>\n                    <\/div>\n                  <\/div>\n                  <div class=\"variant-name\">Blue Theme<\/div>\n                <\/article>\n                <article class=\"color-variant\">\n                  <div class=\"form-mockup purple-theme\">\n                    <div class=\"mockup-header\">\n                      <div class=\"mockup-title\">HoliThemes<\/div>\n                    <\/div>\n                    <div class=\"mockup-body\">\n                      <div class=\"mockup-field textarea-field\"><\/div>\n                      <div class=\"mockup-field select-field\"><\/div>\n                      <div class=\"mockup-button\">WhatsApp us<\/div>\n                    <\/div>\n                  <\/div>\n                  <div class=\"variant-name\">Purple Theme<\/div>\n                <\/article>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/section>\n\n        <!-- Dialog Placement -->\n        <section class=\"section\" aria-labelledby=\"placement-title\">\n          <div class=\"container\">\n            <header class=\"section-header\">\n              <h2 id=\"placement-title\" class=\"section-title\">\ud83d\udcac Dialog Placement<\/h2>\n              <p class=\"section-description\">\n                Choose how your greeting forms appear to users. Position them\n                strategically for maximum engagement and user experience.\n              <\/p>\n            <\/header>\n\n            <div class=\"placement-grid\">\n              <article 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\">Form here<\/div>\n                    <\/div>\n                  <\/div>\n                <\/div>\n              <\/article>\n\n              <article 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\">Form here<\/div>\n                    <\/div>\n                  <\/div>\n                <\/div>\n              <\/article>\n            <\/div>\n          <\/div>\n        <\/section>\n\n        <!-- Use Cases -->\n        <section class=\"section\" aria-labelledby=\"use-cases-title\">\n          <div class=\"container\">\n            <header class=\"section-header\">\n              <h2 id=\"use-cases-title\" class=\"section-title\">\n                Form <span class=\"text-purple\">Use Cases<\/span>\n              <\/h2>\n              <p class=\"section-description\">\n                Discover how greeting forms can transform your business\n                interactions and boost customer engagement across different\n                scenarios.\n              <\/p>\n            <\/header>\n\n            <div class=\"trigger-grid\">\n              <article class=\"trigger-card\">\n                <div class=\"trigger-header\">\n                  <div class=\"trigger-icon purple\" aria-hidden=\"true\">\ud83c\udfea<\/div>\n                  <h3 class=\"trigger-title\">E-commerce Support<\/h3>\n                <\/div>\n                <p class=\"trigger-description\">\n                  Capture product inquiries, size questions, and purchase\n                  assistance requests directly from your product pages.\n                <\/p>\n                <ul class=\"trigger-features\">\n                  <li>Product-specific questions<\/li>\n                  <li>Size and availability checks<\/li>\n                  <li>Purchase assistance<\/li>\n                <\/ul>\n              <\/article>\n\n              <article class=\"trigger-card\">\n                <div class=\"trigger-header\">\n                  <div class=\"trigger-icon blue\" aria-hidden=\"true\">\ud83c\udfe2<\/div>\n                  <h3 class=\"trigger-title\">Service Business<\/h3>\n                <\/div>\n                <p class=\"trigger-description\">\n                  Collect service requests, appointment bookings, and consultation\n                  inquiries with detailed customer information.\n                <\/p>\n                <ul class=\"trigger-features\">\n                  <li>Service type selection<\/li>\n                  <li>Preferred appointment times<\/li>\n                  <li>Budget and requirements<\/li>\n                <\/ul>\n              <\/article>\n\n              <article class=\"trigger-card\">\n                <div class=\"trigger-header\">\n                  <div class=\"trigger-icon green\" aria-hidden=\"true\">\ud83c\udf93<\/div>\n                  <h3 class=\"trigger-title\">Education &#038; Training<\/h3>\n                <\/div>\n                <p class=\"trigger-description\">\n                  Gather course inquiries, enrollment information, and student\n                  support requests with structured forms.\n                <\/p>\n                <ul class=\"trigger-features\">\n                  <li>Course interest tracking<\/li>\n                  <li>Enrollment applications<\/li>\n                  <li>Student support tickets<\/li>\n                <\/ul>\n              <\/article>\n\n              <article class=\"trigger-card\">\n                <div class=\"trigger-header\">\n                  <div class=\"trigger-icon orange\" aria-hidden=\"true\">\u2695\ufe0f<\/div>\n                  <h3 class=\"trigger-title\">Healthcare &#038; Wellness<\/h3>\n                <\/div>\n                <p class=\"trigger-description\">\n                  Streamline patient inquiries, appointment requests, and health\n                  consultations with HIPAA-compliant forms.\n                <\/p>\n                <ul class=\"trigger-features\">\n                  <li>Appointment scheduling<\/li>\n                  <li>Symptom pre-screening<\/li>\n                  <li>Insurance verification<\/li>\n                <\/ul>\n              <\/article>\n            <\/div>\n          <\/div>\n        <\/section>\n\n        \n\n        <!-- Other Greetings -->\n        <section class=\"other-greetings\" aria-labelledby=\"other-greetings-title\">\n          <div class=\"container\">\n            <h2 id=\"other-greetings-title\" class=\"section-title\">Explore Other Greeting Types<\/h2>\n            <p class=\"section-description\">\n              Choose from our complete collection of greeting widgets, each\n              designed for specific use cases and business needs.\n            <\/p>\n\n            <div class=\"cards-grid\">\n              <article class=\"card\">\n                <div\n                  class=\"card-image-container\"\n                  onclick=\"openModal('https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/09\/Customizable-Design.webp', 'Customizable Design')\"\n                >\n                  <img decoding=\"async\"\n                    src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/09\/Customizable-Design.webp\"\n                    alt=\"Customizable Design greeting interface showing color and layout options\"\n                    loading=\"lazy\"\n                    width=\"300\"\n                    height=\"200\"\n                  >\n                <\/div>\n                <h3>Customizable Design<\/h3>\n                <p>\n                  Create stunning, personalized greeting dialogs. From colors to\n                  placement, make every interaction uniquely yours.\n                <\/p>\n                <a\n                  href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/greetings-1\"\n                  class=\"btn btn-secondary greeting-btn\"\n                >View Customizable Design<\/a>\n              <\/article>\n\n              <article class=\"card\">\n                <div\n                  class=\"card-image-container\"\n                  onclick=\"openModal('https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/09\/Content-Specific-Greetings.webp', 'Content-Specific Greetings')\"\n                >\n                  <img decoding=\"async\"\n                    src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/09\/Content-Specific-Greetings.webp\"\n                    alt=\"Content-Specific Greetings showing dynamic messaging based on page content\"\n                    loading=\"lazy\"\n                    width=\"300\"\n                    height=\"200\"\n                  >\n                <\/div>\n                <h3>Content-Specific Greetings<\/h3>\n                <p>\n                  Create dynamic greetings that respond to what users are\n                  exploring with intelligent content-aware messaging.\n                <\/p>\n                <a\n                  href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/greetings-2\"\n                  class=\"btn btn-secondary greeting-btn\"\n                >View Content-Specific<\/a>\n              <\/article>\n\n              <article class=\"card\">\n                <div\n                  class=\"card-image-container\"\n                  onclick=\"openModal('https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/09\/Multi-Agent-Greetings.webp', 'Multi Agent')\"\n                >\n                  <img decoding=\"async\"\n                    src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/09\/Multi-Agent-Greetings.webp\"\n                    alt=\"Multi Agent greeting system with multiple team member profiles\"\n                    loading=\"lazy\"\n                    width=\"300\"\n                    height=\"200\"\n                  >\n                <\/div>\n                <h3>Multi Agent<\/h3>\n                <p>\n                  Connect visitors to different team members with multiple agent\n                  profiles and department-based routing.\n                <\/p>\n                <a\n                  href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/multi-agent\"\n                  class=\"btn btn-secondary greeting-btn\"\n                >View Multi Agent<\/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\ude80Start Greeting Your Customers Today<\/h2>\n              <p class=\"cta-description\">\n                Join thousands of businesses already using greeting forms to boost\n                conversions and engage visitors.\n              <\/p>\n              <div class=\"cta-buttons-final\">\n                <a\n                  href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/docs\/greetings-form\/\"\n                  class=\"btn-cta-primary\"\n                >Get Started Now<\/a>\n                <a\n                  href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/pricing\/\"\n                  class=\"btn-cta-secondary\"\n                >Upgrade to PRO \u2b50<\/a>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/section>\n    <\/div>\n\n    <!-- Image Modal -->\n    <div id=\"imageModal\" class=\"image-modal\" role=\"dialog\" aria-labelledby=\"modal-title\" aria-hidden=\"true\">\n      <div class=\"modal-overlay\" onclick=\"closeModal()\"><\/div>\n      <div class=\"modal-content\">\n        <span class=\"modal-close\" onclick=\"closeModal()\" aria-label=\"Close modal\">&times;<\/span>\n        <img decoding=\"async\" id=\"modalImage\" src=\"\" alt=\"\" loading=\"lazy\">\n      <\/div>\n    <\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u2728 Collect visitor details before starting WhatsApp chat Capture Leads with Greetings Form Create stunning, personalized greeting forms with complete design control. From colors to placement, make every interaction uniquely yours. View Live Demo View Pricing Why Use Greeting Forms? Collect meaningful information before chat starts and deliver more personalized WhatsApp conversations. \ud83d\udcdd Lead Capture [&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":["g3-Dr_kc632_20260212_112756.css"],"js":["g3-CO1XqwQQ_20260212_112756.js"],"callbacks":["dequeue_astra"],"js_attr":{"g3-CO1XqwQQ_20260212_112756.js":{"attr":"","footer":"1"}}}},"categories":[52,45,65],"tags":[],"class_list":["post-2783","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\/2783","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=2783"}],"version-history":[{"count":3,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts\/2783\/revisions"}],"predecessor-version":[{"id":7293,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts\/2783\/revisions\/7293"}],"wp:attachment":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/media?parent=2783"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/categories?post=2783"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/tags?post=2783"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}