I have TMA (Telegram Mini Application), on the seller details block I have a button using which the user can make a call by seller number.
Problem: When the user clicks on the phone number button to call a seller automatically opens the phone app without the already entered phone number.
My current working solution for IOS:
const handleCall = () => {
const phoneNumber = detailUserInfo.phone.trim().replace(/\D/g, '');
if (phoneNumber) window.open(`tel:+${phoneNumber}`);
else console.error('Invalid phone number');
};
<Button onClick={handleCall} size='large' variant='primary'>
Make a call
</Button>
Unfortunately, this solution doesn't work on Android (actually it opens the phone app without already entering the phone number).
I've already tried solutions like these:
Encoding phone number (doesn't work on any OS)
const handleCallDefault = () => {
const phoneNumber = detailUserInfo.phone.trim().replace(/\D/g, '');
if (phoneNumber) {
const formattedNumber = `+${phoneNumber}`;
const encodedNumber = encodeURIComponent(formattedNumber);
window.open(`tel:${encodedNumber}`, '_blank', '_system');
} else {
console.error('Invalid phone number');
}
};
Object window.location.hef
const handleCallUtilsWindowLocation = () => {
const phoneNumber = detailUserInfo.phone.trim().replace(/\D/g, '');
if (phoneNumber) {
const formattedNumber = `+${phoneNumber}`;
const encodedNumber = encodeURIComponent(formattedNumber);
window.location.href = `tel:${encodedNumber}`;
} else {
console.error('Invalid phone number');
}
};
Next.js Link component (works for IOS)
<Link href={`tel:+${detailUserInfo.phone}`} target='_blank'>
Make a call
</Link>
Anchor tag <a href>
<a href={`tel:+${detailUserInfo.phone}`} target='_blank'>
Make a call
</Link>
Any of this options doesn't works correctly in Telegram webview, but it works in browser.
Thanks in advance for any recommendation
It was already solved in the latest Telegram Mini App update.