WhatsApp Floating Button with Prefilled Messages for Vanilla JavaScript

WhatsApp Floating Button is a vanilla JavaScript widget that adds a fixed WhatsApp contact button to the bottom corner of a webpage.

The button appears with a pulse ring, an optional greeting bubble, and a link that opens wa.me with a pre-filled message.

Features:

• Single JavaScript file with zero third-party dependencies.
• Fixed bottom-left or bottom-right button placement.
• Prefilled WhatsApp messages through wa.me.
• Delayed greeting bubble with optional automatic hiding.
• Notification badge and animated pulse effects.
• Mobile sizing and iPhone safe-area spacing.
• Visible keyboard focus and reduced-motion handling.
• Configurable colors, offsets, stacking level, and accessible label.

How to use it:

1. Paste the script before the closing </body> tag. data-phone is the only required attribute, digits only, country code first.

<script
  src="whatsapp-floating-button.min.js"
  data-phone="15551234567"
  data-message="Hi! I found your site and wanted to ask about pricing."
  data-greeting-text="Questions? We're here to help!"
  async
  defer
></script>

2. More HTML attributes:

• data-phone (string, required): destination number, digits only, country code plus area code first.
• data-message (string): text that pre-fills the chat when a visitor opens it.
• data-position (right or left): which corner the button sits in. Defaults to right.
• data-color / data-color-dark (color): the two stops of the button’s gradient.
• data-greeting (true/false): shows or hides the greeting bubble.
• data-greeting-text (string): copy shown inside the greeting bubble.
• data-greeting-delay (milliseconds): how long the button waits before the bubble appears. Defaults to 2500.
• data-greeting-autohide (milliseconds): time until the bubble hides on its own. 0 disables auto-hide.
• data-remember-close (true/false): once a visitor closes the bubble, this keeps it closed for the rest of the browser session.
• data-badge (true/false): toggles the small notification dot on the button.
• data-bottom-offset / data-side-offset (CSS length): distance from the bottom and side edges of the screen.
• data-z-index (number): stacking order. Defaults to 999999.
• data-aria-label (string): the accessible label read by screen readers.

Advanced Examples:

Move The Button To The Left

<script
  src="/assets/js/whatsapp-floating-button.min.js"
  data-phone="442071234567"
  data-message="Hello! I would like to request a quote."
  data-position="left"
  data-side-offset="28px"
  data-bottom-offset="24px"
  data-color="#1f9d55"
  data-color-dark="#157347"
  async
  defer
></script>

Control The Greeting Bubble

<script
  src="/assets/js/whatsapp-floating-button.min.js"
  data-phone="61255501234"
  data-message="Hi! Can you tell me more about this offer?"
  data-greeting="true"
  data-greeting-text="Questions about this offer? Message us."
  data-greeting-delay="1500"
  data-greeting-autohide="6000"
  data-badge="false"
  async
  defer
></script>

WordPress Integration

The repository includes a standalone embed file for WordPress sites. Edit its phone number and message, then place the complete block inside a Custom HTML widget in a footer widget area.

A supplied mu-plugin provides another option for sites that need the button across the entire installation. Edit the configuration in wafb-mu-plugin.php and place the file in:

wp-content/mu-plugins/

WordPress loads a mu-plugin automatically, which removes the need for a theme-specific widget area.

Styling And Customization

The main visual settings are available through data-color, data-color-dark, data-position, data-bottom-offset, data-side-offset, and data-z-index.

<script
  src="/assets/js/whatsapp-floating-button.min.js"
  data-phone="33123456789"
  data-color="#6f42c1"
  data-color-dark="#4c2a85"
  data-bottom-offset="32px"
  data-side-offset="32px"
  data-z-index="5000"
  async
  defer
></script>

Alternatives:

• Highly Customizable Floating Whatsapp Chat Button – whatsappButton.js
• Material Floating Action Button In JavaScript – Bubbler