DEV Community 👩‍💻👨‍💻

NJOKU SAMSON EBERE
NJOKU SAMSON EBERE

Posted on

Make Calls And Send Text From Your Website - React And HTML

Improving our users' experience is now very compulsory in every application we build in this generation. Every step we take to make the user's life easier matters. Adding a chat, call or text functionality is one of the ways we improve the user experience on our website.

Jump To:

In the previous tutorial, we learnt how to add WhatsApp chat to our website. This tutorial teaches us how to add call and text functionality to our website. We will be adding to both our React and HTML website.

LET's BEGIN!!!

React Website

Starter Code

We will be continuing from where we stopped in the last tutorial.

Clone this repo.

Setup

Follow the instructions on the readme to setup the project on your local machine.

Add 2 buttons

In the App.js file, Add 2 anchor tags just below the nav section with a the bootstrap button class like so:


      <section>
        <a href="" className="btn btn-success">
          Call
        </a>

        <a href="" className="btn btn-warning">
          Text
        </a>
      </section>

Enter fullscreen mode Exit fullscreen mode

Add call functionality

Here is where it get's interesting. To make it a call button instead of a normal link, you will have to begin the href value with tel: followed by the phone number you desire your user to reach out to. Begin the phone number with the country's code to avoid bugs. So your href value should look like this: "tel:<country-code><phone-number>"

Now add your desired value to the href of the call anchor tag. This is mine


      <section>
        <a href="tel:2348101234567" className="btn btn-success">
          Call
        </a>

        <a href="" className="btn btn-warning">
          Text
        </a>
      </section>

Enter fullscreen mode Exit fullscreen mode

Add text functionality

This is similar to the call functionality. In this case however, replace the tel in the href value to sms. So your href value should look like this: "sms:<country-code><phone-number>"

Now add your desired value to the href of the text anchor tag. This is mine


      <section>
        <a href="tel:2348101234567" className="btn btn-success">
          Call
        </a>

        <a href="sms:2348101234567" className="btn btn-warning">
          Text
        </a>
      </section>

Enter fullscreen mode Exit fullscreen mode

Testing the New features

Click on each of the buttons and you will get a popup asking you to pick an app to complete the process. That shows it is working.

If you want to see the function in full, host the application and open it on a mobile device.

All Codes are here

That is it!!! Your users can now make calls and send text messages from your React website.

HTML Website

Starter Code

We will be continuing from where we stopped in the last tutorial.

Clone this repo.

Setup

Just load the index.html file in your browser and you are all setup on your local machine.

Add 2 buttons

In the index.html file, Add 2 anchor tags just below the nav section with a the bootstrap button class like so:


      <section>
        <a href="">
          Call
        </a>

        <a href="">
          Text
        </a>
      </section>

Enter fullscreen mode Exit fullscreen mode

Add call functionality

Here is where it get's interesting. To make it a call button instead of a normal link, you will have to begin the href value with tel: followed by the phone number you desire your user to reach out to. Begin the phone number with the country's code to avoid bugs. So your href value should look like this: "tel:<country-code><phone-number>"

Now add your desired value to the href of the call anchor tag. This is mine


      <section>
        <a href="tel:2348101234567">
          Call
        </a>

        <a href="">
          Text
        </a>
      </section>

Enter fullscreen mode Exit fullscreen mode

Add text functionality

This is similar to the call functionality. In this case however, change the tel in the href value to sms. So your href value should look like this: "sms:<country-code><phone-number>"

Now add your desired value to the href of the text anchor tag. This is mine


      <section>
        <a href="tel:2348101234567">
          Call
        </a>

        <a href="sms:2348101234567">
          Text
        </a>
      </section>

Enter fullscreen mode Exit fullscreen mode

Testing the New features

Click on each of the buttons and you will get a popup asking you to pick an app to complete the process. That shows it is working.

If you want to see the function in full, host the application and open it on a mobile device.

Congratulations on reaching this feet. It's another progress in improving your users' experience.

Conclusion

We cannot over stress the importance of improving the user experience on our website by adding call and text functionalities. We have seen how to do this in 2 or 3 steps as the case may be.

Keep improving the user experience.

Thank you for reading!

Top comments (0)

🌚 Life is too short to browse without dark mode