The Advantage of Floating Chat Widgets
While inline buttons are great for specific contexts, a floating live chat widget serves as a persistent safety net. No matter how far down a page a user scrolls, or which page they navigate to, the friendly green icon remains in the corner, signaling that help is available.
Traditional live chat software (like Intercom or Zendesk) requires the user to stay on your website to wait for a reply. If they close the tab, you lose them.
A WhatsApp live chat widget simply redirects them to WhatsApp. Once they send that first message, you have captured their phone number and the conversation lives on their device forever, long after they leave your site.
How to Create the Widget
To create a floating widget without needing to install heavy WordPress plugins, you can use pure HTML and CSS.
Our Generator allows you to select "Floating" mode. It outputs a block of code that looks like this:
<a href="https://wa.me/1234567890" style="position: fixed; bottom: 20px; right: 20px; background-color: #25D366; color: white; border-radius: 50px; padding: 16px; box-shadow: 0 4px 10px rgba(0,0,0,0.15); z-index: 9999;"> <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor"> <!-- WhatsApp Icon --> </svg> </a>The Magic of CSS: Fixed Position and Z-Index
If you look at the code above, two CSS properties make the widget "float":
position: fixed;- This tells the browser to anchor the button relative to the viewport (the screen), not the page content. So as the user scrolls, the button stays put.z-index: 9999;- This ensures the button always sits on top of any other content on your website, preventing it from being hidden behind images or footers.
Installation Instructions
Because you want the floating widget to appear on every page of your website, you shouldn't paste the code onto individual pages.
For WordPress:
Go to Appearance > Theme File Editor. Find footer.php and paste the code right above the closing </body> tag. Alternatively, use a plugin like "WPCode - Insert Headers and Footers".
For Shopify:
Go to Online Store > Themes > Edit Code. Find theme.liquid and paste the code right above the closing </body> tag.