Explain Codes LogoExplain Codes Logo

How to pre-populate the sms body text via an html link

html
responsive-design
best-practices
web-development
Alex KataevbyAlex Kataev·Oct 23, 2024
TLDR

Leverage the sms: protocol and body query to set up an HTML link for a default SMS message:

<a href="sms:+1234567890?body=Hello%20World">Send Pre-filled SMS</a>

Swap +1234567890 with the desired number and Hello%20World with a URL-encoded message. URL-encode spaces as %20 and other special characters for faultless message drafting.

Universal Play

Here's how various platforms handle the pre-populated SMS link:

  • iOS: Devices running iOS 8 and newer play well with an & instead of ?:
    <a href="sms:+1234567890&body=Hello%20World">Send SMS</a>
  • Android: Traditional ? qualifier for body parameter works as intended.

Character Crafting

While curating the SMS body, keep these encoding practices in mind:

  • Convert spaces to %20.
  • Substitute new lines with %0A.
  • Encode any other special characters to avoid broken links or undesired results.

First-hand Experience

Try adding a live demo or even QR codes that users can scan and send SMS messages through channels like Safari. Consistent testing across varied devices ensures universal compatibility.

Here's how to enhance your link for improved readability and maintenance:

  • Clean Code: Make your link human-friendly with well-structured parameters.
  • Easy Upkeep: For easier troubleshooting and updates, include commentary in your code.
  • Universal Access: Boost accessibility by using suitable aria-labels for screen readers, extending usability for all.

Edge-Cases and Contingencies

Here are the key checks for the enhanced usability and reliability of SMS links:

  • Harmony of Syntaxes: Employ dual syntax for increased device compatibility.
  • Thorough Testing: Execute A/B testing with actual users, covering various devices.
  • Appealing Aesthetics: Forge clean, artifact-free links for a seamless interface.

Leverage Valuable Lessons

To bolster your application's robustness:

  • Learn: Scrutinize live demos to gain insights from other implementations.
  • Innovate: Gather clues from QR code formats in Safari to understand hidden nuances.
  • Preempt: Expect corner cases where the number may not be in the link.