Send SMS Messages From a Link with HTML

Links have been around since the dawn of the internet. While HTML anchor tags are most often used to link pages, there are also other possibilities including launching an email client and the Messages app on mobile devices.

This article explores sending custom SMS messages using simple HTML links.

Why Create SMS Links?

There are several reasons for creating SMS links for users to click on. One might be to sign up or opt into a newsletter to receive regular updates about your website or the services you offer. Another could be to notify potential or existing customers of new products, coupons, or upcoming events.

Generally, the goal is to connect with your users or customers so you can convey information to them much easier.

These links aren't necessarily limited to just websites. SMS links will also work within emails, online profiles that accept HTML syntax, or even native applications that support clickable links.

The Syntax

Creating SMS links is a pretty simple task. Links for SMS are no different. In its simplest form, launching the Messages app from your device looks like this:

<a href="sms:">Sending out an SMS</a>

That's it! This link alone will launch your Messages app. But it's not very helpful. Your users will not know what to do once the application has launched.

You'll want to give them some direction, and we can do so by adding in the phone number you want them to send a message to:

<a href="sms://+12125551212">Sending out an SMS</a>

The Messages app will launch with the phone number pre-populated with +2125551212.

This is an invalid phone number for testing purposes. Make sure you're using a phone number that's linked to you or your services so you receive them properly from your users.

Creating a Message Body

The more popular platforms include the ability to add a pre-populated custom message body, as well! You can do so with the following syntax:

<a href="sms://+12125551212?body=Hello+World!">Sending out an SMS</a>

Notice that the body attribute is URL encoded. Most server-side languages have a method for encoding text automatically, so make sure to use it. If you're writing only HTML code, then you can use this URL Encoder/Decoder.

Device Support

Most mobile devices will launch the Messages app that comes out of the box with the device. However, there are some caveats:

  • iOS, Android & Opera Mobile: Most OS versions on both platforms have full support for the phoneno and body attributes.
  • webOS & IE Mobile: phoneno and body attributes not supported on any versions.
Certain platforms or operating systems may not support all features, so make sure you thoroughly test your links on the platforms you plan on supporting.

Best Practices

Here are a few guidelines you should following when introducing SMS messaging options:

  • Make your process clear. Add a disclaimer near the link explaining exactly what the link will do. How it will open the messaging app and populate the fields automatically. Where the SMS message is going. What they're signing up for. What will happen after they send an SMS message. The more details you give to your users, the more likely they are to click the link and submit a message.
  • Make sure to note to your users that standard messaging and data rates may apply when submitting SMS messages. There are a lot of unlimited plans with the various mobile networks nowadays, but that doesn't mean that everybody is on them.
  • Once the user sends an SMS message, their phone number will be shared with your service. Make sure to make this apparent in your Privacy Policy or within a disclaimer near the SMS link.

Conclusion

That's all there is to it! Providing SMS links for your users or customers can open up a whole new world of opportunities for communication with them.

If you have any other ideas or features related to SMS messaging links, reach out to me on social media so we can discuss!

Created: May 08, 2021

Comments

There are no comments yet. Start the conversation!

Leave a Comment

  Wrap code in a <code> and </code> block.
Subscribe to the newsletter to receive updates on new articles!
Remember my info