{"id":29,"date":"2019-07-12T05:29:47","date_gmt":"2019-07-12T05:29:47","guid":{"rendered":"http:\/\/holithemes.com\/plugins\/click-to-chat\/?p=29"},"modified":"2025-11-27T17:17:17","modified_gmt":"2025-11-27T11:47:17","slug":"pre-filled-message","status":"publish","type":"post","link":"https:\/\/holithemes.com\/plugins\/click-to-chat\/pre-filled-message\/","title":{"rendered":"Pre-Filled Message"},"content":{"rendered":"\n\n        <!-- Hero Section -->\n    <div class=\"prefilled-message-wrapper\">\n        <!-- Hero Section -->\n        <main class=\"hero-section\">\n            <h1 class=\"hero-title scroll-reveal\">Prefilled Messages<\/h1>\n            <p class=\"hero-description scroll-reveal\">\n                Guide conversations, save user time, and boost engagement with predefined chat messages.\n            <\/p>\n            <button id=\"see-how-it-works-btn\" class=\"cta-button scroll-reveal\" aria-label=\"Scroll to how it works section\">\n                <span>Get Started<\/span>\n                <svg class=\"arrow-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M12 5v14\"\/>\n                    <path d=\"m19 12-7 7-7-7\"\/>\n                <\/svg>\n            <\/button>\n        <\/main>\n\n        <!-- Why Use Pre-filled Messages Section -->\n        <section id=\"how-it-works-section\" class=\"why-use-section scroll-reveal\">\n            <h2 class=\"section-title\">Why Use Pre-filled Messages?<\/h2>\n            <p class=\"section-description\">\n                The Pre-filled message is a text that appears automatically in the WhatsApp chat window when the page visitor clicks on the WhatsApp button\/image.\n            <\/p>\n            <div class=\"benefits-grid\">\n                <article class=\"benefit-card scroll-reveal\">\n                    <svg class=\"benefit-icon\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                        <path d=\"M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\"\/>\n                    <\/svg>\n                    <h3 class=\"benefit-title\">Save Time<\/h3>\n                    <p class=\"benefit-description\">\n                        Eliminate repetitive typing for your customers. They can start conversations instantly with relevant context already filled in.\n                    <\/p>\n                <\/article>\n                <article class=\"benefit-card scroll-reveal\">\n                    <svg class=\"benefit-icon\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                        <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/>\n                        <polyline points=\"22 4 12 14.01 9 11.01\"\/>\n                    <\/svg>\n                    <h3 class=\"benefit-title\">Guide Conversations<\/h3>\n                    <p class=\"benefit-description\">\n                        Direct customer inquiries with structured messages, ensuring you receive the information you need from the start.\n                    <\/p>\n                <\/article>\n                <article class=\"benefit-card scroll-reveal\">\n                    <svg class=\"benefit-icon\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                        <path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/>\n                        <circle cx=\"9\" cy=\"7\" r=\"4\"\/>\n                        <path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"\/>\n                        <path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/>\n                    <\/svg>\n                    <h3 class=\"benefit-title\">Boost Engagement<\/h3>\n                    <p class=\"benefit-description\">\n                        Lower the barrier to communication. Pre-filled messages make it easier for visitors to reach out, increasing conversion rates.\n                    <\/p>\n                <\/article>\n                <article class=\"benefit-card scroll-reveal\">\n                    <svg class=\"benefit-icon\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                        <polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"\/>\n                    <\/svg>\n                    <h3 class=\"benefit-title\">Context-Aware<\/h3>\n                    <p class=\"benefit-description\">\n                        Automatically include page-specific details like product names, URLs, and titles for personalized interactions.\n                    <\/p>\n                <\/article>\n            <\/div>\n        <\/section>\n\n        <!-- Example Section -->\n        \n\n        <!-- Dynamic Variables Section -->\n        <section class=\"dynamic-variables-section scroll-reveal\">\n            <h2 class=\"section-title\">Dynamic Variables: Auto-Populated for Impact<\/h2>\n            <p class=\"section-description\">\n                Admins set it once. Users click, and the message auto-fills with real-time page data, instantly redirecting them to WhatsApp with a tailored chat.\n            <\/p>\n            <div class=\"variables-grid\">\n                <article class=\"variable-card card-gray-800 scroll-reveal\">\n                    <header class=\"card-header\">\n                        <h3 class=\"card-title\">{site}<\/h3>\n                    <\/header>\n                    <div class=\"card-content\">\n                        Name of the website. <br>\n                        <span class=\"example-text\">[e.g. HoliThemes]<\/span>\n                    <\/div>\n                <\/article>\n                <article class=\"variable-card card-purple-950 scroll-reveal\">\n                    <header class=\"card-header\">\n                        <h3 class=\"card-title\">{title}<\/h3>\n                    <\/header>\n                    <div class=\"card-content\">\n                        The current page title. <br>\n                        <span class=\"example-text\">[e.g. Ruby shades Necklace]<\/span>\n                    <\/div>\n                <\/article>\n                <article class=\"variable-card card-pink-950 scroll-reveal\">\n                    <header class=\"card-header\">\n                        <h3 class=\"card-title\">{url}<\/h3>\n                    <\/header>\n                    <div class=\"card-content\">\n                        The current page link (without query parameters). <br>\n                        <span class=\"example-text\">[e.g. https:\/\/example.com\/ruby-shades-necklace]<\/span>\n                    <\/div>\n                <\/article>\n                <article class=\"variable-card card-gray-700 scroll-reveal\">\n                    <header class=\"card-header\">\n                        <h3 class=\"card-title\">[url]<\/h3>\n                    <\/header>\n                    <div class=\"card-content\">\n                        Replaces with full URL including the query parameters. <br>\n                        <span class=\"example-text\">[e.g. https:\/\/example.com\/ruby-shades-necklace\/path?carat=24&#038;diamond=true]<\/span>\n                    <\/div>\n                <\/article>\n            <\/div>\n        <\/section>\n        <section class=\"example-section scroll-reveal\">\n            <h2 class=\"section-title\">Example in Action<\/h2>\n            <p class=\"section-description\">\n                See how dynamic variables create personalized and effective messages.\n            <\/p>\n            <div class=\"example-two-column\">\n                <div class=\"example-left-column\">\n                    <article class=\"scroll-reveal\">\n                        <header class=\"card-header\">\n                            <h3 class=\"card-title\">Admin Input:<\/h3>\n                        <\/header>\n                        <div class=\"card-content\">\n                            <p class=\"code-block\">\n                                Hello {site}! Like to know more information about the {url}\n                            <\/p>\n                        <\/div>\n                    <\/article>\n                    \n                    <article class=\"scroll-reveal\">\n                        <header class=\"card-header\">\n                            <h3 class=\"card-title\">User&#8217;s WhatsApp Chat Window (Text):<\/h3>\n                        <\/header>\n                        <div class=\"card-content\">\n                            <p class=\"code-block\">\n                                Hello HoliThemes! Like to know more information about the https:\/\/holithemes.com\/plugins\/click-to-chat\/\n                            <\/p>\n                            <p class=\"note-text\">\n                                Variables will be replaced based on the page where the user clicks on WhatsApp Icon\/Button.\n                            <\/p>\n                        <\/div>\n                    <\/article>\n                <\/div>\n                \n                <div class=\"example-right-column\">\n                    <article class=\"visual-card scroll-reveal\">\n                        <header class=\"card-header\">\n                            <h3 class=\"card-title\">Visual Example:<\/h3>\n                        <\/header>\n                        <div class=\"card-content visual-example-content\">  \n                            <img decoding=\"async\"\n                                src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/11\/Click-to-Chat-Prefilled-Message.webp\"\n                                alt=\"WhatsApp chat window showing prefilled message example with dynamic variables replaced\"\n                                class=\"whatsapp-visual-image\"\n                                loading=\"lazy\"\n                                width=\"800\"\n                                height=\"600\"\n                            >               \n                        <\/div>\n                    <\/article>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        \n\n        <!-- WooCommerce Variables Section -->\n        <section class=\"woocommerce-section scroll-reveal\">\n            <h2 class=\"section-title\">WooCommerce Specific Variables<\/h2>\n            <p class=\"section-description\">\n                Enhance your e-commerce support with product and order specific details.\n            <\/p>\n\n            <div class=\"woocommerce-grid\">\n                <article class=\"variable-card card-gray-800 scroll-reveal\">\n                    <header class=\"card-header\">\n                        <h3 class=\"card-title\">{title}<\/h3>\n                    <\/header>\n                    <div class=\"card-content\">The Title Of The Product.<\/div>\n                <\/article>\n\n                <article class=\"variable-card card-purple-950 scroll-reveal\">\n                    <header class=\"card-header\">\n                        <h3 class=\"card-title\">{url}<\/h3>\n                    <\/header>\n                    <div class=\"card-content\">The URL Of The Product Page.<\/div>\n                <\/article>\n                \n                <article class=\"variable-card card-gray-800 scroll-reveal\">\n                    <header class=\"card-header\">\n                        <h3 class=\"card-title\">{product}<\/h3>\n                    <\/header>\n                    <div class=\"card-content\">The Product Name.<\/div>\n                <\/article>\n\n                <article class=\"variable-card card-pink-950 scroll-reveal\">\n                    <header class=\"card-header\">\n                        <h3 class=\"card-title\">{price}<\/h3>\n                    <\/header>\n                    <div class=\"card-content\">The Discounted Price Of The Product &#8211; <br>eg: 19<\/div>\n                <\/article>\n                \n                <article class=\"variable-card card-pink-950 scroll-reveal\">\n                    <header class=\"card-header\">\n                        <h3 class=\"card-title\">{{price}}<\/h3>\n                    <\/header>\n                    <div class=\"card-content\">Price with symbol, decimal &#038; thousand separator- eg: $19.99<\/div>\n                <\/article>\n                \n                <article class=\"variable-card card-gray-800 scroll-reveal\">\n                    <header class=\"card-header\">\n                        <h3 class=\"card-title\">{regular price}<\/h3>\n                    <\/header>\n                    <div class=\"card-content\">The Product Original Price.<\/div>\n                <\/article>\n\n                <article class=\"variable-card card-gray-700 scroll-reveal\">\n                    <header class=\"card-header\">\n                        <h3 class=\"card-title\">{sku}<\/h3>\n                    <\/header>\n                    <div class=\"card-content\">The Stock Keeping Unit (SKU) Of The Product.<\/div>\n                <\/article>\n\n                <article class=\"variable-card card-purple-950 scroll-reveal\">\n                    <header class=\"card-header\">\n                        <h3 class=\"card-title\">{site}<\/h3>\n                    <\/header>\n                    <div class=\"card-content\">The Site Name.<\/div>\n                <\/article>\n            <\/div>\n        <\/section>\n        <section class=\"example-section scroll-reveal\">\n            <h2 class=\"section-title\">WooCommerce: Example in Action<\/h2>\n            <p class=\"section-description\">\n                See dynamic variables auto-insert live WooCommerce data (product price, name, etc.) for truly personalized messages.\n            <\/p>\n            <div class=\"example-two-column\">\n                <div class=\"example-left-column\">\n                    <article class=\"scroll-reveal\">\n                        <header class=\"card-header\">\n                            <h3 class=\"card-title\">Admin Input:<\/h3>\n                        <\/header>\n                        <div class=\"card-content\">\n                            <p class=\"code-block\">\n                                Hello {site}! Like to know more about the {product}. Is that still available for the {price}?\n                            <\/p>\n                        <\/div>\n                    <\/article>\n                    \n                    <article class=\"scroll-reveal\">\n                        <header class=\"card-header\">\n                            <h3 class=\"card-title\">User&#8217;s WhatsApp Chat Window (Text):<\/h3>\n                        <\/header>\n                        <div class=\"card-content\">\n                            <p class=\"code-block\">\n                                Hello HoliThemes! Like to know more about the Men&#8217;s Polo T-Shirt. Is that still available for the 19.99?\n                            <\/p>\n                            <p class=\"note-text\">\n                                Variables will be replaced based on the page where the user clicks on WhatsApp Icon\/Button.\n                            <\/p>\n                        <\/div>\n                    <\/article>\n                <\/div>\n                \n                <div class=\"example-right-column\">\n                    <article class=\"visual-card scroll-reveal\">\n                        <header class=\"card-header\">\n                            <h3 class=\"card-title\">Visual Example:<\/h3>\n                        <\/header>\n                        <div class=\"card-content visual-example-content\">  \n                            <img decoding=\"async\"\n                                src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/11\/Click-to-Chat-WooCommerce-Variables.webp\"\n                                alt=\"WhatsApp chat window showing prefilled message example with dynamic WooCommerce variables replaced\"\n                                class=\"whatsapp-visual-image\"\n                                loading=\"lazy\"\n                                width=\"800\"\n                                height=\"600\"\n                            >               \n                        <\/div>\n                    <\/article>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- Form Data Integration Section -->\n        <section class=\"example-section scroll-reveal\">\n            <h2 class=\"section-title\">Form Data Integration<\/h2>\n            <p class=\"section-description\">\n                Add form data to prefilled messages and send directly to WhatsApp.\n            <\/p>\n            <div class=\"example-two-column\">\n                <div class=\"example-left-column\">\n                    <article class=\"scroll-reveal\">\n                        <header class=\"card-header card-header-center\">\n                            <h3 class=\"card-title\">Example Form Data:<\/h3>\n                        <\/header>\n                        <div class=\"card-content\">\n                            <img decoding=\"async\"\n                                src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/09\/greetings-form-2.webp\"\n                                alt=\"Example form with fields for name, email, and message that can be sent to WhatsApp\"\n                                class=\"whatsapp-visual-image\"\n                                loading=\"lazy\"\n                                width=\"350\"\n                                height=\"450\"\n                                \n                            >\n                        <\/div>\n                    <\/article>\n                <\/div>\n                \n                <div class=\"example-right-column\">\n                    <article class=\"visual-card scroll-reveal\">\n                        <header class=\"card-header\">\n                            <h3 class=\"card-title\">Visual Example:<\/h3>\n                        <\/header>\n                        <div class=\"card-content visual-example-content\">  \n                            <img decoding=\"async\"\n                                src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/09\/form-prefilled-mockup.webp\"\n                                alt=\"WhatsApp chat mockup showing form data automatically populated in the message field\"\n                                class=\"whatsapp-visual-image\"\n                                loading=\"lazy\"\n                                width=\"800\"\n                                height=\"600\"\n                            >\n                            \n                        <\/div>\n                        <div class=\"card-content\">\n                            <p class=\"note-text\">\n                                if we check <strong>&#8220;Add to Prefilled Message&#8221;<\/strong> check box in the Form data admin settings it will automatically populate and send to WhatsApp. &#8211; <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/greetings-form\/\" class=\"link\">More About Greeting Form<\/a>\n                            <\/p>\n                        <\/div>\n                    <\/article>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- Call to Action Section -->\n        <section class=\"example-section scroll-reveal\">\n            <div class=\"example-container\">\n                <article class=\"scroll-reveal\">\n                    <header class=\"card-header\">\n                        <h2 class=\"section-title\">\ud83d\ude80 Ready to Boost Your Conversions?<\/h2>\n                    <\/header>\n                    <div class=\"card-content\">\n                        <p class=\"section-description\">\n                            Start using smart prefilled messages today and watch your customer engagement soar!\n                        <\/p>\n                        <div class=\"button-container cta-buttons\">\n                            <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/docs\/prefilled-message\" class=\"whatsapp-demo-button\" aria-label=\"Get started with prefilled messages documentation\">\n                                View Docs\n                                <svg class=\"arrow-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                                    <path d=\"M5 12h14\"\/>\n                                    <path d=\"m12 5 7 7-7 7\"\/>\n                                <\/svg>    \n                            <\/a>\n                            <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/pricing\/\" class=\"cta-button\" aria-label=\"Upgrade to Pro version\">\n                                Upgrade Pro \ud83c\udf1f\n                            <\/a>\n                        <\/div>\n                    <\/div>\n                <\/article>\n            <\/div>\n        <\/section>\n    <\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Prefilled Messages Guide conversations, save user time, and boost engagement with predefined chat messages. Get Started Why Use Pre-filled Messages? The Pre-filled message is a text that appears automatically in the WhatsApp chat window when the page visitor clicks on the WhatsApp button\/image. Save Time Eliminate repetitive typing for your customers. They can start conversations [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"default","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":"default","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":["prefill.min__20251127_114623.css"],"js":["prefill.min__20251127_114623.js"],"callbacks":["dequeue_astra"],"js_attr":{"prefill.min__20251127_114623.js":{"attr":"","footer":"1"}}}},"categories":[53,65],"tags":[],"class_list":["post-29","post","type-post","status-publish","format-standard","hentry","category-features","category-page-by-ht-design"],"_links":{"self":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts\/29","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/comments?post=29"}],"version-history":[{"count":0,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts\/29\/revisions"}],"wp:attachment":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/media?parent=29"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/categories?post=29"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/tags?post=29"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}