Mobile Action Bar Widget
Give phone visitors the app-style bar they expect along the bottom of the screen: up to five large actions with icons and short names - Call, WhatsApp, Directions, Share, Book - always under the thumb, and out of the way on desktop.
Live preview
Under the widget on your page: Powered by A2Z Tools
Embed code
Fill in the required fields above - until then this code shows nothing on your site.
<div data-a2z-kit="mobile-action-bar" data-actions="phone,whatsapp,maps,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
Below a breakpoint - 768 px by default - the kit fixes a bar to the bottom edge of the viewport, pads it by env(safe-area-inset-bottom) so it clears the home indicator on recent iPhones, and inserts an invisible spacer of the same height at the end of your page so your footer's last line can still scroll into view above it. Each slot is an equal share of the width with a 54 px tap target. Choose up to five actions: call (tel:), WhatsApp (wa.me with an optional message), email (mailto:), text (sms:), Telegram (t.me), directions (Google Maps, Apple Maps, or a small menu offering both), share (navigator.share where the browser has it, otherwise the address is copied and 'Copied' is announced), your website, a booking page, one custom 'Label | URL' link, and your Instagram or Facebook profile. Profile links are accepted only when their host name belongs to that network, so instagram.com.evil.example is refused. With 'hide while scrolling down' on, the bar slides away as the reader moves down an article and returns the moment they scroll up or tab into it with a keyboard.
Method
- Visible when window width < breakpoint (360-1400 px, default 768) or always; spacer height = rendered bar height
- Bar padding-bottom = 6 px + env(safe-area-inset-bottom); at most 5 actions, each flex: 1
- Share: navigator.share({ title, url }) if available, else clipboard copy of the page address
- Profiles: A2ZNetworks.detectProfile(url) must return the same network (host-name match, not label)
- Hide while scrolling: hidden after moving down more than 4 px past 120 px; shown again on any upward scroll or focus
Worked examples
A cafe bar
Inputs: actions phone,whatsapp,maps,share,link; phone +44 20 7946 0123; address 14 Mill Lane, Northside; link Menu | riverside-cafe.example/menu
Result: Call -> tel:+442079460123 | WhatsApp -> https://wa.me/442079460123 | Directions -> https://www.google.com/maps/dir/?api=1&destination=14%20Mill%20Lane%2C%20Northside | Share -> share sheet | Menu -> https://riverside-cafe.example/menu
The bare menu address gets https:// added; the custom link's label becomes its name in the bar.
A refused profile
Inputs: actions phone,instagram; instagram https://instagram.com.evil.example/cafe
Result: Only Call is shown
The host name is instagram.com.evil.example, which is not Instagram, so the slot is dropped rather than mislabelled.
Limitations
- At most five actions, and one custom link.
- Another fixed bottom element on your site (a cookie bar, a chat widget) can overlap it; adjust one of them.
- Instagram and Facebook actions link to your profile - they are not share buttons.
Where publishers use it
- A restaurant whose mobile visitors want three things - call, directions, menu - without scrolling to the footer
- A hair salon pairing Call with a Book button that goes to its online booking page, and Instagram for its portfolio
- An emergency plumber or locksmith that needs the call action visible on every screen of a long service page
- A blog adding Share and WhatsApp to its article pages on phones only, with the bar hiding as readers scroll down
Questions
Will the bar hide my footer or cookie notice on phones?
The kit adds a spacer to the end of your page that matches the bar's height, so the footer can always be scrolled above it. A cookie banner that is also fixed to the bottom will overlap - give the banner a bottom offset, or turn on 'hide while scrolling down'.
Why does it not appear on my desktop?
By default the bar is for screens narrower than 768 px, where a sticky bottom bar is a familiar pattern. Set 'Show on' to Always, or change the breakpoint, if you want it on wider screens too. The builder preview always shows it.
What does the Share action do?
On phones and in most current browsers it opens the device's own share sheet with the page title and address. Where the Web Share API is missing it copies the address and says 'Copied' - it never opens a social network on its own.
Can I use my own short names?
Yes, through 'Button names': one 'action | name' line each, up to 16 characters so five names still fit on a 320 px screen. Turn names off for an icon-only bar; each icon then carries its name for screen readers.
How many actions can it hold?
Five. More would shrink each target below a comfortable thumb width on small phones; use the Floating Contact Button for a longer list.
Sources
- Web Share API - W3C . navigator.share() for the Share action
- CSS Environment Variables Module Level 1 - W3C CSS Working Group . safe-area-inset-bottom
- Get started with Maps URLs - Google for Developers . directions link
- How to use click to chat - WhatsApp Help Center . wa.me link
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 Mobile Action Bar https://a2z.tools/embed/mobile-action-bar
<a href="https://a2z.tools/embed/mobile-action-bar">A2Z Tools Mobile Action Bar</a>
[A2Z Tools Mobile Action Bar](https://a2z.tools/embed/mobile-action-bar)
Mobile Action Bar by A2Z Tools - https://a2z.tools/embed/mobile-action-bar
Related widgets
-
A round corner button that unfolds into labelled Call, WhatsApp, Email, Directions and booking actions.
-
One large click-to-call button, optionally showing the number, your opening hours and a text link.
-
A 'Get directions' button that opens Google Maps or Apple Maps with your address as the destination.
-
Large Call, Text, Email, WhatsApp and custom-link tap targets in a stack, row or pill bar.
-
A digital business card with call, email, website and directions buttons plus a .vcf contact download.
-
A scroll-to-top button that waits until readers scroll, with a progress ring and keyboard-friendly focus.
