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.
| Fact | Value |
|---|---|
| Tool | Bubble |
| Difficulty | Beginner |
| Time required | 10-15 min |
| Compatibility | All Bubble plans |
| Last updated | March 2026 |
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.
Prerequisites
- 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
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: <a href="tel:+15551234567" style="text-decoration:none;">Call Us: (555) 123-4567</a>. 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.
1<a href="tel:+15551234567" 2 style="display:inline-block; padding:12px 24px; 3 background:#3B82F6; color:white; 4 border-radius:8px; text-decoration:none;5 font-weight:bold;">6 �� Call Us: (555) 123-45677</a>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.
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: <a href="tel:[Current cell's Business's phone]">Call [Current cell's Business's name]</a>. 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.
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.
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.
Add SMS capability with sms: protocol
For text message links, use the sms: protocol instead: <a href="sms:+15551234567">Text Us</a>. You can pre-fill the message body on some devices: <a href="sms:+15551234567?body=Hi, I have a question about...">Text Us</a>. 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 working example
1CLICK-TO-CALL SETUP2====================34METHOD 1: Static Phone Number (HTML element)5 <a href="tel:+15551234567">Call (555) 123-4567</a>67METHOD 2: Dynamic Phone Number (HTML element)8 <a href="tel:[Current cell's Business's phone]">9 Call [Current cell's Business's name]10 </a>1112METHOD 3: Bubble Link Element13 Link element → External URL → tel:+1555123456714 (Less flexible for styling but simpler)1516SMS LINK:17 <a href="sms:+15551234567">Text Us</a>18 <a href="sms:+15551234567?body=Hello!">Text with message</a>1920CLICK TRACKING:21 Data Type: CallClick22 - phone_number (text)23 - user (User, optional)24 - Created Date (auto)25 26 Workflow: On call button click27 → Create CallClick record28 → Then open tel: link2930DEVICE DETECTION (JavaScript):31 var isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent);32 if (isMobile) {33 window.location.href = 'tel:+15551234567';34 } else {35 // Copy number to clipboard or show popup36 navigator.clipboard.writeText('+15551234567');37 }Common mistakes when adding click-to-call in Bubble
Why it's a problem: Using a local phone number format instead of international
How to avoid: Always use the international format in tel: links: +15551234567 (country code + number, no spaces or dashes)
Why it's a problem: Not handling desktop users
How to avoid: Detect the device type and provide a copy-to-clipboard alternative for desktop users
Why it's a problem: Forgetting to track call button clicks
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I need to add click-to-call buttons to my Bubble.io app. Some buttons use static numbers, others use dynamic numbers from a business listing database. I also need analytics tracking. How do I set this up?
Add click-to-call functionality to my business listing page. Each listing should have a call button with the business phone number from the database. Track clicks for analytics.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation