Add Call and Directions Buttons to Your Cafe Site

Thomas Garner

Oct 7

11 min read

Your customers mostly arrive on a phone, and a lot of them are deciding in the moment whether to call ahead or just walk in. Short answer: a tap to call button and a directions button do more for that visitor than most redesigns, and both take under an hour to set up correctly once you know the right link formats and where to put them. Neither one requires a rebuild of your site, just two links added in the right place with the right format.

This post gives you the exact link format for each button, where it should sit on a phone screen, the platform specific way to add one on Wix, Squarespace, and Shopify, and a simple way to see whether anyone is actually tapping them. By the end you should have two working buttons and a basic way to count taps, nothing more elaborate than that. None of it requires a developer, a paid plugin, or more than about an hour of focused attention.

The Call Button: Getting the Link Right

A tap to call button relies on a simple, standard web address format: tel: followed by the phone number. This tel: link format is a documented, standard way for a browser or phone operating system to recognize that tapping the link should offer to place a phone call, rather than open a page. Most modern mobile browsers recognize this format automatically and prompt the user to call, without needing any extra plugin or script. This is standard behavior built into how phones handle web links generally, not a special feature you need to enable or a paid tool you need to install.

The most common mistake is formatting the number inconsistently, mixing parentheses, spaces, and dashes in a way that some devices parse correctly and others do not. The safer approach is to keep the number in the link itself simple and consistent, digits only after the tel: prefix, while displaying it however you like visually to the reader. What the reader sees on the page and what is encoded in the actual link do not have to look identical, only the encoded version needs to be clean. This small piece of technical care is easy to overlook once a site has been live for a while and nobody thinks to check it again.

It is worth testing the button yourself on your own phone before considering it done. Tap it, confirm your phone offers to place the call rather than doing nothing or opening an error page, and check that the number it is calling matches the number your customers actually expect to reach. A wrong or outdated number behind a working looking button is worse than no button at all, because it wastes a customer's moment of intent to reach you.

If your cafe uses more than one phone number, a landline for the counter and a separate cell number for a manager, for instance, make sure the number in the tel: link is the one you want ringing when a customer taps it from the website. It is easy to copy a number from an old business card or an outdated listing without noticing it no longer matches the number your staff is answering, and that mismatch only surfaces once a customer complains they could not get through.

The Directions Button: Getting the Link Right

For directions, Google documents a Maps URL format built specifically for this purpose, using a web address structure that opens Google Maps with your location already set as the destination. Rather than linking to a generic search for your business name and hoping Maps resolves it correctly, a directions link built with your exact address, or ideally your Google Business Profile's specific place information, removes the guesswork and sends a visitor straight to accurate directions.

On a phone, a properly formatted Maps link will typically open directly in the Google Maps app if it is installed, or fall back to opening in the mobile browser if it is not. This behavior follows from how mobile operating systems handle Maps style links generally, recognizing the destination and offering the most direct path to routing directions rather than a plain search results page. The visitor does not need to type anything or search again once the link opens, the destination is already set.

As with the call button, testing matters here more than getting the link format theoretically correct. Tap the directions link on your own phone, confirm it opens to your actual correct address, and confirm the routing options that come up are the ones you would expect a customer walking in from a nearby hotel or a parked car to see. An address typo in this link sends real customers to the wrong place, which is a far more damaging mistake than a broken button that visibly does nothing.

It also helps to check the link from a computer or desktop browser, not only a phone, since some visitors will look up directions before leaving home rather than while already nearby. A directions link that behaves correctly on a phone but opens strangely or fails to resolve properly on a desktop browser is still worth fixing, even though most of your foot traffic decisions happen on mobile. A quick check on both device types takes only a few extra minutes and closes off an easy gap in coverage.

Where the Buttons Should Sit

On a phone screen, both buttons should be reachable without scrolling on your homepage, ideally near the top where a visitor's attention naturally lands first. A visitor who has already decided to call or get directions does not want to hunt through a menu or scroll past several sections of the page to find the option, since that friction is exactly the moment they might give up and search for a different option instead.

The W3C's WCAG 2.2 accessibility guidance on target size recommends a minimum touch target area for interactive elements like buttons, generally guiding toward at least 24 by 24 CSS pixels as a baseline, with a larger target recommended as good practice for anything a visitor is likely to tap quickly or under time pressure, like a call or directions button on a phone. A button that is technically clickable but visually tiny invites a mistap, which is frustrating on any page but especially frustrating when the visitor's whole reason for tapping was urgency.

In practice, this means giving both buttons real visual weight, not shrinking them to fit alongside other, less time sensitive elements on the page. A cafe homepage can reasonably treat these two buttons as some of the most important interactive elements on the entire site, since a visitor tapping either one is expressing about as clear an intent to visit as a website can capture.

Spacing between the two buttons also matters, not just their individual size. If a call button and a directions button sit close together, a visitor moving quickly on a phone can easily tap the wrong one, calling when they meant to get directions or the reverse. Leaving a bit of clear space between the two, or stacking them with a visible gap rather than placing them edge to edge, reduces that risk without requiring either button to be smaller than it should be.

Adding the Buttons on Your Platform

On Wix, a button element can be added directly to a page through the site editor, with its link set to either the tel: format for calling or the Maps URL format for directions, using the editor's link settings panel rather than needing any custom code. The same button element can then be styled and resized to meet a comfortable tap target size directly within the editor.

On Squarespace, buttons are added similarly through a button block, with the link destination field accepting either link format directly. Squarespace's own help documentation for adding buttons and links covers the general steps for inserting a button block and setting its destination, which applies the same way whether the destination is a phone number or a Maps address. Preview mode lets you check the button's placement and size on a simulated phone screen before publishing anything live.

On Shopify, a button can be added through the theme editor as a custom button block on the homepage or through a rich text section, with the link field again accepting either format. Because Shopify sites are commerce focused by default, it is worth explicitly checking that a call or directions button is not accidentally buried beneath product focused sections that push it below the fold on a phone screen, which is a common layout issue on commerce platforms built primarily around selling goods rather than driving a physical visit.

Whichever platform you use, the underlying task is the same three steps: place a button element, set its link to the correct tel: or Maps format, and preview the result on an actual phone before publishing. None of the three platform specific paths above require custom code or a developer, though a developer can certainly help if the theme or template you are working with makes button placement more complicated than the platform's own documentation suggests it should be.

Counting Taps Without a Paid Tool

Once both buttons are live, it is worth knowing whether anyone is using them, and this does not require a paid call tracking service to start understanding at a basic level. GA4's own documentation covers setting up events, and a click event can be configured to fire when a visitor taps either button, giving you a simple count over time inside your existing analytics setup.

If your site runs on Wix, Wix Analytics offers its own event tracking inside the platform, which can be configured similarly to note when a visitor interacts with a specific button element, without needing to set up GA4 separately if you would rather stay inside a single dashboard.

Whichever tool you use, the setup itself only has to be done once. After the initial configuration, the event fires automatically every time a visitor taps the button, and checking the count becomes a matter of glancing at a report rather than doing anything new each time. This is the kind of tracking that rewards being set up correctly at the start and then largely left alone.

The point of this tracking is not to build an elaborate reporting system, it is to answer one simple, useful question over time: are people using these buttons at all. A basic count checked every month or two is enough to know whether the buttons are being noticed and used, and whether it might be worth making them more prominent if the numbers look lower than expected.

It is worth naming clearly what this kind of tracking cannot tell you. A tap on the call button does not confirm the call was completed, and a tap on the directions button does not confirm the visitor made the trip. What it does confirm is intent, a visitor engaging with the exact action the button was built to prompt, and that is still meaningfully more information than having no visibility into whether these buttons are being used at all, which is where most cafe sites currently stand.

Frequently Asked Questions

What is the correct link format for a tap to call button?

Use the tel: prefix followed by the phone number, keeping the number itself simple and consistent inside the link, digits only. What is visually displayed to the reader can be formatted however you like, but the underlying link should stay clean so mobile browsers and phone operating systems recognize it reliably as a call action.

What link format works for a directions button?

Google documents a Maps URL format built to open Google Maps with a specific destination set directly, rather than linking to a generic search. Using your exact address or your Google Business Profile's place information in that link sends a visitor straight to accurate directions instead of leaving Maps to guess which result matches your business.

Where should these buttons appear on a cafe homepage?

Both buttons should be reachable without scrolling, ideally near the top of the page on a phone screen. A visitor who has already decided to call or get directions should not have to hunt through a menu or scroll past several sections first, since that friction can cause them to give up and look elsewhere.

How big should the buttons be on a phone?

Make each button at least 24 by 24 CSS pixels, the baseline in the W3C's WCAG 2.2 target size guidance, and larger if you can, since calling or getting directions is a quick, time sensitive tap. Place both on the homepage where a phone visitor sees them without scrolling. Leave clear space between them, or stack them with a visible gap, so someone moving fast does not call when they meant to get directions. Give them real visual weight instead of shrinking them to fit beside less urgent elements.

How do I add these buttons on Wix?

Add a button element in the Wix site editor, then open the editor's link settings panel and set the destination to either the tel: format, digits only after the prefix, or a Google Maps URL with your exact address as the destination. Resize and style the button right there to meet at least the 24 by 24 CSS pixel target from WCAG 2.2. No custom code is needed. Before calling it done, tap both buttons on your own phone to confirm the right number rings and the right address opens.

How do I add these buttons on Squarespace or Shopify?

On Squarespace, insert a button block and put either the tel: link or the Google Maps URL in its link destination field, following Squarespace's own help documentation for adding buttons and links, then use preview mode to check it on a simulated phone screen. On Shopify, add a custom button block through the theme editor or a rich text section. Commerce themes tend to stack product sections near the top, so check that the call and directions buttons are not pushed below the fold on a phone.

Can I track how many people tap these buttons without a paid service?

Yes. GA4's own documentation covers setting up events, and a click event can fire each time a visitor taps either button, giving you a running count inside the analytics you already have. On Wix, Wix Analytics offers similar built in event tracking if you would rather stay in one dashboard. Set it up once and check the count every month or two. A tap shows intent, not a completed call or a finished trip, but that is still far more visibility than most cafe sites have.

Should I test the buttons myself before considering the setup finished?

Yes. Tap the call button and confirm your phone offers to dial the correct number. Tap the directions button and confirm it opens to your actual, correct address. A wrong number or a typo in the address behind a working looking button is a worse outcome than no button at all, since it wastes a customer's exact moment of intent.

Do these buttons directly increase calls or visits?

This post does not claim that adding these buttons produces a specific increase in calls or visits, since no data available here measures that. What can be said is that they remove real friction for a visitor who has already decided to act, which is a reasonable, low risk improvement regardless of how it is ultimately measured for your specific cafe.

Do I need a call tracking vendor to do any of this?

No. Everything in this post runs on two standard, free pieces: the tel: link format, which phones recognize as an offer to place a call, and Google's documented Maps URL format for directions. Counting taps uses free event tracking in GA4 or Wix Analytics, set up once. Paid call tracking services are a separate category with their own pricing and features, outside the scope here. The whole setup, both buttons plus tap counting, takes about an hour on Wix, Squarespace, or Shopify without a developer.

Work with Hillcane

Two buttons, a call link and a directions link, take under an hour to add correctly and remove real friction for a visitor who has already decided to act.

If you want help setting up and tracking your cafe's call and directions buttons, reach Hillcane at hillcane.co/contact or call (256) 384-2449.