How to create a click to call button without navigating away from the current page?

Question

I have a "Click to call" button on my website. Then the user clicks it, he/she is navigated to a different page.

Here is my HTML markup

<a href="tel:+18001234567" class="btn btn-lg btn-danger btn-block click-to-call">
    <strong>Call Now</strong>
</a>

How can I change my code so that the user stays on the same page when they click to call? My goal is to trigger the phone to dial a given number while keeping the user on the same page.

Answer 1

Click to call function requires two requirements.

Wrap all phone numbers in hyperlinks with the tel: schema.

Always use the international dialing format.

According to your HTML markup your number format is wrong. US numbers contain 11 digits but yours only contains 10 digits.

<a href="tel:+1800123456" class="btn btn-lg btn-danger btn-block click-to-call">
    <strong>Call Now</strong>
</a>

Please use correct number format.

<a href="tel:+1-303-499-7111">+1 (303) 499-7111</a>

For more info: https://developers.google.com/web/fundamentals/native-hardware/click-to-call/

I have tested this https://jsfiddle.net/vqmkfaxj/5/ on IOS and worked for me, refer the screenshot.