Yesterday a reader contacted me asking for help sending SMS messages from a PhoneGap/Cordova application. I've made use of a nice plugin for this before so I thought I'd whip up a quick example of it for him, and my readers.
The plugin I used is Sms Custom Cordova Plugin - not the most imaginative name but really darn simple to use. It has one method, sendMessage, that - wait for it - will send a SMS message. On Android this is done completely behind the scenes. In other words, it will send a SMS message without letting the user know. Obviously you shouldn't do that, but keep that in mind. On iOS and Windows it will actually open the SMS application so the user has to actually finish the process themselves. Let's look at a simple example. As with my other Cordova examples, this is all up on GitHub for you to play with.
First, the HTML. This application does one thing - prompt for a telephone number and message. To make it a tiny bit prettier I added Ratchet.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="css/ratchet.min.css" />
<script src="js/ratchet.min.js"></script>
</head>
<body>
<header class="bar bar-nav">
<h1 class="title">SMS Demo</h1>
</header>
<div class="content">
<div class="content-padded">
<form>
<input type="text" id="number" placeholder="Phone Number"><br/>
<textarea id="message" placeholder="Message"></textarea>
<input type="button" class="btn btn-positive btn-block" id="sendMessage" value="Send Message">
</form>
</div>
</div>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Which renders this lovely UI:

Now let's consider the JavaScript:
document.addEventListener("deviceready", init, false);
function init() {
document.querySelector("#sendMessage").addEventListener("touchend", function() {
console.log("click");
var number = document.querySelector("#number").value;
var message = document.querySelector("#message").value;
console.log("going to send "+message+" to "+number);
//simple validation for now
if(number === '' || message === '') return;
var msg = {
phoneNumber:number,
textMessage:message
};
sms.sendMessage(msg, function(message) {
console.log("success: " + message);
navigator.notification.alert(
'Message to ' + number + ' has been sent.',
null,
'Message Sent',
'Done'
);
}, function(error) {
console.log("error: " + error.code + " " + error.message);
navigator.notification.alert(
'Sorry, message not sent: ' + error.message,
null,
'Error',
'Done'
);
});
}, false);
}
So as I mentioned above, the plugin has one method. It takes an object containing the phone number and message. The second argument is the success handler and the third is for failures. If you try to run this on the simulator, you will get an error: "SMS feature is not supported on this device." This is useful in case your application is being run on a wifi-only tablet.
As I mentioned, on iOS and Windows Phones, the user will see the 'real' SMS application pop up. It will be pre-populated with the data sent from the plugin. Here is an example:

The user will need to hit Send to finish the process, but they won't have to actually type anything.
That's it. If you want a copy of this code, you can grab it here: https://github.com/cfjedimaster/Cordova-Examples/tree/master/smscomposer
Archived Comments
Personally, I just use the sms: url type. It should work across the all browsers. You don't get the ability to silent send SMS on Android but I don't think we should do that anyway. The url "sms:12345?body=message" lets you specify a number and message to be pre-populated when the SMS app starts.
Fair point, and just so folks know, you can set those values dynamically via JS.
Hi, I use your example in intel XDK, I have installed the plugin then I build for android. When I try the app I get a message: "Sorry, the message not sent : SMS general error ". What causes that? I confuse how to fix it. Give me a solution. Please help me.
Not sure. I'd reach out to the plugin author as the error is coming from the plugin, not the code above.
Is the plugin working for android in using phone gap
Really useful post, Raymond. I am however struggling getting your example to work. When clicking the send button nothing happens. I'm using PhoneGap CLI v.4 and not the Cordova CLI - can this be the reason? I'm pretty new to all this, so please bear with me if this is a stupid question.
Also, is it correct that adding the ?body=message to the URL is no longer supported?
Thanks,
Kasper
No, that shouldn't matter. I'd check the console and test with remote debugging.
Sorry for the dupe comment.
No, that shouldn't matter. I'd check the console and test with remote debugging.
Greetings Raymond! I wish to if this plugin can permit to send sms from an android/IOS device using the SIM card and not an sms gateway? Please enlighten me on how to archive this with cordova if it is possible. Thanks
Sorry, not sure about that one.
But that ("sms:12345?body=message") doesnt work on Google Nexus 5, since Nexus uses Hangouts to send SMS! It doesnt kick off Hangouts app! How to get it working on Nexus?
what do you add the plugin to the config.xml file for PhoneGap?
Sorry, can you rewrite that question? I don't understand
How do i use this plugin to send sms to multiple numbers?
You can't do it at once - you would need to use a loop, and be aware that on iOS this would be evident to the user.
please tell me how to make free sms sending app all over the world in phonegap?
You can't control what the carrier charges the customer for SMS.
I would like to block the button while I wait the sending of sms
Then disable it via jQuery or regular DOM manipulation and then re-enable it in the callback.
Is it possible to send the sms with a custom name e.g. CompanName instead of the telephone Number of the device?
SMS messages come from phone numbers - so as far as I know, no.
not working
This comment isn't something I can reply to. You didn't say how it wasn't working. You need to provide more detail, especially with whatever you saw in Remote Debugging.
Hi when i use "sms:9884269895?body='hello how are you'" , the message doesnt get split fromt the phone number so my text message To field says 9884269895?body='hello how are you' . any idea where i might have gone wrong??
You need to URL encode the body and remote the quotes. So something like
sms:XXXXX?body=My%20Name%20is%20Ray
on an iPad, which can't send SMS, this opens iMessage. Do you know how to detect whether the user is on a device (iPad or other) that doesn't have *real* SMS capability?
(PS: this is a fantastic site)
Hmm - I'm not sure you can count on it always doing that. For ex, on my iPad, I've disabled iMessage, so I'm sure (not 100% sure) that it would throw the normal error. Since iMessage would - kinda- be valid - I'm not sure how you can test for this.
In theory, you could test for the ipad name in the device name (using the device plugin). That seems possibly brittle, but is probably the only way to do this.
There has been some talk on the Cordova project about a "capabilities" plugin that is kinda related to this, but I don't think anything formal has been done yet.
Thanks for the reply. There is a similar issue with Hangouts on my Android tablet which doesn't have SMS capabilities. A "capabilities" plugin would be very useful. As it is now, we're just testing to see if it's a tablet device (similar to your suggestion); if so then the user never sees the feature.
how can I send sms without my sms being starred in the users sent messages list
As far as I know, that would be a security issue if it wasn't recorded.
How can I read sms with cordova ?
Google for "cordova read sms" - first result: https://github.com/floating...
I get this error on execution "Uncaught TypeError: sms.sendMessage is not a function". I am new to cordova, please let me know what I need to do to fix this error. Thanks.
Ensure you added the plugin and ensure you waited for deviceready to fire.
I already have the plugin installed from https://github.com/cordova-...
When I execute the GUI appers where I provide a iPhone6 # and a message. After that I get this error. Please elaborate what you mean by "waited for deviceready to fire"? Thank you.
Are you using my code *exactly* as is?
What do I need to do to fix the error below?
---------
Error BLD301 Error : BLD00301 : A remote iOS build agent has not been configured. Configure one in Tools > Options > Tools for Apache Cordova > Remote Agent Configuration.
Yes, everything except the fonts
I can't tell you how to use TACO - I've only played with it a bit.
It sounds like you are testing w/ TACO on Windows. I'd suggest trying it via 'regular' Cordova first on Android and see if it works there.
nice tutotial dude... it charging normal sms cost from my mobile.
is there any way to send free message using ionic app?
Not that I know of.
its not working
its not working & even not showing any error. please send source with plugin configuration.
Great! its working...... Thanks Ray
hi
how can i get two textarea in one sms?
You can literally just add another textarea. Then duplicate this line:
var message = document.querySelector("#message").value
And combine the two strings together.
I don't mean literally duplicate - you would give it a new variable name and new selector of course.
tnq for ur answer
but, i do this and dont work
You have 2 texareas with the same ID. That's not valid HTML. You need to use a unique ID value for each DOM item.
how i do this ? can u help me ?
To be clear, you are asking me to help you give a new ID to a text area? Literally just give it a new name. So instead of id="message", use id="message2".
relay tnq man <3
sry my eng not very good
i do this, but when i click on send that give just one ftextarea:(
Given that you called it message2, then you get the value of it just like I got the value of message, and then you add the two strings together.
sry for my question's
can u show me thats code ? or send to my email ?
filikyfilik@gmail.com
I told you pretty much exactly what to do. If you don't understand, then you need to learn a bit more JavaScript first. Specifically - how to get the value of a form field. You literally have that code already and just need to copy it. I don't mean to be rude, but if you don't understand what I'm saying at this level, you need to dig a bit more into the language itself.
or use a class selector, then
var message = document.querySelector(".message").value
How can my app read the sms., can you please help me
Its worked for me, but i need how read sms
From what I see in the docs, you can't read SMS with this plugin. You can search the plugin repository to see if another one allows for it. I'd guess no though due to security concerns.
hi thanks for your article
in my app the phone number is fixed and user just put text.
but in user 's phone show the number and text in message app.
i want to doesn't show in message app.how can i do?
[ thanks for your help and sorry for my bad English ;) ]
I'm sorry, but I can't understand what you are asking.
so sorry:(my English is not good:(
fortunately i get my answer :)
sorry i write my question in this article.
how can i do to when press hardware back button jumps to previous page not "stop" app ?
(in my app when press hardware back button , close and stop program. i want to close app but "not stop" because the app should running in background. )
(my app is mp3 player)
(running in background is done when use Home button)
That's not really on topic for this blog post. Please use StackOverflow for questions about PhoneGap in general.
That being said, you can add an event handler for the back button and just prevent it from firing (I believe).
Can i get the sms send automatically without interaction from the user?
See the last paragraph - I address this.
iOS, the user will see the ‘real’ SMS application pop up and send message.
Sending Message successfully i pay charges????
No, the user does.
The app is successfully installed ,it opens and after I type the number in the number box and also the sms and press the 'send sms' button, nothing just happens and the screen is still( unlike actual sms application opening like others have stated in comments).All required plugins are installed , what can be the error?
What do you see when you check devtools?
the problem i think is with the installation of ratchet(screenshot below) https://uploads.disquscdn.c...
can u please send a code without the use of ratchet ,also i tried out this https://github.com/cordova-... but its not working in the phone
Ratchet was used for the UI - it isn't really crucial to the core of this demo. You should be able to take what I've shown you here and apply it w/o needing ratchet.
Hi Raymond, thanks for this, not quite working on Windows Phone. Using the new sms plugin I had to change the sms.send line to the following to avoid runtime error (it seems the new plugin has also changed with the success and error callback functions reversed too. )
SMS.sendSMS(number, message, function(message) {
Now I get console error: undefined undefined so evidently there is no error?
When I had the callback functions the other way round it reported success but no message was sent nor was the sms client on my phone opened.
Help would be greatly appreciated.
- paul
Actually got it working with this plugin:
https://github.com/cordova-...
Note cordova-sms-plugin, not cordova-plugin-sms (your git page specifies the latter). With the correct plugin your code works unmodified - thanks again!!
Glad you got it!
HI Raymond, I noticed that messages cannot be sent when the default sim setting is "Ask Evert time" . How can I make my script autoselect a simcard to use when when the phone is at this state?
You've got me - never dealt with multiple SIMs before.
where is the app.js file
I linked to the repo in the last paragraph. :) Here is the direct link: https://github.com/cfjedima...
Hi Raymond. The app has no error in web dev tool. Successful build apk and install in my android device. I put cellphone no and text but when I press send message button, nothings happen. Please help me fix this. Thanks
Please try remote debugging w/ Chrome and see what happens.
Thank you very much. here is the error after debugging
app.js:12 Uncaught ReferenceError: sms is not defined
at HTMLInputElement.<anonymous> (app.js:12)
(anonymous) @ app.js:12
This implies you didn't install the plugin.
hello i have also been trying to send sms using cordova application for close to 4 month now. when i follow the instruction above i get sms.sendMessage is not a function in my console. any help will much be appreciated.
I assume you saw the note on top and are using https://github.com/cordova-... instead. That's the best I can suggest now.