How to Add a WhatsApp Button with GCLID Tracking to Your Website

This guide will help you add a button to your website that opens a WhatsApp chat. If a gclid parameter is present in the URL (from Google Ads), it will be included in the message text - useful for tracking ad campaign leads.

Step 1: Add the HTML Button

Place the following HTML code where you want the WhatsApp button to appear:

<a id="wa-link" href="#" target="_blank" class="btn btn-success">Write to WhatsApp</a>

This button will later be updated via JavaScript

Step 2: Add the JavaScript Code

Before the closing tag, insert the following script:

<script>
  function scriptToInclude(id, phone) {
    // 1. Read URL parameters
    const params = new URLSearchParams(window.location.search);
    const gclid = params.get('gclid');
    // 2. Generate WhatsApp link
    const waBase = 'https://wa.me/' + phone;
    const text = 'Google Ads (gclid) ';
    const waLink = gclid ? `${waBase}?text=${encodeURIComponent(text + gclid)}` : waBase;
    // 3. Update the button href
    const linkEl = document.getElementById(id);
    if (linkEl) {
      linkEl.href = waLink;
    }
  }
  // Call the function with your parameters
  scriptToInclude('wa-link', '123456789');
</script>

Replace 123456789 with your own WhatsApp number in international format without "+" or spaces.