# How to add click-to-call in Bubble
- Tool: Bubble
- Difficulty: Beginner
- Time required: 10-15 min
- Compatibility: All Bubble plans
- Last updated: March 2026
## TL;DR
A click-to-call button in Bubble uses the tel: protocol in a link that opens the user's phone dialer. This tutorial covers creating tel: links with HTML elements, handling dynamic phone numbers from the database, mobile versus desktop behavior, and tracking call button clicks for analytics.
## Overview: Adding Click-to-Call in Bubble
Click-to-call buttons let users initiate a phone call with a single tap. On mobile devices, tapping a tel: link opens the phone dialer. On desktop, it may open Skype, FaceTime, or another calling app. This tutorial shows you how to implement this in Bubble.
## Before you start
- A Bubble app where you want to add phone call functionality
- Phone numbers stored in your database or available as static text
- Basic understanding of Bubble elements and workflows
## Step-by-step guide
### 1. Create a click-to-call button using an HTML element
Add an HTML element to your page. Enter an anchor tag with the tel: protocol: Call Us: (555) 123-4567. Style it to look like a button using inline CSS or wrap it in a styled group. The tel: protocol tells the browser to initiate a phone call when clicked.
```
📞 Call Us: (555) 123-4567
```
> Pro tip: Always use the international format (+1 for US) in the tel: link for maximum compatibility across devices and carriers.
**Expected result:** A styled button that opens the phone dialer when tapped on mobile.
### 2. Use dynamic phone numbers from the database
For dynamic phone numbers (e.g., from a business listing), use Bubble's dynamic data insertion in the HTML element. Replace the hardcoded number with a dynamic expression: Call [Current cell's Business's name]. The dynamic value inserts the actual phone number from the database record.
**Expected result:** Click-to-call buttons display the correct phone number for each database record.
### 3. Handle desktop versus mobile behavior
On mobile devices, tel: links open the native phone dialer. On desktop computers, behavior varies: it may open Skype, FaceTime, or show a no app available message. To handle desktop gracefully, add a condition or use JavaScript to detect the device type. On desktop, consider showing a copy-to-clipboard action instead of a tel: link.
**Expected result:** Mobile users get the phone dialer; desktop users get a useful alternative like copy-to-clipboard.
### 4. Track call button clicks
To track how many users click your call button, add a workflow to the button or create a Click Data Type. When the call button is clicked, create a ClickEvent record with the phone number, current user (if logged in), and timestamp. This gives you analytics on call volume. Alternatively, use Google Analytics event tracking via a Run JavaScript action.
**Expected result:** Every call button click is recorded for analytics and reporting.
### 5. Add SMS capability with sms: protocol
For text message links, use the sms: protocol instead: Text Us. You can pre-fill the message body on some devices: Text Us. Place the SMS button alongside the call button for users who prefer text.
**Expected result:** Users can initiate text messages in addition to phone calls.
## Complete code example
File: `Workflow summary`
```text
CLICK-TO-CALL SETUP
====================
METHOD 1: Static Phone Number (HTML element)
Call (555) 123-4567
METHOD 2: Dynamic Phone Number (HTML element)
Call [Current cell's Business's name]
METHOD 3: Bubble Link Element
Link element → External URL → tel:+15551234567
(Less flexible for styling but simpler)
SMS LINK:
Text Us
Text with message
CLICK TRACKING:
Data Type: CallClick
- phone_number (text)
- user (User, optional)
- Created Date (auto)
Workflow: On call button click
→ Create CallClick record
→ Then open tel: link
DEVICE DETECTION (JavaScript):
var isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent);
if (isMobile) {
window.location.href = 'tel:+15551234567';
} else {
// Copy number to clipboard or show popup
navigator.clipboard.writeText('+15551234567');
}
```
## Common mistakes
- **Using a local phone number format instead of international** — Local formats like (555) 123-4567 may not work on all devices or in all countries. The international format ensures compatibility. Fix: Always use the international format in tel: links: +15551234567 (country code + number, no spaces or dashes)
- **Not handling desktop users** — Desktop users clicking a tel: link may see an error or be prompted to open an application they do not have Fix: Detect the device type and provide a copy-to-clipboard alternative for desktop users
- **Forgetting to track call button clicks** — Without tracking, you have no data on how many users are contacting you via the call button Fix: Create a ClickEvent record or fire a Google Analytics event when the button is clicked
## Best practices
- Use international phone format (+1XXXXXXXXXX) in all tel: links for maximum compatibility
- Style tel: links as buttons for clear visual affordance
- Provide a copy-to-clipboard fallback for desktop users
- Track call button clicks for analytics and conversion tracking
- Include both call and SMS options for user preference
- Test tel: links on actual mobile devices before deploying
## Frequently asked questions
### Does click-to-call work on all mobile devices?
Yes. The tel: protocol is supported by all modern mobile browsers on iOS, Android, and other platforms. It opens the native phone dialer.
### Can I track actual completed calls?
No. The tel: link only opens the dialer. You can track clicks but not whether the call was actually made or completed. For call tracking, use a service like CallRail or Twilio.
### How do I add a WhatsApp call button?
Use the WhatsApp API link: https://wa.me/15551234567. This opens WhatsApp with a chat to that number. It does not directly initiate a call but opens the chat where the user can call.
### Can I make a VoIP call from within my Bubble app?
Not natively. For in-app calling, you would need to integrate a service like Twilio or Agora via the API Connector. RapidDev can help build in-app communication features.
### Should I format the displayed number differently from the tel: link?
Yes. Display a human-readable format like (555) 123-4567 but use +15551234567 in the href. The display text and the link target can be different.
### Can I schedule calls or add calendar invites?
Not via the tel: protocol. For scheduled calls, build a booking system that creates calendar events. The click-to-call button is for immediate calls only.
---
Source: https://www.rapidevelopers.com/bubble-tutorial/implement-a-click-to-call-feature-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/implement-a-click-to-call-feature-in-bubble