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:

• React Website
• HTML Website
• Conclusion

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>

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:[phone]" className="btn btn-success">
          Call
        </a>

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

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:[phone]" className="btn btn-success">
          Call
        </a>

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

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>

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:[phone]">
          Call
        </a>

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

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:[phone]">
          Call
        </a>

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

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
• Live website here

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!