How to add SMS links to your website

REALITY:  Chances are good that the majority of your site visitors are arriving on your site via text.

I’m going to show you a special trick. With just a bit of code (I’ll show you how!), you can allow potential clients to click-to-text, and even draft a message for them to send!

This is perfect for starting the conversation from potential client to paying client, making it easy for them to reach out and hey – you’re already making their lives just a little bit easier!

• Include a link in your contact page or footer
• Create a SMS link in your website menu!
• Link a graphic image or photo of yourself
• Call to Action Buttons (BOOK YOUR FREE CALL)
• Email Signatures
• Invite feedback or ideas on a particular topic. Example: Text me one topic (or two!) you’d love to learn more about on The Website Doula blog. I mean it – give it a try right now with your phone & let me know!”

4 simple ways to create a SMS link on your website:

SMS LINK WITH MESSAGE

<a href=”sms:+12223334444&body=I%20am%20interested%20in%20your%20services.”>Send a SMS message</a>

SMS LINK NO MESSAGE

<a href=”sms:+12223334444″>Text Me</a>

SMS LINK IMAGE

<a href=”sms:+12223334444″><img src=”https://thewebsitedoula.com/wp-content/uploads/2021/02/sms-150×150.png” alt=”” width=”150″ height=”150″ /></a>

SMS IMAGE LINK WITH MESSAGE

<a href=”sms:+12223334444&body=I%20am%20interested%20in%20your%20services.”><img src=”https://thewebsitedoula.com/wp-content/uploads/2021/02/sms-150×150.png” alt=”” width=”150″ height=”150″ /></a>

HOW TO BUILD YOUR SMS LINK

NOTE: Is your website on a tool that doesn’t easily allow for custom HTML? Here are directions for squarespace sites. Unfortunately WIX does not easily allow for this functionality, and while weebly offers a full SMS bot tool, it is pricy.

I don’t normally talk about code too much with clients – in general it makes people immediately want to do this…

See how the code starts with <a href=”, and ends with </a>?

That’s the link!  The <a href=” tells the link where to go, and the </a> tells it when to stop.

The sms phone # begins with the quote mark after <a href=.  For example: <a href=”sms:+12223334444″>Text Me<a>. To insert your phone # just add your complete phone number with area code including the +1 at the beginning.2) THE MESSAGE
Write the message you want to use as the draft SMS text, and paste it in using this tool (the URL Decoder).

It will turn a simple message like this:

If you squint, you can see that there is a %20 between each word, and the final question mark is made using %3F.

Don’t worry – the tool above will do it for you. just paste in your text & click encode!

The message is then pasted in after the phone # as seen here with the code ?body= between the phone # and the message.

This is only necessary for the examples with a image. See the alt=”sms text link” part of the magical code? That tells google & visually impaired site visitors what that image is there for.