Floating Contact Button Widget

Pin one round contact button to the corner of every page. A tap unfolds a short stack of labelled actions - call, WhatsApp, email, Telegram, Messenger, text, directions, your contact form and your booking page - so a visitor picks the channel they actually use instead of hunting through your footer.

Website Essentials Website component No trackers, no cookies Free · no ads

Customize your widget

Actions
Actions

Loading networks…

In the order they stack. Also accepted in the embed code: sms, messenger, maps, website (contact page), booking.
Shown as you type it; dialled as digits. Include the country code if visitors call from abroad.
International format with the country code. Blank uses the phone number.
5-32 letters, digits or underscores, with or without @.
Message
Your own words - nothing is calculated.
Optional. Visitors can dismiss it for the rest of their visit.
Button
Read by screen readers; shown on the button when the next option is on.
Advanced
Light or dark
Match page reads the background behind the component.

Live preview

Exactly what your visitors will see

Embed code

Fill in the required fields above - until then this code shows nothing on your site.

<div data-a2z-kit="floating-contact-button" data-actions="phone,whatsapp,email"></div>
<script async src="https://a2z.tools/embed/kit.js" referrerpolicy="no-referrer"></script>

One small script from A2Z draws the component on your page inside its own Shadow DOM. It loads no social-network or tracking scripts and sets no cookies. How the A2Z kit works.

Works with

How it works

The kit script draws the button inside a Shadow DOM fixed to the bottom-right or bottom-left corner, offset by the pixels you choose and lifted above the iPhone home indicator with env(safe-area-inset-bottom). Each action you list is built only if its value passes a check: a phone number must reduce to 5-16 digits with an optional leading plus once spaces, dots, dashes and brackets are removed, and becomes tel:+15550100123; WhatsApp needs a country code and becomes https://wa.me/15550100123 with your prefilled message percent-encoded; Telegram takes a 5-32 character public username for https://t.me/name; Messenger takes your Facebook Page username for an m.me link; email becomes mailto: with an encoded subject; Directions opens the Google Maps URLs API, Apple Maps, or a two-line menu offering both. An action whose value fails is left out - the stack never shows a dead link. Opening the stack sets aria-expanded, moves keyboard focus to the first action and keeps every label visible beside its icon; Escape or a tap outside closes it and returns focus to the button. The optional greeting bubble and availability line are your own words - nothing is computed, and no 'agent is typing' animation is ever shown.

Method

  • Phone: strip spaces . - ( ), require ^\+?[0-9]{5,16}$, link tel:<digits>; the number is displayed as you typed it
  • WhatsApp: digits only, a leading + or 00 dropped, first digit 1-9, 7-15 digits -> https://wa.me/<digits>?text=<encoded message>
  • Telegram: https://t.me/<username>, username ^[A-Za-z0-9_]{5,32}$; Messenger: https://m.me/<Page username>
  • Email: mailto:<address>?subject=<encoded>&body=<encoded>; SMS: sms:<digits>?&body=<encoded>
  • Directions: https://www.google.com/maps/dir/?api=1&destination=<encoded address or lat,lng> or https://maps.apple.com/?daddr=<encoded>
  • Encoding: encodeURIComponent plus ! ' ( ) *, so quotes, & ? and # in a message can never break a link

Worked examples

A cafe's three actions

Inputs: actions phone,whatsapp,maps; phone +1 (555) 010-0123; message Hi! Is there a table for 4 at 7:30?; address 14 Mill Lane, Northside

Result: Call us -> tel:+15550100123 | WhatsApp -> https://wa.me/15550100123?text=Hi%21%20Is%20there%20a%20table%20for%204%20at%207%3A30%3F | Get directions -> https://www.google.com/maps/dir/?api=1&destination=14%20Mill%20Lane%2C%20Northside

The phone number is reused for WhatsApp because no separate WhatsApp number was given; the question mark and colon are encoded so the message arrives intact.

A value that fails its check

Inputs: actions phone,whatsapp,telegram; phone 020 7946 0000; telegram @abc

Result: Call us -> tel:02079460000 (WhatsApp and Telegram are left out)

020 7946 0000 is a valid number to dial in the UK but has no country code for WhatsApp, and abc is shorter than Telegram's five-character minimum.

Directions with a choice of maps

Inputs: actions maps; provider ask; address 51.5007,-0.1246

Result: Google Maps -> https://www.google.com/maps/dir/?api=1&destination=51.5007%2C-0.1246 | Apple Maps -> https://maps.apple.com/?daddr=51.5007%2C-0.1246

Coordinates are accepted only inside latitude -90..90 and longitude -180..180; the comma is percent-encoded.

Limitations

  • It opens the visitor's own apps; it cannot place a call, send a message or tell whether you are online.
  • SMS and phone actions need a device that can call or text; on a desktop computer they open whatever app is registered (or nothing).
  • Messenger opens a conversation through an m.me link, so it needs the username of your Facebook Page.
  • The greeting bubble's 'closed' state lasts for the browser tab only, by design.

Where publishers use it

  • A dental practice that takes bookings by phone and by an online form, wanting both one tap away on every treatment page without a heavy live-chat script
  • A cafe or small restaurant offering Call, WhatsApp and Directions from its menu pages, with a greeting that says when the kitchen answers messages
  • A tradesperson's site whose visitors mostly arrive on phones from local search and need the call action and the WhatsApp action side by side
  • A consultancy that prefers email and a booking calendar, with Messenger offered for visitors who found it through its Facebook Page

Questions

Is this a live chat?

No. It is a launcher for channels you already answer - your phone, WhatsApp, inbox, Telegram or Messenger. Nothing is typed into the page and nothing reaches A2Z; the visitor's own app opens with your details filled in. That is why there is no 'online now' dot or typing indicator: the widget cannot know whether you are available, so the availability line is simply the sentence you write.

Which actions appear if a value is wrong?

Only the ones that pass their check. A WhatsApp number written as 020 7946 0123 (no country code), a Telegram name of four characters or an email without a domain is dropped silently on your live page, and the builder preview tells you which field to fix. The remaining actions keep their order.

Will it cover content on a phone?

The closed button is a single 56 px circle (48 or 64 px if you prefer) in a corner, above the safe area. The open stack is at most 300 px wide, scrolls inside itself if a short screen needs it, and closes with Escape, a second tap on the button or a tap anywhere else on the page.

Can visitors choose Google Maps or Apple Maps?

Yes. Set Directions to Ask and the Directions action opens a two-line menu: Google Maps (the documented Maps URLs API) or Apple Maps. Choose Google or Apple instead to send everyone straight to one of them. Coordinates such as 51.5007,-0.1246 are accepted when they fall inside -90..90 and -180..180.

Can I rename the actions or write them in another language?

Yes. The Button names box takes one 'action | name' line each - phone | Appelez-nous, maps | Nous trouver - and those names appear beside the icons. They are shown as plain text, never as HTML.

Sources

  1. How to use click to chat - WhatsApp Help Center . https://wa.me/<number>?text=<URL-encoded text>; full international number without + or leading zeros
  2. Deep links: public usernames - Telegram APIs . https://t.me/<username> opens a chat with a public user, bot or channel
  3. m.me links - Meta for Developers - Messenger Platform . https://m.me/<PAGE-NAME> opens a conversation with a Page
  4. Get started with Maps URLs - Google for Developers . Directions action: https://www.google.com/maps/dir/?api=1&destination=
  5. Map Links - Apple Developer (Apple URL Scheme Reference) . daddr = destination address
  6. RFC 3966: The tel URI for Telephone Numbers - IETF . visual separators carry no meaning; global numbers start with +

Cite or recommend this tool

If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.

A2Z Tools Floating Contact Button
https://a2z.tools/embed/floating-contact-button

Related widgets

More Website Essentials widgets →

  • Floating WhatsApp Button

    Website Essentials Website component New

    A green WhatsApp bubble in the corner that opens a chat with your number and a ready-written first message.

    Get code

  • Mobile Action Bar

    Website Essentials Website component New

    A bottom bar for phones with up to five big actions: call, WhatsApp, directions, share, book.

    Get code

  • Call Now Button

    Website Essentials Website component New

    One large click-to-call button, optionally showing the number, your opening hours and a text link.

    Get code

  • Contact Buttons

    Business & Contact Tool New

    Large Call, Text, Email, WhatsApp and custom-link tap targets in a stack, row or pill bar.

    Get code

  • Business Card Widget

    Business & Contact Tool New

    A digital business card with call, email, website and directions buttons plus a .vcf contact download.

    Get code

  • Back to Top Button

    Website Essentials Website component New

    A scroll-to-top button that waits until readers scroll, with a progress ring and keyboard-friendly focus.

    Get code

Preview

CustomizeGet code
A2Z EMBEDS FOR YOUR WEBSITE