@voxket-ai/voxket-whatsapp-sdk
v1.0.4
Published
Floating WhatsApp QR widget SDK — inject a WhatsApp invite popup on any website
Readme
@voxket-ai/voxket-whatsapp-sdk
A lightweight, zero-dependency SDK that injects a floating WhatsApp button into any website. When clicked, it opens a popup modal showing a WhatsApp QR code and invite link — visitors can scan the QR or tap the link to start a WhatsApp chat directly with your business number.
Features
- Floating circular WhatsApp button — fixed position, non-intrusive
- QR code generated instantly from your WhatsApp Business number
- Copy invite link with one click
- "Open in WhatsApp" direct link button
- Dark-themed popup modal with backdrop blur
- Fully self-contained styles — scoped class names, no CSS conflicts with your site
- Works with a single
<script>tag — no React, no bundler required - TypeScript support included
Installation
npm install @voxket-ai/voxket-whatsapp-sdkCDN Usage (plain HTML)
<script src="https://cdn.jsdelivr.net/npm/@voxket-ai/voxket-whatsapp-sdk/dist/index.umd.js"></script>
<script>
VoxketQRSDK.init({
businessPhoneNumber: "+919830606957",
});
</script>ESM / Bundler Usage
import { init } from "@voxket-ai/voxket-whatsapp-sdk";
init({
businessPhoneNumber: "+919830606957",
});React / Next.js Integration
"use client";
import { useEffect } from "react";
import { init, removeWidget } from "@voxket-ai/voxket-whatsapp-sdk";
export default function WhatsAppWidget() {
useEffect(() => {
init({
businessPhoneNumber: "+919830606957",
brandName: "My Company",
});
return () => removeWidget();
}, []);
return null;
}Use it in your layout:
// app/layout.tsx
import WhatsAppWidget from "@/components/WhatsAppWidget";
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<WhatsAppWidget />
</body>
</html>
);
}Configuration Props
Required
| Prop | Type | Description |
|---|---|---|
| businessPhoneNumber | string | Your WhatsApp Business phone number in E.164 format e.g. "+919830606957" |
Optional — Popup Branding
| Prop | Type | Default | Description |
|---|---|---|---|
| brandName | string | — | Brand name shown in the popup header |
| brandLogoUrl | string | — | Logo URL shown in popup header (replaces the WhatsApp icon) |
| popupTitle | string | "Chat on WhatsApp" | Popup modal title |
| popupSubtitle | string | "Scan QR or use the invite link below" | Popup modal subtitle |
Optional — Button Appearance
| Prop | Type | Default | Description |
|---|---|---|---|
| position | "bottom-right" \| "bottom-left" | "bottom-right" | Corner placement of the floating button |
| buttonColor | string | "#25D366" | Button background colour |
| buttonSize | number | 56 | Button diameter in pixels |
| zIndex | number | 99999 | CSS z-index for the button and popup |
How It Works
- You pass your WhatsApp Business phone number via
businessPhoneNumber - On button click, the SDK builds a
wa.melink:https://wa.me/919830606957/ - A QR code is generated from that link and displayed in the popup
- Visitors scan the QR or copy the link to open a WhatsApp chat with your business directly
No backend, no API keys, no authentication required.
Full Example
<script src="https://cdn.jsdelivr.net/npm/@voxket-ai/voxket-whatsapp-sdk/dist/index.umd.js"></script>
<script>
VoxketQRSDK.init({
// Required
businessPhoneNumber: "+919830606957",
// Branding
brandName: "Acme Corp",
brandLogoUrl: "https://example.com/logo.png",
popupTitle: "Chat with us on WhatsApp",
popupSubtitle: "Scan the QR or tap the link to start chatting",
// Button
position: "bottom-right",
buttonColor: "#25D366",
buttonSize: 56,
zIndex: 99999,
});
</script>License
MIT © Voxket AI