WhatsApp Button: How to Add It to Your Website

Adding a WhatsApp button to your website is one of the highest-impact, lowest-effort improvements you can make. It reduces friction, speeds up conversations, and turns visits into real opportunities. Plus, when that button is connected to automation (for example, ChatGPT on WhatsApp), it stops being just a shortcut and becomes a measurable conversion channel.

Turn WhatsApp into a channel that supports, sells, and executes.With Nerds Workflows, you can automate conversations, capture leads, follow up, and connect your workflows with internal systems.

If you are building a comprehensive conversational strategy, use this article as a technical foundation and complement it with these: 7 examples of using ChatGPT on WhatsApp for business

‍

Why a WhatsApp button improves conversions

‍

A WhatsApp button works because it reduces steps. Instead of “form → email → wait,” the user goes straight to “click → conversation.” This typically increases:
‍

• Leads (more conversations started)
  
  
• Response speed
  
  
• Closing rate in consultative sales
  
  
• Satisfaction in support
  ‍
  
  

If you already have traffic, the button is your best bridge to conversation.

‍

‍

Step 1: Preparation

‍

Make sure you have access to edit your website's HTML code. This can be done via a text editor for static HTML files, or through your content management system (CMS) editor if you use platforms like WordPress, Joomla, etc.

‍

Step 2: HTML Code

The code snippet you provided consists of several parts:

‍

1.- FontAwesome link: This is to use the WhatsApp icon provided by FontAwesome. Make sure to insert the <link> line in the section <head> of your HTML.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">


‍

2.- WhatsApp button: This is the link that will open WhatsApp. You should replace PHONE in the link https://wa.me/TELEFONO?text=Hola with your phone number in international format (without plus signs, dashes, or parentheses). For example, if your number is +1 234 567 8900, you should write it as 12345678900. This code is placed in the body of your HTML (<body>).

<a href="https://wa.me/12345678900?text=Hola" class="float-wa" target="_blank">
   <i class="fa fa-whatsapp" style="margin-top:16px;"></i>
</a>


‍

3.- CSS styles: Styles define the appearance and position of the floating button. You can place the CSS code inside a <style> tag in the <head> section of your HTML, or in an external CSS file if you prefer to keep the CSS separate.

<style>
   .float-wa{
       position:fixed;
       width:60px;
       height:60px;
       bottom:40px;
       right:40px;
       background-color:#25d366;
       color:#FFF;
       border-radius:50px;
       text-align:center;
       font-size:30px;
       z-index:100;
   }
</style>


‍

Step 3: Integration

‍

FontAwesome:

Add the FontAwesome link to the

<head>

section of your page.

‍

Button and CSS Styles:

You can place the button link and CSS styles wherever you find most convenient based on your HTML structure. However, styles generally go in the

<head>

section, and the button goes in the

<body>

where you want it to appear (usually at the end of the

<body>

to ensure it loads after all other content).

‍

Final Considerations for the WhatsApp Floating Button

‍

Verify that your phone number is correctly formatted in the link to avoid any issues.

‍

Keep in mind that the button's z-index is high (10000, and then 100 in the provided code, which seems to be an error. You can use 100 or a higher value if necessary) to ensure the button appears above other elements on the page.

‍

You can customize the default message that appears when starting a chat by modifying the value after

text=

in the button's URL.

‍

Test the button on your website to ensure it works as expected and is visible on all the pages where you want it to appear.

‍

Implementing the WhatsApp floating button in WordPress

‍

‍

Below you will find step-by-step instructions for adding the floating button in WordPress.

‍

1. Install a CSS/JS Customization Plugin:
   • From your WordPress dashboard, go to Plugins > Add New.
   • Search for a plugin that allows you to add custom HTML, CSS, and JavaScript, such as "Insert Headers and Footers" or "Custom CSS & JS."
   • Install and activate the chosen plugin.
2. Add the Code:
   • Go to the settings of the plugin you just installed (usually under the Settings section).
   • In the appropriate section (this could be headers for the FontAwesome link and the site body for the button and CSS), copy and paste the code provided above. Remember to replace PHONE NUMBER with your phone number in international format.
3. Save Changes:
   • Save the changes to the plugin settings.
   • Visit your website to ensure the floating WhatsApp button appears and functions correctly.
4. Final Notes:
   • In WordPress, the exact plugin and steps may vary slightly depending on the specific plugin you choose to add custom code.
   • Always test your site after making changes to ensure everything works as expected.

‍

Implementing a floating WhatsApp button in Webflow

‍

Below you will find step-by-step instructions for adding the floating button via Webflow without needing to edit HTML or CSS code directly.

‍

1. Adding Custom Code:
   • In your Webflow project, go to your Dashboard and select the site you want to work on.
   • Access the site settings and then go to the Custom Code section.
2. Include FontAwesome and CSS Styles:
   • In the "Head Code" section, copy and paste the FontAwesome link and the provided CSS styles. Make sure not to include the <style> tags for the CSS, as Webflow already provides a specific area for CSS.
3. Add the WhatsApp Button:
   • To add the WhatsApp button, you will need to place it on a specific page or within a symbol used across multiple pages.
   • Go to the page or symbol where you want to add the button and enter edit mode.
   • Use an Embed element to add custom HTML code. Copy and paste the WhatsApp button code, making sure to update the phone number.
4. Publish Changes:
   • Publish your site to apply the changes.
   • Check your published site to ensure the floating WhatsApp button appears correctly.

‍

Final Notes

‍

When using Embed elements in Webflow, ensure the code is correctly formatted and don't forget to update the phone number.

‍

Always test your site after making changes to ensure everything works as expected.

‍

Implementing a fixed WhatsApp button on your website (non-floating)
‍

‍

To implement a fixed WhatsApp button on your website instead of a floating one, you can follow a simplified version of the code I provided earlier by removing the CSS styles that make the button float. Here is how it would look:

‍

HTML Code for the Fixed WhatsApp Button

‍

<a href="https://wa.me/12345678900?text=Hola" target="_blank" style="display:inline-block; background-color:#25d366; color:#FFF; padding:10px 20px; border-radius:5px; text-align:center; text-decoration:none; font-size:16px;">
   <i class="fa fa-whatsapp"></i> Send us a message
</a>

‍

In this example, the button is a link (<a> tag) with styles applied directly to it to give it the appearance of a button. Here are the steps to apply it:

‍

1. Customize the Phone Number: Change 12345678900 in https://wa.me/12345678900?text=Hola to your phone number in international format, without including symbols like "+".
2. Customize the Default Message: Change "Hola" in https://wa.me/12345678900?text=Hola to the default message you want visitors to send when they click the button.
3. Adding it to your website:
   • WordPress: You can add this code directly to any part of your site that allows custom HTML (for example, in a custom text widget, or on a page or post using the block editor by adding a custom HTML block).
   • Webflow: Add a new Embed element to the page where you want the button and paste this code.

‍

Additional Settings

‍

Styles

: The style is applied directly to the tag using the style attribute. You can adjust the background-color, color, padding, border-radius, text-align, text-decoration, and font-size values to match your website's design.

‍

WhatsApp Icon

: Make sure you have FontAwesome integrated into your site so that the WhatsApp icon displays correctly. If you do not wish to use FontAwesome, you can omit <i class="fa fa-whatsapp"></i> and simply keep the button text, although the icon helps users quickly identify the button's functionality.

‍

Testing

: After integrating the button, visit your website and ensure that the button appears correctly and that the link works by opening WhatsApp as expected.

‍

‍

To learn more about the WhatsApp ecosystem and automation, visit the article on the power of WhatsApp chatbots.

‍

A well-implemented WhatsApp button turns visits into conversations. And a well-designed conversation turns into sales, resolved support, and more efficient operations. The real leap happens when the button doesn't just open a chat, but triggers an intelligent conversational experience with generative AI.

‍

Conclusion

‍

Including a WhatsApp button on your website is a simple action with immediate impact. Whether floating or fixed, in HTML, WordPress, or Webflow, the important thing is that it is visible, easy to use, and measurable. From there, you can evolve toward automation with chatbots and generative AI to turn WhatsApp into a growth channel.

Schedule a demo and transform

‍

‍

‍