Create a click-to-text link that starts SMS ‘HTML examples’

By
Dalia Khirfan
-
Create a click-to-text link that starts SMS 'HTML examples'

Links are not restricted to web pages; they can initiate phone calls and emails, but not everyone knows that it could be to start an SMS conversation.

You can launch an email using “href=” mailto:[email protected].” You can also start a phone call using “href=” tel:+201000766661.” – But you might not know that you can launch the SMS app on your website visitors’ phones or desktops (Apple only) with an HTML link.

With the help of HTML, it’s possible to create a hyperlink that sends an SMS message. You can even prepopulate the SMS body text via the link! So, if you wish to add a new method to start conversations with your customers, this article is for you. Here’s how.

How to create a click-to-text SMS hyperlink?

All you need is to use the <a> tag and set the attribute value with “sms://” just as in the following examples:

How to implement it in WordPress or Webflow?

It differs from one CMS to another. Here’s how to implement link-to-text HTML in WordPress or Webflow.

WordPress Classic Editor: there are two ways to implement a link-to-text action to open an SMS in WordPress.

  1. Switch to the text editor instead of the visual editor, insert the link above, and customize the anchor text according to your case.
  2. Highlight the text that you wish to convert into a link to SMS, click the link icon in your editor bar, then insert SMS://+phone number

Webflow: insert “text link or any link element; in the URL field, insert the SMS:// in addition to the phone number you want to receive the message, like this: sms://+20100076661 directly without the rest of the code. Webflow will add the hidden HTML code for you.

Prepopulate SMS body text 

On most mobile phones, clicking this link will open a new message screen prepopulated with the shortcode or your business texting number.

And When a visitor taps on the following link with a body on a smartphone, a new text message will open with a pre-filled recipient and message content as follows:

To work on iOS

<a href="sms:00201000766661&amp;body=Thank you for the SMS tip">Test Preview, pre-populate body text</a>

Another version where you can use it directly in a link field: sms:00201000766661&body=Thank you for the SMS tip

To work on Android and iOS

<a href="sms:00201000766661?body=thank you">Link</a>

Another version where you can use it directly in a link field: sms:00201000766661&amp?body=thank you

Test Preview on iOS, prepopulate body text

Test Preview on Android, prepopulate body text

Hope this helps.