When you browse a website, you might require assistance from customer support. It is beneficial when you locate the customer service contact information on the site, allowing you to directly send a message without the need to manually copy the contact details.
An SMS hyperlink can be generated on a website to allow users to easily initiate a conversation with customer support directly from the webpage.
Upon clicking the SMS link, users will be directed to the default messaging application where they can compose and send a message. This guide will explore the process of generating an SMS link within a webpage.
Uses of HTML SMS
- Feedback form: The SMS link permits users to provide feedback directly through messaging by clicking on it.
- Product information: The SMS link is utilized to get information about the product by sending a message through the SMS link.
- Website Engagement: The SMS link is utilized to get more engagement from the users.
- Quick contact: The SMS link permits customers to quickly contact customer service by clicking on the SMS link.
- Discounts: The SMS link directly opens the text message with a predefined code, allowing users to get the discount by clicking on the SMS link.
An SMS hyperlink can be generated using the href attribute in HTML.
Syntax:
<a href="sms: (country-code)(number)"> Text </a>
The <a> represents the start of a hyperlink, while the </a> signifies the end of a hyperlink. The "href" attribute is employed to specify the link's target. To include a contact number, the value SMS: (country-code)(number) is assigned to the href attribute. The text that acts as the clickable link is enclosed within the opening and closing tags of the hyperlink.
An SMS hyperlink can be generated for either one person or several individuals by utilizing the href attribute in HTML.
Demonstrations of the HTML SMS
We will gain a thorough understanding of HTML SMS with the assistance of practical examples.
Demonstration 1:
We are going to create an SMS hyperlink for an individual recipient by using the <a> attribute within the anchor tag.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML SMS link for a single recipient</title>
</head>
<body>
<h2>SMS link for a single recipient</h2>
<div>
<a href="sms:+91987654321">Send a message</a>
</div>
</body>
</html>
Output:
Below is the provided output demonstrating an SMS hyperlink intended for a solitary recipient.
Demonstration 2:
Creating an SMS link for sending messages to several recipients involves utilizing the href attribute of the <a> element.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML SMS link for multiple recipients</title>
</head>
<body>
<h2>SMS link for multiple recipients</h2>
<div>
<a href="sms:+91987654321, +919988776655, +919998886665, , +919999888877">Send a message</a>
</div>
</body>
</html>
Output:
Below is the output demonstrating an SMS link that can be used to send messages to several recipients simultaneously.
Demonstration 3:
An SMS hyperlink will be generated within the feedback form by leveraging the <a> href property.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML SMS link in the feedback form</title>
</head>
<body>
<h2>SMS link in the feedback form</h2>
<div>
<form>
<label for="full-name">Full Name:</label>
<input type="text" value="Write your full name"> <br> <br>
<label for="email">Email id:</label>
<input type="email" value="Write your email id"> <br> <br>
<label for="message">Feedback:</label> <br> <br>
<textarea name="" id="" cols="30" rows="2">Write your feedback</textarea>
<br> <br>
<a href="sms:+919887665443">Send a message directly</a> <br> <br>
<input type="submit" name="" id="submit" value="Submit">
</form>
</div>
</body>
</html>
Output:
In the displayed output, we can observe an SMS hyperlink embedded within the feedback form.
Demonstration 4:
An SMS hyperlink will be created with a preset message by utilizing the href attribute of the <a>.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML SMS link with the default message</title>
</head>
<body>
<h2>SMS link with the default message</h2>
<div>
<a href="sms:+918855664422?body=Hi%20there!%20I%20would%20like%20to%20get%20the%20information.">Send an SMS</a>
</div>
</body>
</html>
Output:
Displayed here is an SMS hyperlink containing a preset message.
Demonstration 5:
An SMS hyperlink will be generated by using the specified code within the href attribute.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML SMS link with the predefined discount code</title>
</head>
<body>
<h2>SMS link with the predefined discount code</h2>
<div>
<a href="sms:+917766554433?body=DISCOUNT50">Send an SMS</a>
</div>
</body>
</html>
Output:
Displayed below is an SMS hyperlink containing a preset discount code.
Browsers Support
Following are the browsers which support <a> href attribute:
- Microsoft Edge
- Google Chrome
- Opera
- Firefox
- Safari
Conclusion
We have understood the HTML SMS in this article. A few points to remember about HTML SMS are given below:
- We can create an SMS link on the webpage and allow users to send a message directly.
- We use <a> href attribute for constructing an SMS link.
- We can construct an SMS link for a single recipient utilizing the <a> href attribute.
- We can construct an SMS link for multiple recipients utilizing the <a> href attribute.
- We can create a default message link or predefined code SMS link utilizing the <a> href attribute .