Before we dive into how to send SMS text messages from a website, it should be clear that every web developer knows or should know how to send emails from HTML links. Better yet, any developer should also know how to trigger a phone call from links on a web page. Just in case there is one or two that is not sure here is a quick recap:
If you are only interested in how to send SMS text messages from a web page then you can just skip to the relevant section.
Using the Uniform Resource Identifier (URI) scheme a developer can make it easy for their users to send them emails. The format is:
<a href="mailto:[email protected]">Send email</a>Clicking on such a link will automatically open the user’s default email client. You can also specify multiple email addresses using this format:
<a href="mailto:[email protected],[email protected]">Send email</a>The address can even be omitted entirely:
<a href="mailto:?to=&subject=Awesome%20Brightwhiz">Spread the Word...</a>What is the subject and to keys in the hyperlink above? Those are standard additional email headers such as subject, cc, bcc, to, body, etc. Here’s another example showing the scheme in use:
<a href="mailto:[email protected]?subject=My%20awesome%20subject&[email protected]&body=This%20is%20the%20mail%20body%20text">Send email</a>Create a Click to Call Link Using HTML
With this, developers can use the tel Uniform Resource Identifier scheme. It is valid for calling both fixed landlines and mobile phones. The scheme is only practical on mobile devices or Desktops with softphones installed.
This is the format for making the call:
<a href="tel:1234567890">Click to Call</a>The phone number can be in a local format or include all the digits for international dialing. It is recommended to stick to the international format. Generally, you can use any alphanumeric characters that can be translated to a valid phone number on your device. Therefore these two numbers would work just fine. As shown here, these two numbers are the same.
<a href="tel:+1-800-111-1111">Click to Call Support 1-800-111-1111</a>
<a href="tel:+18001111111">Click to Call Support 1-800-111-1111</a>Handling Extensions (iPhone and iPad Only)
Developers can simplify the workflow when the user has to go through either extension or when using interactive calls. Using the semi-colon (;). This allows the user to press the star (*) button when prompted, and the device will dial the next number in the series automatically.
<a href="tel:+700000000;1;2;3">Call Support Now</a>You can also use the pause option which is entered with a comma (,). This allows a short pause of time for each comma encountered. Once the time has passed, the number after the comma will be dialed automatically.
<a href="tel:0700000000,1,2,3">Call Support Now</a>And now, Let’s Create a Link to Send SMS Text Messages
Developers can add a Click to Text link anywhere where you can add a valid HTML link on your web page. This could be anything from a Navbar tab, image, button, company’s email signature, contact us page, and call to action pages, etc:
To send SMS text messages, you will need to use the SMS URI scheme. Clicking this link will open the default SMS client on the user’s device. This is the format:
<a href="sms:+1770123456">Click to SMS us!</a>Sending to multiple phone numbers.
<a href="sms:+1770123456,+15105550102">Click to SMS us!</a>Just like the email links, this scheme allows the developer to prepopulate the SMS body text.
<a href="sms:+1770123456&body=Hi%20there%20Some%20text%20to%20get%20you%20started...">Click to SMS us!</a>The Send SMS Text Pitfalls
Using the SMS scheme is generally only useful on mobile devices. As a developer and for the sake of the users’ experience, you may want to hide the Click to SMS link when viewed on a non-mobile device such as Desktops.
Conclusion
We took the extra steps to walk through the mailto and tel schemes for the beginner developers. We also took time to lay the foundation for when it came to explaining the SMS scheme. With all that, you should now be able to send SMS text messages from an HTML web page.
Found this article interesting? Follow Brightwhiz on Facebook, Twitter, and YouTube to read and watch more content we post.