Complete Guide on How to Send an SMS from a Website

How to send an SMS from a website

 

It has been long since mobile browsers have become more popularly used compared to desktop/laptop browsers. People prefer to access the mobile version of a website rather than its desktop counterpart. Therefore, websites today need to be mobile browser compatible to stay aligned with the trend.

With the web moving to mobile, multiple improvements have been implemented. This includes adding a telephone number link to the website which when clicked on in a mobile device, will open up a call manager functionality on the mobile phone.

Take a look at the project we did for a Chromadex product that incorporated responsive web app creation.

Now we all know that <a href> tags are mostly used to link pages. Many developers also know that they can prompt an eMail by using the mailto: protocol and a phone call from the web page can be initiated using tel:. But there is little information available on how to send an SMS from a website.

How to Send an SMS from a Website

I’ll give you a complete tutorial on how to send an SMS from a website. But before that, you need to keep in mind that this process only works on mobile systems and not on web systems.

  • The basic example of a link is:

<a href=”sms:”> Send SMS </a>

Clicking on this link will open a message application without any phone number.

  • If you want to add a destination number, you can use the following syntax:

<a href=”sms:xxxxxxxxx”> Send SMS </a>

When we click on the above link, it will open a message box with destination number.

Here’s an example. When you click on ‘Text Us’ in Image 1, it will open an SMS application from your mobile phone that looks like Image 2.

  • If you want to send an SMS with a body text, then you can use the following syntax:

<a href=”sms:xxxxxxxxx;?body=some text”>Send SMS </a>

Clicking on the above link will open a message box with a destination number and a body text.

When you click on the ‘Career’ link (refer to Image 3 ), it will open an SMS application with a destination number and body text (refer to Image 4).

Challenges in Using SMS Links

While SMS links are pretty easy to implement, they come with a couple of challenges of their own. Let’s look at some of them:

  1. They work only on mobile devices
  2. Formats are platform-specific and wrong formats are ignored by the platforms completely
PlatformSupport
iosPartial (sms:,phone no)
AndroidPartial (sms:,phone no)
webOSSms : only (no phone no, no body)
IE mobileSms : only (no phone no, no body)
Opera mobileFull (sms: phone no, body)

How to Create Dynamic SMS Links in WordPress

WordPress is very popular CMS management built in PHP for creating stunning websites in little time. By default, WordPress does not provide the facility to add SMS links in the menu module. So, we need to implement a simple trick to write a function that will allow it to keep those links saved in the database. Below are the steps to achieve this:

1. Add the code mentioned below for accepting SMS protocol while adding SMS links into admin panel:

<?php

/**

  * Function for SMS protocol to adding custom urls,

  */

  function allow_sms_protocol( $protocols ) {

   $protocols[] = ‘sms’;

   return $protocols;

  }

  add_filter( ‘kses_allowed_protocols’, ‘allow_sms_protocol’ );

?>

Note:. Good news is, the above code has already been integrated in WordPress 5.3. So, if you are using the updated version, you don’t need to use this trick. However, if you are using an older version and do not wish to update, this trick will come in handy.

2. Now create custom links:

Go to Admin panel -> Appearance -> Menus -> create new menu with proper name.

3. Select Custom links from Add menu items and then add menu name which is the link text and the custom URL.

Please refer to the screenshot below for adding custom SMS links.

Image 5

After adding sms links, you can display them in the front-end using wp_nav_menu() function of WordPress. Once the menu is displayed on the front-end, you can check the page on a mobile device to see if it;’s working correctly. It should open an SMS application after clicking on all SMS menu links created in admin panel and you should be able to send an SMS from the website.

That’s it!

I hope this makes it easy to set up the facility of sending an SMS from a website. If you have any questions please write to us below in comments and share your feedback. If you are still finding it difficult to set up the SMS-sending feature in your website, we can help. Give us a call at  (443) 718-0003. Or, you can drop an Email at support@codaemonsoftwares.com. Thanks for reading.

Spread the love
Hi, I'm Darshana and I'm a senior software developer. I like to share some of the things that I've learned along the way.