Tap to SMS Feature

Hi. Had a few devs and Wix support tell me that having a “tap to SMS” feature was impossible to implement on Wix. Turns out, they were wrong. Here is how you do it.

  1. You’ll need your own server to do this. Don’t have a server? No worries. Neither did I. You can set up a google cloud server for free.

Instructions here:

  1. When you follow those instructions, you’ll create an index.html file to test things. After you’ve set up your cloud server, you’ll need to replace the index file with a new index file comprised of the code below. Just open your text editor (I used notepad), copy this code, paste it, and edit it to your liking. Then save it as index.html.

The Code :point_down: The key parts that you need to edit I swapped out with “00000”

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SMS Button</title>
  <style>
    <style>
 @font-face {
  font-family: "00000";  
  src: url("00000.woff"); 
}
@font-face {
    font-family: "00000";
    src: url('00000.woff') format('woff'), 
         url('00000.ttf')  format('truetype');
}
  .sms-button{
    color: #ED6225;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    font-weight: 500;
    font-size: 2.5em !important;
    font-family: '00000';
  }
  
</style>
</head>
<body>
  <a onclick="openSMSApp()" class="sms-button">
  (000) 000-0000
</a>

  <script>
    function openSMSApp() {
        const phoneNumber = "+10000000000";
      const message = encodeURIComponent("00000");
    //   For Android devices
      if (navigator.userAgent.match(/Android/i)) {
        window.location = `sms:${phoneNumber}?&body=${message}`;
      }

      // For iOS devices
      if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
        const smsWindow = window.open(`sms:${phoneNumber}?&body=${message}`, '_blank');
        
        
        if (smsWindow) {
  setTimeout(() => {
    smsWindow.close();
  }, 3000); // 500ms delay to give the SMS app time to open
}
      }
    }
  </script>

Here is an image with the parts of the code you need to edit. :point_down:

  1. Once you have that file edited to your liking, save it as index.html, delete the example file you made earlier with the same name that is on your server, and replace it with this new one.

  2. Upload your font files to the server (.ttf and .woff)

  3. Go to your wix editor. Go to the mobile view. Click on Embed & Social > Embed Code

  4. This creates an iFrame on your page where your “tap to sms” phone number will live.

  5. Click Enter Code > Website Address

  6. Paste the Public URL that was created when you uploaded the index file to your server. It will be something like: https://storage.googleapis.com/www.*yoursite*.com/index.html

  7. Test.

  8. Assuming it worked, it’s time to celebrate. You just saved a few hundred bucks and several frustrating hours of your life! Boom!

Here are two examples of this:
Example 1. https://www.greentopheating.com/estimates/text-estimates
Example 2. https://www.thegaragedoordoctors.com

Notice the “tap to sms” feature is only active on mobile. If you are on a desktop, clicking the number doesn’t do anything. Pretty slick, no? :sunglasses:


HUGE Shoutout to Joe Khelifati at BrandsWaggin (www.brandswaggin.com) who figured out how to do the “impossible”.

Also!! HUGE Kudos to @codequeen for posting another solution to this “impossible” feature!

If you are looking for a simpler way of implementing this feature (which is usually referred to as “click to text” or “click to sms”, then you can skip the first six steps on your list and use simple html to trigger the action via an iFrame.

Link to test: https://www.velo.totallycodable.com/test-click-to-open-sms



If the user has a messaging app on their computer / laptop it will simply prompt permission to open it.

Or you could always hide it using a little code to detect if they are on a mobile phone or not.

https://dev.wix.com/docs/velo/api-reference/wix-window-frontend/form-factor

Hey CodeQueen!

I tried your solution and it didn’t work on my phone 13. Perhaps it only works on Android?
It works on desktop too but is less useful there given the use case.

It will not work in embedded browsers like Facebook or Forum app.

I don’t know about testing specifically on Androids, as I have iPhone 14, 15 and 16. But essentially it’s the same prompt on any browser.

If you change the letters sms to tel then it prompt open the call window. It is universal basic html.

Your code to open an sms message works on your iPhones? Interesting.
I can’t get your solution to work on my phone when I open your page in Safari. (https://www.velo.totallycodable.com/test-click-to-open-sms)

The button flashes to indicate it’s been tapped but nothing happens.

Here is a video of my test:

You are correct about tel: opening the call window. That was never an issue for us. sms: on the other hand didn’t play nice and required a more complex solution.

Would be great if there was an easier way to execute this without the server piece so appreciate you tossing ideas into the mix!!

1 Like

Oh you use Safari? Safari acts so bad for websites. Even mailto: doesn’t generally work on Safari browsers (and that is just to open up an email composer). Wix websites do not render well on Safari either. From font to element placements and the worst is animations.

I don’t use Safari so I completely didn’t think to ever test it there

But adding one little bit of extra text within the code snippet it will help make the work on Safari browsers:

target=“_top”

Just insert that bit right before the href.

It should work for you now.

1 Like

@codequeen - very nice! Works on my phone and is a more elegant solution for sure. Many Kudos to you!! :grinning:

1 Like