Notification Bubble

A floating button with an attention-grabbing notification badge and tooltip message. Perfect for driving engagement.

Customize Your Button

Fill in the details below and see your button come to life in real-time

Basic Settings

Phone Number

Include country code (e.g., +65 for Singapore)

Pre-filled Message

Notification Settings

Show Notification Badge

Badge Color

#EF4444

Badge Text

Show Tooltip Message

Tooltip Text

Pulse Animation

Colors & Size & Position

Background

#25D366

Icon Color

#FFFFFF

Button Size60px

Position

X Offset20px

Y Offset20px

Live Preview

Your Website

👋 Need help? Chat with us!

Export Code

<!-- WhatsApp Notification Bubble - Hosted Script -->
<!-- Add this before </body> -->
<script src="https://freewidget.online/widget/whatsapp/notification-bubble.js"
  data-phone="65"
  data-message=""
  data-tooltip="👋 Need help? Chat with us!"
  data-bg-color="#25D366"
  data-icon-color="#FFFFFF"
  data-button-size="60px"
  data-icon-size="32px"
  data-badge-color="#EF4444"
  data-badge-text="1"
  data-show-badge="true"
  data-show-tooltip="true"
  data-pulse="true"
  data-position="right"
  data-offset-x="20px"
  data-offset-y="20px"
  data-icon-type="whatsapp"
  data-custom-icon=""
></script>

📋 How to use: Paste this code just before the closing <code></body></code> tag in your HTML file.

How to Add the Button to Your Website

Simple instructions for all major platforms

WordPress

Go to Appearance → Theme Editor → footer.php or use a plugin like "Insert Headers and Footers". Paste the HTML code just before the closing {closingBody} tag.

Shopify

Go to Online Store → Themes → Edit Code. Find theme.liquid and paste the code before {closingBody}.

Plain HTML

Simply paste the generated HTML code anywhere in your HTML file, preferably just before the closing {closingBody} tag.

Wix

Use the Embed HTML element. Drag it onto your page and paste the button code. Position it in the corner for a floating effect.

Squarespace

Go to Settings → Advanced → Code Injection. Paste the code in the Footer section and save.

React / Next.js

Create a component with the button code. For Next.js, add it to your _app.tsx or layout component.

Frequently Asked Questions

Got questions? We've got answers.

Is this tool really free?

Yes, completely free! There's no signup, no payment, and no hidden costs. The tool runs entirely in your browser, and the generated code is yours to use however you like. We don't track your usage or store any data.

Will the button work on mobile devices?

Absolutely! The generated button is fully responsive and works on all devices. On mobile, clicking the button will directly open the WhatsApp app. On desktop, it opens WhatsApp Web or the desktop app if installed.

What format should the phone number be in?

Use the international format with country code, without any spaces, dashes, or plus signs in the link. For example: +65 9123 4567 (Singapore) or +1 555 123 4567 (USA). Our tool automatically strips non-numeric characters when generating the link.

Can I customize the button beyond the options here?

Yes! The generated HTML code uses inline styles, which you can easily modify. Change colors, sizes, fonts, shadows, or any CSS property. If you're using Tailwind CSS, you can convert the inline styles to utility classes for easier maintenance.

Does this comply with WhatsApp's terms of service?

Yes. This tool uses the official wa.me link format provided by WhatsApp for Click to Chat. It's the recommended way to let users start a conversation with you without saving your number first. No unofficial APIs or workarounds are used.

What's the difference between Static HTML and Hosted Script?

Static HTML gives you complete, self-contained code that you paste directly into your website. It never changes unless you manually update it. Hosted Script loads our widget.js file from our servers. Benefits: automatic updates, smaller code footprint, easy configuration via data attributes.