.png)
.webp)
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
What This Integration Does
- Displays a “Write to WhatsApp” button on your webpage.
- Reads the gclid parameter from the URL (if present).
- Generates a WhatsApp link including the gclid value in the message text.
- Updates the button's href dynamically.
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 </body> 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.
Using the Script Generator Function
If you're dynamically inserting buttons or need flexibility across multiple pages, you can use this template function:
function generateWhatsAppHrefUpdateScript(id, phone) {
return `
<script>
(function() {
const params = new URLSearchParams(window.location.search);
const gclid = params.get('gclid');
const waBase = 'https://wa.me/' + '${phone}';
const text = 'Google Ads (gclid) ';
const waLink = gclid ? waBase + '?text=' + encodeURIComponent(text + gclid) : waBase;
const linkEl = document.getElementById('${id}');
if (linkEl) linkEl.href = waLink;
})();
</script>
`;
}
Usage example:
document.write(generateWhatsAppHrefUpdateScript('wa-link', '7910000000'));
Summary
This method helps you track leads from Google Ads by passing the gclid value into the WhatsApp message. You can use this setup on any site that allows inserting custom JavaScript.
