{"id":7354,"date":"2026-04-14T14:48:02","date_gmt":"2026-04-14T09:18:02","guid":{"rendered":"https:\/\/holithemes.com\/plugins\/click-to-chat\/?page_id=7354"},"modified":"2026-04-14T14:52:13","modified_gmt":"2026-04-14T09:22:13","slug":"docs","status":"publish","type":"page","link":"https:\/\/holithemes.com\/plugins\/click-to-chat\/docs\/","title":{"rendered":"docs"},"content":{"rendered":"\n\n\n<div class=\"docs-wrapper\">\n  <!-- Hero Section -->\n  <section class=\"hero\" id=\"hero\">\n    <div class=\"hero-inner\">\n      <div class=\"hero-orb hero-orb-1\"><\/div>\n      <div class=\"hero-orb hero-orb-2\"><\/div>\n    <\/div>\n    <div class=\"hero-content fade-in\">\n      <h1 class=\"hero-title\">Documentation<\/h1>\n      <p class=\"hero-subtitle\">Everything you need to build, deploy, and scale your application. Explore guides, references, and examples.<\/p>\n    <\/div>\n\n    <!-- Search Bar (overlapping hero bottom) -->\n    <div class=\"search-wrapper\">\n      <div class=\"search-bar\" id=\"searchBar\">\n        <svg class=\"search-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"m21 21-4.35-4.35\"\/>\n        <\/svg>\n        <input type=\"text\" id=\"searchInput\" placeholder=\"Search documentation...\" autocomplete=\"off\" \/>\n        <button class=\"clear-btn\" id=\"clearBtn\" aria-label=\"Clear search\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M18 6 6 18\"\/><path d=\"m6 6 12 12\"\/>\n          <\/svg>\n        <\/button>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Main Content -->\n  <main class=\"main-content\">\n\n    <!-- Filter Pills -->\n    <div class=\"filter-pills\" id=\"filterPills\"><\/div>\n\n    <!-- Card Grid -->\n    <div class=\"card-grid\" id=\"cardGrid\">\n      <!-- 4: Greetings Form -->\n      <div class=\"doc-card\" data-id=\"4\" data-index=\"0\" data-tabs=\"Greetings,Greetings Form\" data-keywords=\"Form,Leads\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#f97316,#fbbf24)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"\/><path d=\"M3 9h18M9 21V9\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Greetings Form<\/h3>\n        <p class=\"card-desc\">Create contact forms within greeting messages for lead generation.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Form<\/span>\n          <span class=\"card-tag\">Leads<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/docs\/greetings-form\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#f97316,#fbbf24)\">Read More<\/a>\n      <\/div>\n\n      <!-- 5: Multi Agent -->\n      <div class=\"doc-card\" data-id=\"5\" data-index=\"1\" data-tabs=\"Greetings,Multi Agent\" data-keywords=\"Multi Agent,Agents\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#8b5cf6,#d946ef)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Multi Agent<\/h3>\n        <p class=\"card-desc\">Let users choose the right agent or department depends on agents availability.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Multi Agent<\/span>\n          <span class=\"card-tag\">Agents<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/docs\/multi-agent\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#8b5cf6,#d946ef)\">Read More<\/a>\n      <\/div>\n\n      <!-- 13: Business Hours -->\n      <div class=\"doc-card\" data-id=\"13\" data-index=\"2\" data-tabs=\"Display Settings,PRO\" data-keywords=\"Business Hours,Online,Offline\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#0891b2,#0ea5e9)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Business Hours &#8211; Online\/Offline<\/h3>\n        <p class=\"card-desc\">Show or hide the chat widget based on your business hours and availability.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Business Hours<\/span>\n          <span class=\"card-tag\">Online<\/span>\n          <span class=\"card-tag\">Offline<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/docs\/business-hours-online-offline\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#0891b2,#0ea5e9)\">Read More<\/a>\n      <\/div>\n\n      <!-- 19: Random Number -->\n      <div class=\"doc-card\" data-id=\"19\" data-index=\"3\" data-tabs=\"Widget Options,PRO\" data-keywords=\"Random,Number,Load Balance\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#7c3aed,#db2777)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"16 3 21 3 21 8\"\/><line x1=\"4\" x2=\"21\" y1=\"20\" y2=\"3\"\/><polyline points=\"21 16 21 21 16 21\"\/><line x1=\"15\" x2=\"21\" y1=\"15\" y2=\"21\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Random Number<\/h3>\n        <p class=\"card-desc\">Route chats to a random WhatsApp number from a list for load balancing.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Random<\/span>\n          <span class=\"card-tag\">Number<\/span>\n          <span class=\"card-tag\">Load Balance<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/docs\/random-number\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#7c3aed,#db2777)\">Read More<\/a>\n      <\/div>\n\n      <!-- 33: Google Ads Conversion -->\n      <div class=\"doc-card\" data-id=\"33\" data-index=\"4\" data-tabs=\"Analytics\" data-keywords=\"Google Ads,Conversion,Tracking\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#10b981,#059669)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2v20\"\/><path d=\"m17 5-5-3-5 3\"\/><path d=\"m17 19-5 3-5-3\"\/><path d=\"M2 12h20\"\/><path d=\"m5 7-3 5 3 5\"\/><path d=\"m19 7 3 5-3 5\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Google Ads Conversion<\/h3>\n        <p class=\"card-desc\">Measure the impact of your WhatsApp chats on Google Ads conversions.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Google Ads<\/span>\n          <span class=\"card-tag\">Conversion<\/span>\n          <span class=\"card-tag\">Tracking<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/google-ads-conversion\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#10b981,#059669)\">Read More<\/a>\n      <\/div>\n\n      <!-- 30: Greetings Actions -->\n      <div class=\"doc-card\" data-id=\"30\" data-index=\"5\" data-tabs=\"Greetings,PRO\" data-keywords=\"Greetings,Actions,Automation\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#6366f1,#818cf8)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m5 11 4-7\"\/><path d=\"m19 13-4 7\"\/><path d=\"M12 2v20\"\/><path d=\"m5 18 7-2 7 2\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Greetings Actions<\/h3>\n        <p class=\"card-desc\">Configure automated actions for your greeting messages.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Greetings<\/span>\n          <span class=\"card-tag\">Actions<\/span>\n          <span class=\"card-tag\">Automation<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/greetings-actions\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#6366f1,#818cf8)\">Read More<\/a>\n      <\/div>\n\n      <!-- 1: Greetings Main Page -->\n      <div class=\"doc-card\" data-id=\"1\" data-index=\"6\" data-tabs=\"Greetings\" data-keywords=\"Greetings,Dialogs\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#6366f1,#818cf8)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Greetings Main Page<\/h3>\n        <p class=\"card-desc\">Configure main greeting messages and welcome chat options.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Greetings<\/span>\n          <span class=\"card-tag\">Dialogs<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/docs\/greetings\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#6366f1,#818cf8)\">Read More<\/a>\n      <\/div>\n\n      <!-- 2: Greetings 1 -->\n      <div class=\"doc-card\" data-id=\"2\" data-index=\"7\" data-tabs=\"Greetings\" data-keywords=\"Greetings,Customizable design\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#ec4899,#f43f5e)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Greetings 1<\/h3>\n        <p class=\"card-desc\">Set up basic greeting messages for your chat widget.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Greetings<\/span>\n          <span class=\"card-tag\">Customizable design<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/docs\/greetings-1\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#ec4899,#f43f5e)\">Read More<\/a>\n      <\/div>\n\n      <!-- 3: Greetings 2 -->\n      <div class=\"doc-card\" data-id=\"3\" data-index=\"8\" data-tabs=\"Greetings\" data-keywords=\"Greetings,content specific\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#14b8a6,#06b6d4)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Greetings 2<\/h3>\n        <p class=\"card-desc\">Advanced greeting options with multiple message types.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Greetings<\/span>\n          <span class=\"card-tag\">content specific<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/docs\/greetings-2\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#14b8a6,#06b6d4)\">Read More<\/a>\n      <\/div>\n\n      <!-- 10: Custom URL -->\n      <div class=\"doc-card\" data-id=\"10\" data-index=\"9\" data-tabs=\"Widget Options\" data-keywords=\"URL,Link,Custom\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#f59e0b,#ef4444)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"\/><path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Custom URL<\/h3>\n        <p class=\"card-desc\">Set a custom URL for your WhatsApp chat button link.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">URL<\/span>\n          <span class=\"card-tag\">Link<\/span>\n          <span class=\"card-tag\">Custom<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/docs\/custom-url\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#f59e0b,#ef4444)\">Read More<\/a>\n      <\/div>\n\n      <!-- 6: Greeting Form Date Field -->\n      <div class=\"doc-card\" data-id=\"6\" data-index=\"10\" data-tabs=\"Greetings,Greetings Form\" data-keywords=\"Form,Date,Field\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#a855f7,#ec4899)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\" ry=\"2\"\/><line x1=\"16\" x2=\"16\" y1=\"2\" y2=\"6\"\/><line x1=\"8\" x2=\"8\" y1=\"2\" y2=\"6\"\/><line x1=\"3\" x2=\"21\" y1=\"10\" y2=\"10\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Greeting Form Date Field<\/h3>\n        <p class=\"card-desc\">Add a date picker field to your greeting contact forms.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Form<\/span>\n          <span class=\"card-tag\">Date<\/span>\n          <span class=\"card-tag\">Field<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/docs\/greetings-form-date-field\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#a855f7,#ec4899)\">Read More<\/a>\n      <\/div>\n\n      <!-- 7: WooCommerce -->\n      <div class=\"doc-card\" data-id=\"7\" data-index=\"11\" data-tabs=\"WooCommerce\" data-keywords=\"WooCommerce,shop,store\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#7c3aed,#9333ea)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"9\" cy=\"21\" r=\"1\"\/><circle cx=\"20\" cy=\"21\" r=\"1\"\/><path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">WooCommerce<\/h3>\n        <p class=\"card-desc\">Integrate WhatsApp chat with WooCommerce product pages.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">WooCommerce<\/span>\n          <span class=\"card-tag\">shop<\/span>\n          <span class=\"card-tag\">store<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/docs\/woocommerce\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#7c3aed,#9333ea)\">Read More<\/a>\n      <\/div>\n\n      <!-- 8: Multilingual -->\n      <div class=\"doc-card\" data-id=\"8\" data-index=\"12\" data-tabs=\"Multilingual\" data-keywords=\"Translation,WPML,Polylang\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#0ea5e9,#3b82f6)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Multilingual<\/h3>\n        <p class=\"card-desc\">Configure multilingual support with WPML and Polylang.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Translation<\/span>\n          <span class=\"card-tag\">WPML<\/span>\n          <span class=\"card-tag\">Polylang<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/docs\/multilingual\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#0ea5e9,#3b82f6)\">Read More<\/a>\n      <\/div>\n\n      <!-- 9: PreFilled Message -->\n      <div class=\"doc-card\" data-id=\"9\" data-index=\"13\" data-tabs=\"Widget Options\" data-keywords=\"Message,Default\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#db2777,#9333ea)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">PreFilled Message<\/h3>\n        <p class=\"card-desc\">Set default prefilled messages for WhatsApp chat.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Message<\/span>\n          <span class=\"card-tag\">Default<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/docs\/pre-filled-message\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#db2777,#9333ea)\">Read More<\/a>\n      <\/div>\n\n      <!-- 11: List of Styles -->\n      <div class=\"doc-card\" data-id=\"11\" data-index=\"14\" data-tabs=\"Styles\" data-keywords=\"Styles,widgets\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#f97316,#ef4444)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"13.5\" cy=\"6.5\" r=\".5\" fill=\"currentColor\"\/><circle cx=\"17.5\" cy=\"10.5\" r=\".5\" fill=\"currentColor\"\/><circle cx=\"8.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\"\/><circle cx=\"6.5\" cy=\"12.5\" r=\".5\" fill=\"currentColor\"\/><path d=\"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">List of Styles<\/h3>\n        <p class=\"card-desc\">Browse and select from various chat widget styles.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Styles<\/span>\n          <span class=\"card-tag\">widgets<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/docs\/list-of-styles\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#f97316,#ef4444)\">Read More<\/a>\n      <\/div>\n\n      <!-- 12: Show\/hide Styles -->\n      <div class=\"doc-card\" data-id=\"12\" data-index=\"15\" data-tabs=\"Display Settings\" data-keywords=\"Display,Visibility,Hide\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#10b981,#14b8a6)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"\/><circle cx=\"12\" cy=\"12\" r=\"3\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Show\/hide Styles<\/h3>\n        <p class=\"card-desc\">Control when and where to display your chat widget.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Display<\/span>\n          <span class=\"card-tag\">Visibility<\/span>\n          <span class=\"card-tag\">Hide<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/docs\/show-hide-styles\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#10b981,#14b8a6)\">Read More<\/a>\n      <\/div>\n\n      <!-- 14: Load JS files -->\n      <div class=\"doc-card\" data-id=\"14\" data-index=\"16\" data-tabs=\"Debug &#038; Troubleshoot\" data-keywords=\"JavaScript,Performance\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#eab308,#84cc16)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 12h-4l-3 9L9 3l-3 9H2\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Load JS files<\/h3>\n        <p class=\"card-desc\">Optimize JavaScript loading for better performance.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">JavaScript<\/span>\n          <span class=\"card-tag\">Performance<\/span>\n        <\/div>\n        <button class=\"card-read-more\" style=\"background: linear-gradient(135deg,#eab308,#84cc16)\">Read More<\/button>\n      <\/div>\n\n      <!-- 20: Clear Cache -->\n      <div class=\"doc-card\" data-id=\"20\" data-index=\"17\" data-tabs=\"Debug &#038; Troubleshoot\" data-keywords=\"Cache,Refresh,Clear\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#ef4444,#dc2626)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z\"\/><path d=\"M12 8v4\"\/><path d=\"M12 16h.01\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Clear Cache<\/h3>\n        <p class=\"card-desc\">Clear the plugin cache and resolve display issues or non-reflecting changes.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Cache<\/span>\n          <span class=\"card-tag\">Refresh<\/span>\n          <span class=\"card-tag\">Clear<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/clear-cache\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#ef4444,#dc2626)\">Read More<\/a>\n      <\/div>\n\n      <!-- 34: Google Tag Manager -->\n      <div class=\"doc-card\" data-id=\"34\" data-index=\"18\" data-tabs=\"Analytics\" data-keywords=\"GTM,DataLayer,Tracking\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#f59e0b,#d97706)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"\/><path d=\"M12 8v8\"\/><path d=\"M8 12h8\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Google Tag Manager<\/h3>\n        <p class=\"card-desc\">Use GTM and Data Layer to send WhatsApp events to various platforms.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">GTM<\/span>\n          <span class=\"card-tag\">DataLayer<\/span>\n          <span class=\"card-tag\">Tracking<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/create-event-from-google-tag-manager-using-datalayer-send-to-google-analytics\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#f59e0b,#d97706)\">Read More<\/a>\n      <\/div>\n\n      <!-- 35: Webhooks -->\n      <div class=\"doc-card\" data-id=\"35\" data-index=\"19\" data-tabs=\"Analytics\" data-keywords=\"Webhooks,Integration,Automation\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#8b5cf6,#7c3aed)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"\/><path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Webhooks<\/h3>\n        <p class=\"card-desc\">Send WhatsApp click data to external apps and services via Webhooks.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Webhooks<\/span>\n          <span class=\"card-tag\">Integration<\/span>\n          <span class=\"card-tag\">Automation<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/webhooks\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#8b5cf6,#7c3aed)\">Read More<\/a>\n      <\/div>\n\n      <!-- 36: WPML Translation -->\n      <div class=\"doc-card\" data-id=\"36\" data-index=\"20\" data-tabs=\"Multilingual\" data-keywords=\"WPML,Translation,Multilingual\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#0ea5e9,#3b82f6)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"\/><path d=\"M2 12h20\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">WPML Translation<\/h3>\n        <p class=\"card-desc\">Translate your WhatsApp chat settings and messages using the WPML plugin.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">WPML<\/span>\n          <span class=\"card-tag\">Translation<\/span>\n          <span class=\"card-tag\">Multilingual<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/translate-click-to-chat-settings-using-wpml-plugin\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#0ea5e9,#3b82f6)\">Read More<\/a>\n      <\/div>\n\n      <!-- 37: Polylang Translation -->\n      <div class=\"doc-card\" data-id=\"37\" data-index=\"21\" data-tabs=\"Multilingual\" data-keywords=\"Polylang,Translation,Multilingual\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#6366f1,#818cf8)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"\/><path d=\"M2 12h20\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Polylang Translation<\/h3>\n        <p class=\"card-desc\">Translate Click to Chat settings and content using the Polylang plugin.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Polylang<\/span>\n          <span class=\"card-tag\">Translation<\/span>\n          <span class=\"card-tag\">Multilingual<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/translate-click-to-chat-settings-using-polylang-plugin\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#6366f1,#818cf8)\">Read More<\/a>\n      <\/div>\n\n      <!-- 38: Animations -->\n      <div class=\"doc-card\" data-id=\"38\" data-index=\"22\" data-tabs=\"Widget Options\" data-keywords=\"Animations,Effects,Attention\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#f43f5e,#fb7185)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Animations<\/h3>\n        <p class=\"card-desc\">Add attention-grabbing animations to your WhatsApp chat button.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Animations<\/span>\n          <span class=\"card-tag\">Effects<\/span>\n          <span class=\"card-tag\">Attention<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/animations\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#f43f5e,#fb7185)\">Read More<\/a>\n      <\/div>\n\n      <!-- 39: Notification Badge -->\n      <div class=\"doc-card\" data-id=\"39\" data-index=\"23\" data-tabs=\"Widget Options\" data-keywords=\"Badge,Notification,Engagement\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#fb923c,#f97316)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"\/><path d=\"M13.73 21a2 2 0 0 1-3.46 0\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Notification Badge<\/h3>\n        <p class=\"card-desc\">Show a notification badge on the chat icon to increase user engagement.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Badge<\/span>\n          <span class=\"card-tag\">Notification<\/span>\n          <span class=\"card-tag\">Engagement<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/notification-badge\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#fb923c,#f97316)\">Read More<\/a>\n      <\/div>\n\n      <!-- 40: Widget Position -->\n      <div class=\"doc-card\" data-id=\"40\" data-index=\"24\" data-tabs=\"Widget Options\" data-keywords=\"Position,Layout,Placement\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#84cc16,#4d7c0f)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"\/><path d=\"M21 9H3\"\/><path d=\"M21 15H3\"\/><path d=\"M9 3v18\"\/><path d=\"M15 3v18\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Widget Position<\/h3>\n        <p class=\"card-desc\">Control exactly where the WhatsApp chat widget appears on your website.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Position<\/span>\n          <span class=\"card-tag\">Layout<\/span>\n          <span class=\"card-tag\">Placement<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/position-to-place\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#84cc16,#4d7c0f)\">Read More<\/a>\n      <\/div>\n\n      <!-- 41: Customize Widget -->\n      <div class=\"doc-card\" data-id=\"41\" data-index=\"25\" data-tabs=\"Widget Options\" data-keywords=\"Customize,Brand,Style\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#a855f7,#7c3aed)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Customize Widget<\/h3>\n        <p class=\"card-desc\">Extensive customization options to match the widget with your brand.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Customize<\/span>\n          <span class=\"card-tag\">Brand<\/span>\n          <span class=\"card-tag\">Style<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/customize-styles\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#a855f7,#7c3aed)\">Read More<\/a>\n      <\/div>\n\n      <!-- 42: Call to Action -->\n      <div class=\"doc-card\" data-id=\"42\" data-index=\"26\" data-tabs=\"Widget Options\" data-keywords=\"CTA,Button,Text\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#ec4899,#db2777)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Call to Action<\/h3>\n        <p class=\"card-desc\">Create compelling call-to-action text for your WhatsApp buttons.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">CTA<\/span>\n          <span class=\"card-tag\">Button<\/span>\n          <span class=\"card-tag\">Text<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/call-to-action\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#ec4899,#db2777)\">Read More<\/a>\n      <\/div>\n\n      <!-- 43: Shortcodes -->\n      <div class=\"doc-card\" data-id=\"43\" data-index=\"27\" data-tabs=\"Widget Options\" data-keywords=\"Shortcodes,Content,Flexible\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#06b6d4,#0891b2)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"16 18 22 12 16 6\"\/><polyline points=\"8 6 2 12 8 18\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Shortcodes<\/h3>\n        <p class=\"card-desc\">Use shortcodes to place WhatsApp chat buttons anywhere in your content.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Shortcodes<\/span>\n          <span class=\"card-tag\">Content<\/span>\n          <span class=\"card-tag\">Flexible<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/shortcodes-chat\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#06b6d4,#0891b2)\">Read More<\/a>\n      <\/div>\n\n      <!-- 44: URL Structure -->\n      <div class=\"doc-card\" data-id=\"44\" data-index=\"28\" data-tabs=\"Widget Options\" data-keywords=\"URL,Structure,Links\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#64748b,#475569)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"\/><path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">URL Structure<\/h3>\n        <p class=\"card-desc\">Understand the URL structure used for WhatsApp chat links.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">URL<\/span>\n          <span class=\"card-tag\">Structure<\/span>\n          <span class=\"card-tag\">Links<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/url-structure\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#64748b,#475569)\">Read More<\/a>\n      <\/div>\n\n      <!-- 45: Display by Country -->\n      <div class=\"doc-card\" data-id=\"45\" data-index=\"29\" data-tabs=\"Display Settings,PRO\" data-keywords=\"Country,Geo,Location\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#10b981,#059669)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Display by Country<\/h3>\n        <p class=\"card-desc\">Show or hide the WhatsApp chat widget based on user location.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Country<\/span>\n          <span class=\"card-tag\">Geo<\/span>\n          <span class=\"card-tag\">Location<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/display-based-on-country\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#10b981,#059669)\">Read More<\/a>\n      <\/div>\n\n      <!-- 46: Login Status Display -->\n      <div class=\"doc-card\" data-id=\"46\" data-index=\"30\" data-tabs=\"Display Settings,PRO\" data-keywords=\"Login,Status,Visibility\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#3b82f6,#1d4ed8)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"\/><circle cx=\"12\" cy=\"7\" r=\"4\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Login Status Display<\/h3>\n        <p class=\"card-desc\">Control widget visibility based on user authentication status.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Login<\/span>\n          <span class=\"card-tag\">Status<\/span>\n          <span class=\"card-tag\">Visibility<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/display-based-on-user-login-status\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#3b82f6,#1d4ed8)\">Read More<\/a>\n      <\/div>\n\n      <!-- 47: Time & Scroll Triggers -->\n      <div class=\"doc-card\" data-id=\"47\" data-index=\"31\" data-tabs=\"Display Settings\" data-keywords=\"Triggers,Time,Scroll\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#eb5e28,#9b2226)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Time &#038; Scroll Triggers<\/h3>\n        <p class=\"card-desc\">Trigger the WhatsApp chat widget based on time delay or scroll depth.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Triggers<\/span>\n          <span class=\"card-tag\">Time<\/span>\n          <span class=\"card-tag\">Scroll<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/time-delay-scroll\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#eb5e28,#9b2226)\">Read More<\/a>\n      <\/div>\n\n      <!-- 48: Hide when Offline -->\n      <div class=\"doc-card\" data-id=\"48\" data-index=\"32\" data-tabs=\"Display Settings\" data-keywords=\"Offline,Hide,Availability\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#6b7280,#374151)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\"\/><line x1=\"1\" x2=\"23\" y1=\"1\" y2=\"23\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Hide when Offline<\/h3>\n        <p class=\"card-desc\">Automatically hide the chat widget when you are outside business hours.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Offline<\/span>\n          <span class=\"card-tag\">Hide<\/span>\n          <span class=\"card-tag\">Availability<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/offline-hide\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#6b7280,#374151)\">Read More<\/a>\n      <\/div>\n\n      <!-- 49: Device Based Display -->\n      <div class=\"doc-card\" data-id=\"49\" data-index=\"33\" data-tabs=\"Display Settings\" data-keywords=\"Mobile,Desktop,Device\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#6366f1,#4f46e5)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"20\" height=\"14\" x=\"2\" y=\"3\" rx=\"2\"\/><line x1=\"8\" x2=\"16\" y1=\"21\" y2=\"21\"\/><line x1=\"12\" x2=\"12\" y1=\"17\" y2=\"21\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Device Based Display<\/h3>\n        <p class=\"card-desc\">Show or hide the WhatsApp chat widget specifically for mobile or desktop.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Mobile<\/span>\n          <span class=\"card-tag\">Desktop<\/span>\n          <span class=\"card-tag\">Device<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/show-hide-on-mobile-desktop\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#6366f1,#4f46e5)\">Read More<\/a>\n      <\/div>\n\n      <!-- 50: Post-ID Based Display -->\n      <div class=\"doc-card\" data-id=\"50\" data-index=\"34\" data-tabs=\"Display Settings\" data-keywords=\"Post ID,Visibility,Page\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#f97316,#ea580c)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/><polyline points=\"14 2 14 8 20 8\"\/><line x1=\"16\" x2=\"8\" y1=\"13\" y2=\"13\"\/><line x1=\"16\" x2=\"8\" y1=\"17\" y2=\"17\"\/><polyline points=\"10 9 9 9 8 9\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Post-ID Based Display<\/h3>\n        <p class=\"card-desc\">Fine-tune widget visibility by specifying exact WordPress post or page IDs.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Post ID<\/span>\n          <span class=\"card-tag\">Visibility<\/span>\n          <span class=\"card-tag\">Page<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/how-to-show-or-hide-the-chat-widget-based-on-post-id\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#f97316,#ea580c)\">Read More<\/a>\n      <\/div>\n\n      <!-- 51: Show on Selected Pages -->\n      <div class=\"doc-card\" data-id=\"51\" data-index=\"35\" data-tabs=\"Display Settings\" data-keywords=\"Show,Pages,Whitelist\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#10b981,#059669)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"\/><circle cx=\"12\" cy=\"12\" r=\"3\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Show on Selected Pages<\/h3>\n        <p class=\"card-desc\">Force the WhatsApp chat widget to only appear on specific pages.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Show<\/span>\n          <span class=\"card-tag\">Pages<\/span>\n          <span class=\"card-tag\">Whitelist<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/show-only-on-selected-pages\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#10b981,#059669)\">Read More<\/a>\n      <\/div>\n\n      <!-- 52: Hide on Selected Pages -->\n      <div class=\"doc-card\" data-id=\"52\" data-index=\"36\" data-tabs=\"Display Settings\" data-keywords=\"Hide,Pages,Blacklist\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#f43f5e,#e11d48)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\"\/><line x1=\"1\" x2=\"23\" y1=\"1\" y2=\"23\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Hide on Selected Pages<\/h3>\n        <p class=\"card-desc\">Prevent the WhatsApp chat widget from appearing on specific pages.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Hide<\/span>\n          <span class=\"card-tag\">Pages<\/span>\n          <span class=\"card-tag\">Blacklist<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/hide-only-on-selected-pages\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#f43f5e,#e11d48)\">Read More<\/a>\n      <\/div>\n\n      <!-- 53: Single Product Pages -->\n      <div class=\"doc-card\" data-id=\"53\" data-index=\"37\" data-tabs=\"WooCommerce\" data-keywords=\"WooCommerce,Product,Single\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#7c3aed,#6d28d9)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20.97 8c.03.33.03.66.03 1a11 11 0 1 1-22 0c0-.34 0-.67.03-1h21.94Z\"\/><path d=\"M12 2v20\"\/><path d=\"m5 11 7-7 7 7\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Single Product Pages<\/h3>\n        <p class=\"card-desc\">Configure WhatsApp chat specifically for your WooCommerce single product pages.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">WooCommerce<\/span>\n          <span class=\"card-tag\">Product<\/span>\n          <span class=\"card-tag\">Single<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/woocommerce-single-product-pages\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#7c3aed,#6d28d9)\">Read More<\/a>\n      <\/div>\n\n      <!-- 54: WhatsApp in Single Product Page -->\n      <div class=\"doc-card\" data-id=\"54\" data-index=\"38\" data-tabs=\"WooCommerce\" data-keywords=\"WooCommerce,WhatsApp,Button\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#8b5cf6,#7c3aed)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"9\" cy=\"21\" r=\"1\"\/><circle cx=\"20\" cy=\"21\" r=\"1\"\/><path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">WhatsApp in Single Product Page<\/h3>\n        <p class=\"card-desc\">Add a direct WhatsApp button to every product page in your WooCommerce store.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">WooCommerce<\/span>\n          <span class=\"card-tag\">WhatsApp<\/span>\n          <span class=\"card-tag\">Button<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/add-whatsapp-in-woocommerce-single-product-pages\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#8b5cf6,#7c3aed)\">Read More<\/a>\n      <\/div>\n\n      <!-- 55: WhatsApp in Shop Page -->\n      <div class=\"doc-card\" data-id=\"55\" data-index=\"39\" data-tabs=\"WooCommerce\" data-keywords=\"WooCommerce,Shop,Archive\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#a855f7,#9333ea)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"20\" height=\"14\" x=\"2\" y=\"3\" rx=\"2\"\/><line x1=\"3\" x2=\"21\" y1=\"10\" y2=\"10\"\/><path d=\"M10 21h4\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">WhatsApp in Shop Page<\/h3>\n        <p class=\"card-desc\">Enable WhatsApp chat buttons on the main WooCommerce shop listing page.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">WooCommerce<\/span>\n          <span class=\"card-tag\">Shop<\/span>\n          <span class=\"card-tag\">Archive<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/whatsapp-chat-in-woocommerce-shop-page\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#a855f7,#9333ea)\">Read More<\/a>\n      <\/div>\n\n      <!-- 56: WooCommerce Prefilled Message -->\n      <div class=\"doc-card\" data-id=\"56\" data-index=\"40\" data-tabs=\"WooCommerce\" data-keywords=\"WooCommerce,Message,Prefilled\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#db2777,#be185d)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"\/><path d=\"M8 9h8\"\/><path d=\"M8 13h6\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">WooCommerce Prefilled Message<\/h3>\n        <p class=\"card-desc\">Set custom prefilled messages that include product details automatically.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">WooCommerce<\/span>\n          <span class=\"card-tag\">Message<\/span>\n          <span class=\"card-tag\">Prefilled<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/woocommerce_pre-filled-message\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#db2777,#be185d)\">Read More<\/a>\n      <\/div>\n\n      <!-- 57: WooCommerce Call to Action -->\n      <div class=\"doc-card\" data-id=\"57\" data-index=\"41\" data-tabs=\"WooCommerce\" data-keywords=\"WooCommerce,CTA,Product\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#ec4899,#db2777)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"\/><rect width=\"8\" height=\"4\" x=\"8\" y=\"2\" rx=\"1\" ry=\"1\"\/><path d=\"M9 14h6\"\/><path d=\"M9 18h6\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">WooCommerce Call to Action<\/h3>\n        <p class=\"card-desc\">Customize the call-to-action text for product-related WhatsApp buttons.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">WooCommerce<\/span>\n          <span class=\"card-tag\">CTA<\/span>\n          <span class=\"card-tag\">Product<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/woocommerce_call-to-action\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#ec4899,#db2777)\">Read More<\/a>\n      <\/div>\n\n      <!-- 58: Page Level Settings -->\n      <div class=\"doc-card\" data-id=\"58\" data-index=\"42\" data-tabs=\"PRO\" data-keywords=\"Page Level,Override,PRO\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#d97706,#b45309)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"\/><path d=\"M3 9h18\"\/><path d=\"M9 21V9\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Page Level Settings<\/h3>\n        <p class=\"card-desc\">Override global settings with specific configurations for individual pages.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Page Level<\/span>\n          <span class=\"card-tag\">Override<\/span>\n          <span class=\"card-tag\">PRO<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/change-values-at-page-level\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#d97706,#b45309)\">Read More<\/a>\n      <\/div>\n\n      <!-- 59: Greetings Page Level -->\n      <div class=\"doc-card\" data-id=\"59\" data-index=\"43\" data-tabs=\"Greetings,PRO\" data-keywords=\"Greetings,Page Level,PRO\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#ea580c,#c2410c)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"\/><path d=\"M12 7v10\"\/><path d=\"M8 11h8\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Greetings Page Level<\/h3>\n        <p class=\"card-desc\">Customize greeting messages and behavior at the individual page level.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Greetings<\/span>\n          <span class=\"card-tag\">Page Level<\/span>\n          <span class=\"card-tag\">PRO<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/greetings-page-level-settings\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#ea580c,#c2410c)\">Read More<\/a>\n      <\/div>\n\n      <!-- 31: Google Analytics -->\n      <div class=\"doc-card\" data-id=\"31\" data-index=\"44\" data-tabs=\"Analytics\" data-keywords=\"Analytics,GA4,Tracking\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#0ea5e9,#2563eb)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 3v18h18\"\/><path d=\"m19 9-5 5-4-4-3 3\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Google Analytics<\/h3>\n        <p class=\"card-desc\">Track WhatsApp clicks and user interactions with Google Analytics.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Analytics<\/span>\n          <span class=\"card-tag\">GA4<\/span>\n          <span class=\"card-tag\">Tracking<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/google-analytics\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#0ea5e9,#2563eb)\">Read More<\/a>\n      <\/div>\n\n      <!-- 32: Meta Pixel -->\n      <div class=\"doc-card\" data-id=\"32\" data-index=\"45\" data-tabs=\"Analytics\" data-keywords=\"Meta,Pixel,Facebook,Tracking\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#3b82f6,#1d4ed8)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Meta Pixel<\/h3>\n        <p class=\"card-desc\">Connect Meta Pixel to track conversions and optimize ad campaigns.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Meta<\/span>\n          <span class=\"card-tag\">Pixel<\/span>\n          <span class=\"card-tag\">Facebook<\/span>\n          <span class=\"card-tag\">Tracking<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/facebook-pixel\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#3b82f6,#1d4ed8)\">Read More<\/a>\n      <\/div>\n\n      <!-- 60: Custom Element -->\n      <div class=\"doc-card\" data-id=\"60\" data-index=\"46\" data-tabs=\"Widget Options\" data-keywords=\"Custom,Element,Trigger,PRO\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#dc2626,#991b1b)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"16 18 22 12 16 6\"\/><polyline points=\"8 6 2 12 8 18\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Custom Element<\/h3>\n        <p class=\"card-desc\">Convert any existing website element into a WhatsApp chat trigger.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Custom<\/span>\n          <span class=\"card-tag\">Element<\/span>\n          <span class=\"card-tag\">Trigger<\/span>\n          <span class=\"card-tag\">PRO<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/custom-element\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#dc2626,#991b1b)\">Read More<\/a>\n      <\/div>\n\n      <!-- 61: OPT-IN -->\n      <div class=\"doc-card\" data-id=\"61\" data-index=\"47\" data-tabs=\"Widget Options\" data-keywords=\"Opt-in,GDPR,Compliance,Privacy,PRO\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#059669,#065f46)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">OPT-IN<\/h3>\n        <p class=\"card-desc\">Implement a WhatsApp opt-in checkbox for GDPR compliance and user privacy.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Opt-in<\/span>\n          <span class=\"card-tag\">GDPR<\/span>\n          <span class=\"card-tag\">Compliance<\/span>\n          <span class=\"card-tag\">Privacy<\/span>\n          <span class=\"card-tag\">PRO<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/opt-in\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#059669,#065f46)\">Read More<\/a>\n      <\/div>\n\n      <!-- 62: Install and Activate Click to Chat PRO -->\n      <div class=\"doc-card\" data-id=\"62\" data-index=\"48\" data-tabs=\"PRO\" data-keywords=\"Install,Activate,Step-by-step\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#6366f1,#4f46e5)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" x2=\"12\" y1=\"3\" y2=\"15\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Install and Activate Click to Chat PRO<\/h3>\n        <p class=\"card-desc\">A complete guide on how to install and activate your Click to Chat PRO plugin.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Install<\/span>\n          <span class=\"card-tag\">Activate<\/span>\n          <span class=\"card-tag\">Step-by-step<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/installation-of-click-to-chat-pro-plugin\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#6366f1,#4f46e5)\">Read More<\/a>\n      <\/div>\n\n      <!-- 63: Upgrade Click to Chat PRO -->\n      <div class=\"doc-card\" data-id=\"63\" data-index=\"49\" data-tabs=\"PRO\" data-keywords=\"Upgrade,PRO,Guide\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#8b5cf6,#7c3aed)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"16 12 12 8 8 12\"\/><line x1=\"12\" x2=\"12\" y1=\"16\" y2=\"8\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Upgrade Click to Chat PRO<\/h3>\n        <p class=\"card-desc\">Learn how to upgrade your plugin to the latest PRO version seamlessly.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Upgrade<\/span>\n          <span class=\"card-tag\">PRO<\/span>\n          <span class=\"card-tag\">Guide<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/license-upgrade-guide-for-click-to-chat-pro\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#8b5cf6,#7c3aed)\">Read More<\/a>\n      <\/div>\n\n      <!-- 64: Renew Click to Chat PRO -->\n      <div class=\"doc-card\" data-id=\"64\" data-index=\"50\" data-tabs=\"PRO\" data-keywords=\"Renew,License,Support\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#10b981,#059669)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8\"\/><path d=\"M21 3v5h-5\"\/><path d=\"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16\"\/><path d=\"M3 21v-5h5\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Renew Click to Chat PRO<\/h3>\n        <p class=\"card-desc\">How to renew your license to continue receiving updates and support.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">Renew<\/span>\n          <span class=\"card-tag\">License<\/span>\n          <span class=\"card-tag\">Support<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/how-to-renew-your-click-to-chat-pro-license\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#10b981,#059669)\">Read More<\/a>\n      <\/div>\n\n      <!-- 18: Update Click to Chat PRO -->\n      <div class=\"doc-card\" data-id=\"18\" data-index=\"51\" data-tabs=\"PRO\" data-keywords=\"PRO,Update,Upgrade\">\n        <div class=\"card-top\">\n          <div class=\"card-icon\" style=\"background: linear-gradient(135deg,#d97706,#dc2626)\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 2v6h-6\"\/><path d=\"M3 12a9 9 0 0 1 15-6.7L21 8\"\/><path d=\"M3 22v-6h6\"\/><path d=\"M21 12a9 9 0 0 1-15 6.7L3 16\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <h3 class=\"card-title\">Update Click to Chat PRO<\/h3>\n        <p class=\"card-desc\">Steps to update your Click to Chat PRO plugin to the latest version.<\/p>\n        <div class=\"card-tags\">\n          <span class=\"card-tag\">PRO<\/span>\n          <span class=\"card-tag\">Update<\/span>\n          <span class=\"card-tag\">Upgrade<\/span>\n        <\/div>\n        <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/docs\/updating-click-to-chat-pro\/\" class=\"card-read-more\" style=\"background: linear-gradient(135deg,#d97706,#dc2626)\">Read More<\/a>\n      <\/div>\n    <\/div>\n\n    <!-- Empty State -->\n    <div class=\"empty-state hidden\" id=\"emptyState\">\n      <div class=\"empty-emoji\">\ud83d\udd0d<\/div>\n      <h3>No results found<\/h3>\n      <p>Try adjusting your search or filter to find what you&#8217;re looking for.<\/p>\n      <p class=\"empty-support\">Still not found what you want? Feel free to <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/support\/\">contact us<\/a>.<\/p>\n    <\/div>\n\n  <\/main>\n","protected":false},"excerpt":{"rendered":"<p>Documentation Everything you need to build, deploy, and scale your application. Explore guides, references, and examples. Greetings Form Create contact forms within greeting messages for lead generation. Form Leads Read More Multi Agent Let users choose the right agent or department depends on agents availability. Multi Agent Agents Read More Business Hours &#8211; Online\/Offline Show [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","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":["docs-D3KJ3Eq8_20260414_092116.css"],"js":["docs-B28rL3xR_20260414_092116.js"],"callbacks":["dequeue_astra"],"js_attr":{"docs-B28rL3xR_20260414_092116.js":{"attr":"","footer":"1"}}}},"class_list":["post-7354","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/pages\/7354","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/types\/page"}],"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=7354"}],"version-history":[{"count":2,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/pages\/7354\/revisions"}],"predecessor-version":[{"id":7357,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/pages\/7354\/revisions\/7357"}],"wp:attachment":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/media?parent=7354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}