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.
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
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
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
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
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
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