Skip to content

Simple Header with Click-to-Call: A Quick Checklist

Why this matters

Make it easy for customers to call you. A clear header with click-to-call increases calls, saves time, and reduces lost leads—especially from mobile visitors.

Top-level decisions (pick one)

  • Mobile-first action: Always show a prominent click-to-call button on mobile.
  • Desktop option: Show number text in the header and a smaller click-to-call button on the right—only choose hide-on-desktop if calls come mostly from phones.

Design checklist (visible header)

  • Placement: Top-right of header or in the right side of the top bar. Example: top bar > logo left, nav center, call button right.
  • Button size: Minimum target 44x44 px (mobile touch rule). For desktop, 36 px height is OK but keep padding.
  • Color & contrast: Use a button color that contrasts with the background (WCAG contrast 4.5:1 for text). If unsure, pick a bold color used in your brand.
  • Text: Short, confident label: “Call Now”, “Call (555) 123-4567”, or icon + number. Decision rule: if you get many unknown callers, show full number; if you get repeats, “Call Now” is fine.
  • Icon: Add a phone icon to make intent obvious. Keep it left of text.

Technical checklist (click-to-call link)

  • Link format: Use tel:+CountryCodeNumber with no spaces or punctuation in the href. Example: <a href="tel:+15551234567">Call Now</a>
  • Visible number: Show the formatted number for humans (e.g., (555) 123-4567) inside the link or next to it.
  • Desktop fallback: If you don’t want accidental dials, make the number clickable only on small screens via CSS/JS or open a small confirm modal before dialing on desktop.

Analytics & tracking checklist

  • Track clicks: Add event tracking. Example for Google Analytics 4 (simplified): onclick="gtag('event','phone_click',{ 'phone':'+15551234567' })"
  • UTM for campaigns: If a campaign drives traffic, include a landing page with a special number or track source in analytics to know which channel brings calls.
  • Call tracking numbers: Use a call-tracking provider if you need per-campaign call reports. Decision rule: use tracking numbers only if call volume is >50/month or ROI matters.

Accessibility & UX checklist

  • Readable font size: Phone text at least 16px on mobile.
  • Keyboard users: Make sure the link is focusable and has a visible focus outline.
  • Screen readers: Add aria-label with the spoken phone number: aria-label="Call us at 555 123 4567".
  • Avoid auto-dial: Don’t auto-trigger calls. Let users initiate the click.

Examples you can copy

Simple mobile-first button HTML (paste into header):

<a href="tel:+15551234567" class="call-btn" aria-label="Call us at 555 123 4567" onclick="gtag('event','phone_click',{ 'phone': '+15551234567' })">📞 Call (555) 123-4567</a>

CSS notes: give .call-btn a high-contrast background, padding 12px 16px, border-radius 6px, and min-height 44px.

Testing checklist (do these now)

  • On mobile: tap the button—does the phone app open with the number? If not, fix the tel: link.
  • On desktop: click the button—does it behave as you expect (confirm modal or no action)?
  • Analytics: click the button and check real-time events in your analytics tool.
  • Contrast & size: view on a small phone and a laptop—text must be readable and button tappable.

Quick decision rules summary

  • If >60% of visits are mobile → make a large visible click-to-call button.
  • If calls are from many campaigns → use call-tracking numbers per campaign.
  • If you want fewer accidental desktop dials → show number as text on desktop, clickable on mobile only.

One-minute action list

  1. Add <a href="tel:+15551234567"> link wrapping your visible number or button.
  2. Make the button at least 44x44 px, with readable 16px+ text.
  3. Add onclick analytics and aria-label for screen readers.
  4. Test on a phone, desktop, and check analytics.

Done: a clear header that gets more calls and fewer confused visitors.