Atakan Au

<p>Add the clickable WhatsApp button for chat to your site.</p>
<p><strong>Compact</strong>: Less than 5 KB file size, only CSS and HTML<br />
<strong>Simple</strong>: Very basic settings<br />
<strong>Speedy</strong>: No Sql query for fast loading</p>
<p>Visit my blog for support request and feedback: <a href="https://atakanau.blogspot.com/2023/05/css-chat-button-wp-plugin-whatsapp-free.html?utm_content=textlink&utm_medium=link&utm_source=wporg&utm_campaign=csscbdesc&utm_term=csscb" rel="nofollow ugc">CSS chat button</a></p>
<p>If you like my plugin and want to help me improve it, you can support me by donating.</p>


CSS chat button

Compact Simple Speedy chat button. It allows visitors to contact you via WhatsApp. Lightweight and fast loading for best SEO.

HoliThemes

<p>WhatsApp Chat. Let’s make your Web page visitors contact you through “WhatsApp” or “WhatsApp Business” with a single click (WhatsApp Chat, Group).</p>
<p><a href="https://holithemes.com/plugins/click-to-chat/list-of-styles/" rel="nofollow ugc">Demo</a>  |  <a href="https://holithemes.com/plugins/click-to-chat/" rel="nofollow ugc">Documentation</a>  |  <a href="https://holithemes.com/plugins/click-to-chat/support/" rel="nofollow ugc">Support</a>  |  <a href="https://holithemes.com/plugins/click-to-chat/pricing/" rel="nofollow ugc">PRO</a></p>
<h3>WhatsApp Chat</h3>
<p>Add ‘WhatsApp’ or ‘WhatsApp Business’ Number and let your website visitors contact you with a single click.</p>
<p><strong>📱 Mobile:</strong>  Open the WhatsApp Mobile App for a seamless connection.</p>
<p><strong>💻 Desktop:</strong> Direct visitors to the WhatsApp Desktop App or Web WhatsApp page (web.whatsapp.com)</p>
<p><iframe loading="lazy" title="How To Add Whatsapp Chat in WordPress Website (With The Best Plugin)" width="750" height="422" src="https://www.youtube.com/embed/O_BF9rhazvI?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<h3>💎 Styles</h3>
<p>Select a style that complements the design of your website.</p>
<ul>
<li>8 pre-defined customizable styles/designs</li>
<li>Add your own Image/GIF</li>
<li>Custom Element/Design (convert any element to a WhatsApp Chat element)</li>
<li>Shortcodes (Add WhatsApp button/icon with inline the content)</li>
<li>Different Styles, Positions for Mobile, Desktop</li>
<li>Choose a style and customize it to match the website’s design</li>
</ul>
<p><a href="https://holithemes.com/plugins/click-to-chat/list-of-styles/" rel="nofollow ugc">list of Styles</a>  |  🎨<a href="https://holithemes.com/plugins/click-to-chat/customize-styles/" rel="nofollow ugc">Customize Styles</a></p>
<h4>💡 Add Own Image</h4>
<p>Instead of selecting a pre-defined style, add any Image/Animated-image/GIF.</p>
<h3>🌈 Custom Element</h3>
<p>Convert any Element as a WhatsApp Chat Element by adding</p>
<ul>
<li>Class/ID name: ‘ctc_chat’ (or)</li>
<li>Href/link: ‘#ctc_chat’</li>
</ul>
<p>The custom design element will navigate to WhatsApp based on plugin settings (WhatsApp Number, pre-filled message, Analytics, …. ).<br />
(e.g. menu item, button, image, link – just add ctc_chat as a class name)</p>
<p><a href="https://holithemes.com/plugins/click-to-chat/custom-element/" rel="nofollow ugc">Custom Element</a></p>
<h3>🎉 Greetings Dialog</h3>
<p>Add customizable greeting dialogs for boosting user attention and increasing interaction. Seamlessly integrate these greetings into your website for better engagement.</p>
<ul>
<li><a href="https://holithemes.com/plugins/click-to-chat/greetings-1/" rel="nofollow ugc">Greetings-1</a> – Customizable Design: Personalize the design to match your branding with full control over fonts, colors, images, and more.</li>
<li><a href="https://holithemes.com/plugins/click-to-chat/greetings-2/" rel="nofollow ugc">Greetings-2</a> – Content Specific: Deliver focused messages that resonate effectively with your users.</li>
</ul>
<h4>📝 Form Filling</h4>
<p>Get the necessary information from the website visitors before initiating the chat.</p>
<ul>
<li>Get an email notification when the user fills out the form.</li>
<li>Call a webhook with the form data to integrate with other applications. Using integrations tools add data in Google Sheet, CRM and many more applications.</li>
<li>Form data can be prefilled in the WhatsApp chat window.</li>
</ul>
<p>PRO: <a href="https://holithemes.com/plugins/click-to-chat/greetings-form/" rel="nofollow ugc">Greetings-Form</a></p>
<h4>👥 Multi-Agent</h4>
<p>Add multiple WhatsApp chat accounts within a single Greetings dialog.</p>
<ul>
<li>We can set different time ranges for each agent. (24×7 or multiple time ranges for each day of the week).</li>
<li>Offline Agents
<ul>
<li>Chat when offline (display agent with next available time).</li>
<li>Disable chat (display agent with next available time).</li>
<li>Hide offline agents</li>
</ul>
</li>
</ul>
<p>PRO: <a href="https://holithemes.com/plugins/click-to-chat/multi-agent" rel="nofollow ugc">Multi-Agent</a></p>
<h4>⌛ Greetings Actions</h4>
<ul>
<li><strong>Click Action</strong>: Displays greeting dialog when a user clicks on any element with the class name: ‘ctc_greetings’.</li>
<li><strong>ViewPort Action</strong>: Displays Greetings When an element is in/reached viewport(25% margin) with the Class name: ‘ctc_greetings_now’ [PRO]</li>
<li><strong>Time, Scroll Actions</strong>: Display Greetings based on time, scroll [PRO]</li>
</ul>
<p>These actions enhance user interaction by triggering greetings at the right moments, improving engagement and support efficiency.</p>
<p><a href="https://holithemes.com/plugins/click-to-chat/greetings-actions/" rel="nofollow ugc">Actions</a></p>
<h3>🔴 Notification Badge</h3>
<p>Get user attention by displaying a notification badge on the WhatsApp Chat element.</p>
<p>Customize the notification badge with the notification count, text color, background color, border color, and time delay to display the notification badge.</p>
<p><a href="https://holithemes.com/plugins/click-to-chat/notification-badge/" rel="nofollow ugc">Notification Badge</a></p>
<h3>✳️ Position to Place</h3>
<ul>
<li>Add WhatsApp at any position of the screen<br />
(not limited to fixed positions).</li>
<li>Different positions for Mobile and Desktop.</li>
</ul>
<h3>⏩ Pre-filled Message</h3>
<p>Text that appears in the WhatsApp chat window when the user clicks on the WhatsApp.</p>
<p>Users can easily start the conversation.</p>
<p>Variables to change values dynamically</p>
<ul>
<li><strong>{site}</strong> -> Website Title</li>
<li><strong>{title}</strong> -> Page Title</li>
<li><strong>{url}</strong> -> Web page URL</li>
<li><strong>[url]</strong> -> Web page full URL including query parameters</li>
</ul>
<p>With these variables, we can understand from which page the user started WhatsApp chat.</p>
<p><a href="https://holithemes.com/plugins/click-to-chat/pre-filled-message/" rel="nofollow ugc">Pre-filled Message</a></p>
<h3>🛍️ WooCommerce</h3>
<h3>WooCommerce product pages</h3>
<p>For WooCommerce, single product pages can overwrite the main setings to add a product specific message using dynamic variables.</p>
<ul>
<li>Pre-filled Message</li>
<li>Call to Action</li>
<li>Greetings Template, Content [PRO]</li>
</ul>
<p>Additional variables, specific to WooCommerce single product page to change values dynamically</p>
<ul>
<li><strong>{product}</strong> -> Product Name</li>
<li><strong>{price}</strong> -> Product Price (current price)</li>
<li><strong>{regular_price}</strong> -> Regular product price (without any sale)</li>
<li><strong>{sku}</strong> -> Stock keeping unit</li>
</ul>
<p>For Shop, Cart, Checkout, and Account pages we can overwrite at page level settings</p>
<h3>Add WhatsApp – Single Product Pages</h3>
<p>Add WhatsApp button or icon at WooCommerce single product pages.</p>
<ul>
<li>Before Main Content</li>
<li>Before Product</li>
<li>Before Product Summary</li>
<li>Product Summary</li>
<li>Before Add to Cart Form</li>
<li>Before Cart Button</li>
<li>After Cart Button</li>
<li>After Add to Cart Form</li>
<li>After Product</li>
<li>After product summary</li>
</ul>
<p>We can add dynamic variables for the Call to Action.<br />
E.g. Buy {product}<br />
{product} will be replaced with the product name for all product pages.</p>
<p><a href="https://holithemes.com/plugins/click-to-chat/add-whatsapp-in-woocommerce-single-product-pages/" rel="nofollow ugc">Add WhatsApp Icon/Button in WooCommerce Product pages</a></p>
<h4>Add WhatsApp – Shop Page</h4>
<p>Add WhatsApp to WooCommerce Products list (shop page, related products list)</p>
<p><a href="https://holithemes.com/plugins/click-to-chat/whatsapp-chat-in-woocommerce-shop-page/" rel="nofollow ugc">Shop page</a></p>
<h3>📒 Page Level Settings</h3>
<p>At the page level, we can overwrite the settings for each post. We can add a different Whatsapp Number, Prefilled Message, Call to Action for each post<br />
(while editing the post, in the right sidebar ‘Click to Chat’ meta box)</p>
<ul>
<li>WhatsApp Number</li>
<li>Call to Action</li>
<li>Pre-filled Message</li>
<li>Display Settings</li>
</ul>
<p>PRO:</p>
<ul>
<li>Change Styles</li>
<li>Time Delay</li>
<li>Scroll Delay</li>
<li>Greetings Template</li>
<li>Greetings Header, Main, Bottom Content</li>
</ul>
<p><a href="https://holithemes.com/plugins/click-to-chat/change-values-at-page-level/" rel="nofollow ugc">Page-level settings</a></p>
<h3>📈 Analytics</h3>
<p>Creates an Event when the user clicks on the WhatsApp Icon/button.</p>
<p><a href="https://holithemes.com/plugins/click-to-chat/google-analytics/" rel="nofollow ugc">Google Analytics</a></p>
<p><a href="https://holithemes.com/plugins/click-to-chat/facebook-pixel/" rel="nofollow ugc">Meta Pixel</a></p>
<p><a href="https://holithemes.com/plugins/click-to-chat/google-ads-conversion/" rel="nofollow ugc">Google Ads Conversations</a></p>
<h3>Webhooks</h3>
<p>Connect other applications using Integrate, Automation tools like Zapier, IFTTT, Pipedream, etc.</p>
<p><a href="https://holithemes.com/plugins/click-to-chat/webhooks" rel="nofollow ugc">Webhooks</a></p>
<h3>⭐ PRO</h3>
<ul>
<li>Multi-Agent: Displays multiple WhatsApp chat accounts
<ul>
<li>Set multiple time ranges for each agent’s availability</li>
<li>Hide offline agents or display agent when offline with next available time</li>
</ul>
</li>
<li>Random Numbers: Navigates to a random WhatsApp number from the predefined list</li>
<li>Form: Get the necessary information from the website visitors, before initiating the chat
<ul>
<li>Get an email notification when the user fills out the form.</li>
<li>Use webhooks to send form data to external apps in real-time for seamless integration.</li>
<li>Prefill WhatsApp messages with user-provided form data to streamline conversations</li>
</ul>
</li>
<li>Business hours: Offline/Online Settings
<ul>
<li>Set business hours for a specific time range within a day, specific days in a week.</li>
<li>Hide the widget during offline hours or automatically change the WhatsApp numbers and call to action.</li>
</ul>
</li>
<li>Display based on website visitor’s country</li>
<li>Webhooks – Dynamic variables
<ul>
<li>{url} – Current page URL.</li>
<li>{time} – Time user interacted with the WhatsApp Button/Icon.</li>
<li>{number} – WhatsApp Number associated with the icon/button.</li>
<li>Get values from url parameters by adding name with in single square brackets E.g. [gclid], [utm_source]</li>
<li>Get values from cookies by adding the name with in double square brackets. E.g. [[cookie_name]]</li>
</ul>
</li>
<li>Get additional values at Google Analytics, Meta Pixel
<ul>
<li>Get values from url parameters. E.g. [gclid], [utm_source]</li>
<li>Get values from cookies. E.g. [[cookie_name]]</li>
</ul>
</li>
<li>Greetings Actions: (for all greeting dialogs: Greetings-1, Greetings-2, Form, Multi-agent)
<ul>
<li>Display greetings dynamically based on user actions such as
<ul>
<li>Time: Time spent on the page, </li>
<li>Scroll: Page scroll percentage, </li>
<li>Click: specific button clicks </li>
<li>ViewPort: when an element becomes visible in the viewport.</li>
</ul>
</li>
</ul>
</li>
<li>Position to place
<ul>
<li>Fixed: Fixed position on the screen (default position)</li>
<li>Absolute: Fixed position to the body content. (Moves when the user scrolls the page)</li>
</ul>
</li>
<li>Time Delay & Scroll Delay: Display WhatsApp widget after a specified time delay or once the user scrolls a certain percentage of the page.</li>
<li>Display based on Website visitor’s login status</li>
<li>Page-level settings: Fine-tune WhatsApp button behavior for individual pages. Change styles, time delays, scroll delay, Greetings Template, and Greetings Content</li>
<li>WooCommerce: Customize WhatsApp widget behavior specifically for WooCommerce pages
<ul>
<li>Overwrite greetings template, Content for Single product pages.</li>
<li>Overwrite settings for Shop, Checkout, and Account pages at page-level settings</li>
</ul>
</li>
</ul>
<p>🔆 <a href="https://holithemes.com/plugins/click-to-chat/pricing/" rel="nofollow ugc">PRO</a></p>
<h3>🎯 Localization</h3>
<p>Click to Chat is Compatible with translation plugins. <a href="https://wpml.org/" rel="nofollow ugc">WPML</a>, Polylang.</p>
<p>It is easy to set up different values for each language</p>
<ul>
<li>WhatsApp Number</li>
<li>Call to Action</li>
<li>Pre-filled Message</li>
<li>Greetings Content</li>
<li>Group ID</li>
<li>Share Text</li>
</ul>
<p>Setup for <a href="https://holithemes.com/plugins/click-to-chat/translate-click-to-chat-settings-using-wpml-plugin/" rel="nofollow ugc">WPML</a>, <a href="https://holithemes.com/plugins/click-to-chat/translate-click-to-chat-settings-using-polylang-plugin/" rel="nofollow ugc">Polylang</a></p>
<h3>🚀 Performance</h3>
<ul>
<li>Rich in features, but the site’s front end is very lightweight.</li>
</ul>
<p>We highly concentrate on speed and performance.</p>
<h3>👓 Display Settings</h3>
<p>Customize the visibility of the widget by showing or hiding styles based on specific settings, such as:</p>
<ul>
<li>Post type</li>
<li>Post Id</li>
<li>Category name</li>
<li>Device Type(Mobile, Desktop)</li>
<li>WooCommerce single product pages</li>
</ul>
<p>PRO:</p>
<ul>
<li>Time delay</li>
<li>Scroll delay</li>
<li>Selected time range in a day</li>
<li>Selected Days in a week</li>
<li>Website visitor login status</li>
<li>Website visitor country</li>
</ul>
<h3>✅ Opt-in</h3>
<p>Make the website users opt-in / accept consent before initiating the chat.</p>
<p><a href="https://holithemes.com/plugins/click-to-chat/opt-in/" rel="nofollow ugc">Opt-in</a></p>
<h3>⛳ Shortcodes</h3>
<p>Use shortcodes to instead a WhatsApp icon or button with inline the Post content, widget area.</p>
<p>change the default setting values using shortcode attributes – WhatsApp Number, Style, Pre-filled message, Call to Action.</p>
<h4>Chat Shortcodes</h4>
<p>[ht-ctc-chat]</p>
<p>To change the WhatsApp number use the ‘number’ attribute</p>
<p>[ht-ctc-chat number=915123456789]</p>
<p><a href="https://holithemes.com/plugins/click-to-chat/shortcodes-chat/" rel="nofollow ugc">Shortcodes for Chat</a></p>
<h4>Group</h4>
<p>Enable the Group chat feature and add WhatsApp Group id in the plugin settings.</p>
<p>Make it easy for your customers to join Whatsapp Group.</p>
<p><a href="https://holithemes.com/plugins/click-to-chat/group-chat-feature/" rel="nofollow ugc">Group</a></p>
<h4>Share</h4>
<p>Let users share your website with their WhatsApp contacts and get more leads.</p>
<p><a href="https://holithemes.com/plugins/click-to-chat/share-feature/" rel="nofollow ugc">Share</a></p>
<h4>🌏 Help Translate The Plugin</h4>
<p>Help by <a href="https://translate.wordpress.org/projects/wp-plugins/click-to-chat-for-whatsapp/" rel="nofollow ugc">Translating the plugin</a> to be available in more languages</p>


Click to Chat – HoliThemes

WhatsApp Chat🔥. Let's make your Web page visitors contact you through 'WhatsApp', 'WhatsApp Business'. Add matching Widget✅

CSS chat button vs Click to Chat – HoliThemes