Make Calls And Send Text From Your Website - React And HTML
Tags: react, html, tutorial, codenewbie
Published: 2020-12-16 09:53:42

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](#1)
* [HTML Website](#2)
* [Conclusion](#3)

In the [previous tutorial](https://dev.to/ebereplenty/add-whatsapp-chat-to-your-website-react-and-html-3a5g), 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!!!


<a name="1"></a>
## React Website
### Starter Code
We will be continuing from where we stopped in the [last tutorial](https://dev.to/ebereplenty/add-whatsapp-chat-to-your-website-react-and-html-3a5g). 

[Clone this repo](https://github.com/EBEREGIT/React-AOS-Tutorial/tree/react-aos-tut).

### Setup
Follow the [instructions on the readme](https://github.com/EBEREGIT/React-AOS-Tutorial) 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:

```html

      <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

```html

      <section>
        <a href="tel:2348101234567" 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

```html

      <section>
        <a href="tel:2348101234567" 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](https://github.com/EBEREGIT/React-AOS-Tutorial/tree/call-and-text)

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


<a name="2"></a>
## HTML Website
### Starter Code
We will be continuing from where we stopped in the [last tutorial](https://dev.to/ebereplenty/add-whatsapp-chat-to-your-website-react-and-html-3a5g). 

[Clone this repo](https://github.com/EBEREGIT/JS-AOS-Tutorial/tree/whatsapp-chat).

### 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:

```html

      <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

```html

      <section>
        <a href="tel:2348101234567">
          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

```html

      <section>
        <a href="tel:2348101234567">
          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](https://github.com/EBEREGIT/JS-AOS-Tutorial/tree/call-and-text)
* Live website [here](https://eberegit.github.io/JS-AOS-Tutorial/)

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

<a name="3"></a>
## 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!