How to Add a WhatsApp Button to Your Website (HTML, PHP, WordPress)

A WhatsApp contact button is a practical way to let visitors reach you immediately. This guide explains how to add one on different platforms, from HTML websites to WordPress, with code examples.

Adding a WhatsApp Button to an HTML or PHP Website

If your website is built directly with HTML or PHP, follow these steps.

Create a basic WhatsApp link

<a href="https://wa.me/905xxxxxxxxx" target="_blank">
  WhatsApp ile Bize Ulaşın
</a>

Note:905xxxxxxxxx should be replaced with your phone number including the country code. Use the “90” prefix for Türkiye; do not add a plus sign, spaces or brackets.

Add a fixed WhatsApp button with an icon

<a href="https://wa.me/905xxxxxxxxx" target="_blank"
  style="position: fixed; bottom: 20px; right: 20px;
  background-color: #25D366; color: white; border-radius: 50px;
  padding: 12px 20px; text-decoration: none; font-weight: bold;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
  📱 WhatsApp
</a>

This example fixes the button to the bottom-right of the screen. Adjust colours, spacing, shadows and positioning to suit your website design.

Place the code at the bottom of the page

You can add the code to footer.php or just before the closing </body> tag. Adding it to a shared footer file displays the button on every page.

Adding a WhatsApp Button to WordPress

WordPress users can integrate WhatsApp with a plugin or by manually adding code.

Adding it with a plugin

Click to Chat

• Open your WordPress dashboard.
• Plugins → Add New is the section to open.
• Search for and install “Click to Chat”.
• Activate the plugin.
• Configure your phone number and button design in Settings.

Alternative plugins

• WP Social Chat — formerly WhatsApp Chat
• Join.chat

Adding code manually to WordPress

<a href="https://wa.me/905xxxxxxxxx" target="_blank"
  style="position: fixed; bottom: 20px; right: 20px;
  background-color: #25D366; color: white; border-radius: 50px;
  padding: 12px 20px; text-decoration: none; font-weight: bold;">
  📞 Bize WhatsApp'tan Yazın
</a>

You can add the code to your theme’s footer.php file, or paste it into a custom HTML block in Elementor or Gutenberg.

Editing a theme file directly may cause the code to disappear during theme updates. For lasting use, choose a child theme, code insertion tool or suitable plugin.

Adding a WhatsApp Button to Shopify

• In the Shopify dashboard, open Online Store → Themes → Customize .
• Open the custom-code or Custom Liquid area in the theme options.
• Add the WhatsApp button code and save.

Adding a WhatsApp Button to Wix

• In Wix Editor, choose Add → Button .
• Add https://wa.me/905xxxxxxxxx as the button link.
• Choose to open the link in a new tab and check the mobile view.

Adding a WhatsApp Button to Squarespace

Settings → Advanced → Code Injection lets you add HTML to the footer. Your Squarespace plan may need to support code injection.

Predefining a WhatsApp Message

To show a prepared message when a visitor clicks the link, use the ?text= parameter. Spaces and Turkish characters must be URL-encoded.

<a href="https://wa.me/905xxxxxxxxx?text=Merhaba,%20web%20sitenizden%20ulaşıyorum."
  target="_blank">
  WhatsApp ile İletişime Geç
</a>

Checks After Adding the Button

• Verify the phone number and country code.
• Test WhatsApp Web on desktop and the WhatsApp app on mobile.
• Make sure the button does not cover menus, cookie notices or other fixed elements.
• Check colour contrast and accessible link text.
• Measure clicks with Google Analytics or a tag manager.

After the button: the website’s contact and enquiry flow

Opening WhatsApp does not mean a message was sent or a genuine enquiry reached the business. First assess which service page initiated contact, then when and how your team responded. Request only necessary information in the first message; do not pass personal data into analytics events or URL parameters.

• Click: WhatsApp, phone and email link activations are separate interactions.
• Submission delivery: If a form exists, successful delivery should be verified by the server or receiving system.
• Genuine enquiry: A conversation in which the team reaches the person and clarifies service needs is assessed separately using business records.

To arrange contact buttons, mobile pages and enquiry steps together, explore our web design and contact-experience service . Directing advertising visitors to the right page is discussed in our Google Ads and landing-page guide .

Conclusion

A WhatsApp button helps you communicate quickly with visitors and simplifies the contact flow. Choose the method suited to your platform to add this feature in a few minutes.