Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Create a Button to open SMS Compose to a Phone Number using HTML?
The button to open SMS provides users with the convenience of sending SMS to a phone number directly from our website instead of writing it down and then messaging to that number.
With the help of <a> href attribute, we replace the URL with a cellphone number and add sms, before it to make an SMS hyperlink.
There are several use cases for creating a button to open SMS compose to a phone number such as Contacting customer support, Requesting information, Sales and marketing etc. This can be especially useful for users who prefer text messaging over phone calls or emails. It is also very handy during Emergency situations where they cannot make a phone call.
Syntax
<a href="sms:(numberwith_countrycode),
(numberwith_countrycode),..."> Text for the link</a>
The “text for the link” will appear as a clickable link.
Example 1
We will create a clickable button to compose an SMS directly to the pre−populated number.
Algorithm
Upload a style section consisting of CSS styles for the page.
Define the body phase and add the vital HTML factors to create the content material of the page.
Add a major heading and an outline of textual content for the web page with the use of the h1 and p tags respectively.
Create a hyperlink in order to permit the person to send a text message by the usage of the sms: scheme and inclusive of the telephone number within the href characteristic.
<!DOCTYPE html>
<html>
<head>
<title>Create a button to send SMS directly</title>
<!-- CSS styles for the page -->
<style>
body {
font-family: Arial, sans-serif;
font-size: 20px;
line-height: 1.6;
color: #333;
}
a {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
text-decoration: none;
border-radius: 4px;
}
a:hover {
background-color: #0069d9;
}
</style>
</head>
<body>
<!-- Main heading for the page -->
<h1>Get in touch with us</h1>
<!-- Description text for the page -->
<p>Have any questions or concerns? Send us a text message:</p>
<!-- Link for sending a text message -->
<a href="sms:+912244668800">Text us at +91-224-4668-800</a>
</body>
</html>
Example 2
We will create a button to open SMS compose to send textual content messages to more than one number.
Algorithm
Create an HTML file with the necessary elements which include head, body, title, h1, p, and a.
Inside the head phase, add any important CSS styles to layout the web page, along with font styles, background shades, and button patterns.
Within the body segment, add a primary heading and a defined text for the page to give an explanation for the purpose of the SMS characteristic.
Create an anchor tag with the href function set to "sms:(countrycode)(number1), (countrycode)(number2), ..." to specify the cell phone numbers that need to keep the SMS.
Upload text to the anchor tag to signify that clicking the button will send a textual content message to the required cell phone numbers.
<!DOCTYPE html>
<html>
<head>
<title>Send SMS to Multiple Recipients</title>
<style>
/* Styling the body element */
body {
font-family: Arial, sans-serif;
font-size: 18px;
line-height: 1.6;
color: #333;
text-align: center;
margin-top: 50px;
}
/* Styles for the heading element */
h1 {
font-size: 36px;
margin-bottom: 20px;
}
/* Styles for the paragraph element */
p {
font-size: 24px;
margin-bottom: 30px;
}
/* Style the anchor tag */
a {
display: inline-block;
padding: 20px 40px;
background-color: #007bff;
color: #fff;
text-decoration: none;
border-radius: 4px;
font-size: 24px;
transition: all 0.3s ease-in-out;
}
/* Hover styles for the anchor tag */
a:hover {
background-color: #0069d9;
transform: scale(1.1);
}
</style>
</head>
<body>
<h1>Send SMS to Multiple Recipients</h1>
<p>Click the button below to send a text message to multiple numbers:</p>
<!-- Anchor tag with href attribute that specifies the phone numbers -->
<a href="sms:+919789971368,+12255678910,+919887744331">Send text messages</a>
</body>
</html>
Conclusion
Main constrain with this program is that it only works on mobile devices that has a messaging app installed in prior. If the user is on a desktop or laptop, only some versions of the browser and pc with special inbuilt messaging apps will support the button to open SMS compose.
There are also other ways to create a button that opens SMS compose to a phone number. Few of which are − using Javascript to create a button element and then adding an event listener to open the SMS compose window when the button is clicked, using third−party serviceslike − Twilio, Plivo and Nexmo but these require one to create an account and integrate their API their website or app to run the SMS compose.
1K+ Views
