WAButton

Universal 1-Line Embed

Universal WhatsApp Button for Any Website or Web App

Embed WAButton on plain HTML, React, Next.js, Vue, Angular, Astro, PHP, Laravel, or any custom tech stack in under 60 seconds. One async script tag, nothing else to install, and styles scoped to wabutton-prefixed class names.

Create my free button

1 min setup Target: index.html (before </body>) or root layout component

Step-by-step installation for HTML & Custom Websites

Follow these steps to add your WAButton installation code to your HTML & Custom Websites website.

  1. 1

    Copy Your Embed Snippet

    Copy your unique script snippet from your WAButton widget dashboard or onboarding screen.

    Pro tip: Ensure you keep the async attribute enabled for non-blocking asynchronous browser loading.

  2. 2

    Paste Before the Closing </body> Tag

    Paste the code into your root HTML file (e.g. index.html) or root layout component (e.g. layout.tsx, App.vue, base.blade.php) right before </body>.

    Pro tip: Placing the script right before </body> lets your page content load first. 

    <script src="https://widget.wabutton.app/v1.js" data-widget-id="YOUR_WIDGET_ID" async></script>
  3. 3

    Open in Browser

    Save the file and refresh your browser. Your floating WhatsApp button will appear immediately in the bottom corner.

Why store owners and agencies choose WAButton for HTML & Custom Websites

One Universal Script Tag

A single tiny async loader that operates identically across static HTML, SSR, and SPA frameworks.

Scoped Styles

Every style is scoped to wabutton-prefixed class names, so it does not restyle your Tailwind, Bootstrap, or custom CSS classes.

Self-Contained Script

Built with Preact and shipped inside the script itself, so your page needs no jQuery, no React, and no icon fonts.

SPA Navigation Aware

Automatically maintains widget state across client-side route transitions (React Router, Next.js, Vue Router).

Frequently asked questions

Does WAButton work with Single Page Apps (SPAs) like React, Next.js, or Vue?

Yes! WAButton initializes on the window object and persists across client-side router navigation without needing to re-execute on every route change.

Will WAButton slow down my Google Lighthouse or PageSpeed Insights score?

WAButton is an async script of under 40KB (gzipped) served from Cloudflare's edge, so it does not block first paint. The chat panel loads only when a visitor opens it. The effect on your own score depends on your site, so run PageSpeed Insights before and after you add it.

Related Free Tools

Create WhatsApp links, QR codes and messages for your business.

More installation guides

Add WhatsApp to .

Give visitors a way to ask about your products, prices or availability. Reply from the WhatsApp you already use.

Create my free button Preview your button

Free plan available. No credit card required.