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.
- 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:
- 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 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.
-
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.
-
Upload your font files to the server (.ttf and .woff)
-
Go to your wix editor. Go to the mobile view. Click on Embed & Social > Embed Code
-
This creates an iFrame on your page where your “tap to sms” phone number will live.
-
Click Enter Code > Website Address
-
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
-
Test.
-
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?
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!