Contact Buttons Widget

Put big, thumb-friendly contact buttons on any page: Call, Text, Email with a ready subject line, WhatsApp with a pre-written message, and one custom link such as Book online. Choose a vertical stack that also shows each number, a row of tiles, or a compact pill bar.

Business & Contact Tool Runs in your browser Free · no ads

Customize your widget

Theme
Auto follows the visitor's light/dark setting.
Style
Attribution on your page
Optional and entirely your choice. The exact line is shown in the code below; it links to the tool with rel="nofollow".
More options
Starting values
Leave blank to use the widget's defaults. Visitors can still change every value.

Live preview

Exactly what your visitors will see

Embed code

<iframe src="https://a2z.tools/embed/w/contact-buttons" title="Contact Buttons by A2Z Tools" width="100%" height="460" style="border:0;width:100%" loading="lazy" allow="clipboard-write"></iframe>

A plain iframe. Works everywhere, including site builders that strip scripts. Adjust height if your content needs more room.

Works with

How it works

Each button is built by its own validating builder before it is shown. Call becomes tel: with the number reduced to digits and an optional plus, 4 to 15 digits long. Text uses an sms: link from the same rule, and v_sms=same reuses the call number. Email becomes mailto: and, if you set a subject, ?subject= with every character percent-encoded - Don't wait becomes Don%27t%20wait - so quotes and ampersands cannot break the link. WhatsApp needs the full international number: a + or 00 prefix is dropped, a number starting with 0 is refused because it lacks the country code, and the link is https://wa.me/447700900123?text= plus your encoded greeting. The custom link takes Label | URL and accepts https, http, tel or mailto. A button whose value fails its check is left out rather than shown broken, and the builder preview lists why. Labels are yours, up to 28 characters each. Every target is at least 46 px tall, and the first button carries the accent colour.

Method

  • tel:<digits> and sms:<digits> where digits match ^\+?\d{4,15}$ after removing spaces, ( ) . -
  • mailto:<address>?subject=<percent-encoded subject, including ! ' ( ) *>
  • https://wa.me/<country code + number, digits only, first digit 1-9, 7-15 digits>?text=<percent-encoded message>

Worked examples

WhatsApp with greeting

Inputs: whatsapp=+1 555 014 7788; waText=Hi! I'd like a table

Result: https://wa.me/15550147788?text=Hi%21%20I%27d%20like%20a%20table

Plus sign and spaces removed; the exclamation mark and apostrophe are percent-encoded too.

Email with subject

Inputs: [email protected]; subject=Don't wait

Result: mailto:[email protected]?subject=Don%27t%20wait

The apostrophe is encoded as %27 so the link stays valid inside any page.

Local number for WhatsApp

Inputs: whatsapp=07700 900123

Result: No WhatsApp button; preview note: give the full international number

A leading 0 means the country code is missing.

Limitations

  • The buttons only open the visitor's own apps; they cannot send a message, place a call or check whether a number is on WhatsApp.
  • One custom link only, and no click-to-call tracking - measure taps with your own analytics on the host page if you need them.
  • Inside the frame the pill bar cannot float over the page; sticky positioning has to come from the host site's CSS.

Where publishers use it

  • A plumber's, locksmith's or taxi firm's mobile home page where one tap must start a call
  • A salon or restaurant page offering WhatsApp booking with a pre-filled 'I would like to book' message
  • A landing page for paid ads that needs Call and Text options above the fold on phones
  • A school office or clinic contact page with email buttons that pre-fill the right subject line
  • A Shopify or WooCommerce store's help page linking to WhatsApp support and an order-tracking link

Questions

How should I write the WhatsApp number?

In full international format: country code then the number, without the leading 0 of the national trunk prefix. A UK mobile 07700 900123 is +44 7700 900123; the widget builds https://wa.me/447700900123. Writing 07700 900123 alone is refused, because WhatsApp cannot tell which country it belongs to.

Can the Text button pre-fill a message?

No. RFC 5724 defines sms:number?body=..., but iOS and Android have historically disagreed on the separator, so a body can arrive garbled or be dropped. The Text button opens a blank message to your number, which works everywhere; use the WhatsApp button when you want a pre-written greeting.

What happens on a desktop computer without a phone?

Call and Text hand the link to whatever the computer has registered - FaceTime or Phone Link, Skype, or nothing. That is why the stack layout also prints the number and address in text, so a desktop visitor can read and dial it. Email opens the default mail program, and WhatsApp opens WhatsApp Web or the desktop app.

Which layout suits which spot?

Stack (default) is one button per line with the number underneath - best in sidebars and on contact pages down to 280 px. Row lays the buttons out as square tiles that wrap, good under a hero section. Pill is a compact rounded bar with a soft shadow, the look of a floating contact bar, for footers. The number stays available to screen readers in every layout.

Can a visitor or a script misuse the links?

Every link is rebuilt from validated parts and then checked against an allow-list of https, http, mailto and tel (sms: has its own digits-only pattern). Anything else - javascript:, data:, a number with letters - is dropped. Labels are shown as plain text, never as HTML.

Will it float over my page like a chat bubble?

No. An iframe cannot position itself over the host page. The pill layout gives the look; to make it sticky, wrap the iframe in your own container with position: fixed and a bottom offset in your site's CSS.

Sources

  1. RFC 3966: The tel URI for Telephone Numbers - IETF . Global numbers start with + and carry the E.164 country code; visual separators - . ( ) carry no meaning, so the widget removes them. Checked 2026-10-01.
  2. RFC 5724: URI Scheme for GSM Short Message Service - IETF . sms: URI syntax and the optional body field the widget deliberately leaves out. Checked 2026-10-01.
  3. RFC 6068: The 'mailto' URI Scheme - IETF . subject= header field and percent-encoding of reserved and non-ASCII characters. Checked 2026-10-01.

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 Contact Buttons
https://a2z.tools/embed/contact-buttons

Related widgets

More Business & Contact widgets →

  • 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

  • Social Links Widget

    Business & Contact Tool New

    Up to 12 social profile links recognised by host name, as icons, labels or buttons.

    Get code

  • Business Hours

    Time & Date Clock & time

    Shows Open now or Closed and when you open next, in your business's own time zone.

    Get code

  • Donation Tiers Card

    Business & Contact Tool New

    A giving card with suggested amounts, an optional monthly switch and a Donate link to your own page.

    Get code

  • Team Cards

    Business & Contact Tool New

    Staff profiles with photo or initials, role, short bio and an email or LinkedIn button, grouped by department.

    Get code

  • Store Locator List

    Business & Contact Tool New

    Branch list by region with directions, call buttons and a town or postcode filter - no map API key.

    Get code

Preview

CustomizeGet code