nextjs-whatsapp-cta

v0.1.0

Published

2 months ago

Zero-dependency React components and utilities for WhatsApp CTAs on Next.js sites: button, floating widget, click tracking.

0High
0Medium
0Low

nazirabbas

nextjs react whatsapp cta conversion lead-generation utm-tracking ga4

Next.js WhatsApp CTA

Zero-dependency React components for WhatsApp CTAs on Next.js sites. Button, floating widget and URL builder with UTM tracking and GA4 click events. Copy the files, or use as reference.

Preview

Built from the pattern used in production on real luxury yacht charter sites where WhatsApp is the primary conversion channel.

Why

Most WhatsApp button libraries pull in styling frameworks, icon packs and analytics wrappers you do not need
These components are ~200 lines total, use inline SVG icons, work with Tailwind or plain CSS
URL builder handles phone number normalization, message templating and UTM injection
Click tracking auto-fires GA4 events when window.gtag is present, no-ops otherwise

Install

npm install nextjs-whatsapp-cta

Or copy src/lib.ts, src/WhatsAppButton.tsx and src/WhatsAppFloating.tsx directly into your project.

Usage

Inline button

import { WhatsAppButton } from "./components/WhatsAppButton";

<WhatsAppButton
  phone="+971 50 182 4077"
  message="Hi, I would like to book a charter for 6 guests."
  utm={{ source: "website", medium: "hero", campaign: "summer-2026" }}
  trackingLabel="hero-cta"
>
  Book a Yacht
</WhatsAppButton>

Site-wide floating widget

Add once in your root layout:

import { WhatsAppFloating } from "./components/WhatsAppFloating";

export default function Layout({ children }) {
  return (
    <html>
      <body>
        {children}
        <WhatsAppFloating
          phone="+971501824077"
          message="Hi, coming from your website."
          position="bottom-right"
        />
      </body>
    </html>
  );
}

Just the URL builder

import { buildWhatsAppUrl } from "./lib/whatsapp";

const url = buildWhatsAppUrl({
  phone: "+971501824077",
  message: "Quote request",
  utm: { source: "newsletter", medium: "email" },
});

API

`buildWhatsAppUrl(options)`

| Option | Type | Description | |---|---|---| | phone | string | Any format. Non-digits are stripped. Required. | | message | string? | Pre-fills the WhatsApp chat message. | | utm | object? | UTM parameters appended to the message body in parentheses. |

Returns a https://wa.me/... URL.

`<WhatsAppButton>`

All buildWhatsAppUrl options plus:

| Prop | Type | Default | |---|---|---| | children | ReactNode | "Chat on WhatsApp" | | className | string? | Tailwind default (green pill) | | trackingLabel | string? | "button" |

`<WhatsAppFloating>`

All buildWhatsAppUrl options plus:

| Prop | Type | Default | |---|---|---| | position | "bottom-right" \| "bottom-left" | "bottom-right" | | offset | number | 24 | | size | number | 56 | | ariaLabel | string | "Chat on WhatsApp" |

`trackWhatsAppClick(label)`

Fires gtag("event", "whatsapp_click", { event_label: label }) if window.gtag exists. Silent no-op otherwise. Called automatically by both components.

License

MIT.

Built by Nazir Abbas. Web Developer and SEO Specialist for luxury brands.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme