How to Add a WhatsApp button to my Website without Plugin

Adding a WhatsApp icon to your website is a great way to provide an easy way for visitors to contact you. You can use it to open a chat directly on WhatsApp, making communication seamless. In this guide, we’ll walk you through two methods to add a WhatsApp icon: using the “WPCode” plugin and by editing the footer.php file.

Method 1: Adding the WhatsApp Icon Using the “WPCode” Plugin

The “WPCode” plugin allows you to add custom code snippets to your WordPress site easily. Follow these steps:

1. Install and Activate the WPCode Plugin:
   • Go to your WordPress dashboard.
   • Navigate to Plugins > Add New.
   • Search for “WPCode” or “Code Snippets”.
   • Install and activate the plugin.
2. Add a New Code Snippet:
   • Go to WPCode
   • Click on Header & Footer
3. Enter the Code:.
   • Code: Paste the following HTML and CSS code into the Footer editor:
4. Save and Activate:
   • Click Save Changes.

<!-- WhatsApp Icon -->
<div id="whatsapp-icon">
  <a href="https://wa.me/923218343700" target="_blank" id="whatsapp-link">
    <img src="https://faisalfateh.com/wp-content/uploads/2024/08/whatsapp-icon.png" alt="WhatsApp" id="whatsapp-img">
  </a>
</div>

<style>
  #whatsapp-icon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
  }

  #whatsapp-link {
    display: block;
  }

  #whatsapp-img {
    width: 50px; /* Adjust the size of the icon */
    height: 50px; /* Adjust the size of the icon */
    border-radius: 50%;
    background-color: #25D366; /* WhatsApp green */
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transition: background-color 0.3s;
  }

  #whatsapp-img:hover {
    background-color: #128C7E; /* Darker green on hover */
  }

  @media (max-width: 600px) {
    #whatsapp-img {
      width: 40px; /* Smaller size on mobile */
      height: 40px; /* Smaller size on mobile */
    }
  }
</style>

This method will add a fixed WhatsApp icon to the bottom right of your website, ensuring it’s always visible and responsive.

Method 2: Adding the WhatsApp Icon by Editing footer.php

If you prefer to manually add the code to your theme files, follow these steps:

1. Access Your Theme Files:
   • Go to your WordPress dashboard.
   • Navigate to Appearance > Theme Editor.
   • Locate and select the footer.php file from the list of theme files.
2. Add the Code:
   • Scroll to the bottom of the footer.php file and paste the HTML and CSS code just before the closing </body> tag:
3. Update the File:
   • Click Update File to save your changes.

This method directly embeds the WhatsApp icon into your site’s footer, ensuring it appears on every page.

Conclusion

Both methods effectively add a WhatsApp icon to your website, making it easy for visitors to contact you. Choose the method that best suits your workflow and technical comfort level. The “WPCode” plugin is user-friendly and does not require editing theme files, while editing footer.php provides a direct approach for those comfortable with code.

By following these steps, you’ll enhance your website’s communication capabilities with a functional and responsive WhatsApp icon.