Cordova Example - Sending SMS Messages

This post is more than 2 years old.

Since the time I wrote this article, the plugin I used does not exist anymore. It is somewhat related to the plugin cordova-plugin-sms, but that plugin is Android only. You probably want to use cordova-sms-plugin. Note the different. This plugin has a slightly different API. You can read more about it here: https://github.com/cordova-sms/cordova-sms-plugin. I have updated my demo code in the GitHub repo linked at the bottom and it works for me, but the main text of this blog post has not been updated to reflect the new plugin and code.

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:

iOS Simulator Screen Shot Dec 11, 2014, 10.39.52 AM

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:

IMG_4245mod

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

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Simon MacDonald posted on 12/14/2014 at 7:10 PM

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.

Comment 2 (In reply to #1) by Raymond Camden posted on 12/14/2014 at 8:53 PM

Fair point, and just so folks know, you can set those values dynamically via JS.

Comment 3 by Hedi Herdiana posted on 2/14/2015 at 3:12 AM

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.

Comment 4 (In reply to #3) by Raymond Camden posted on 2/14/2015 at 1:08 PM

Not sure. I'd reach out to the plugin author as the error is coming from the plugin, not the code above.

Comment 5 (In reply to #4) by Jay posted on 2/20/2015 at 10:03 AM

Is the plugin working for android in using phone gap

Comment 6 by Kasper Andersen posted on 3/15/2015 at 4:10 PM

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

Comment 7 by Raymond Camden posted on 3/16/2015 at 10:11 AM

No, that shouldn't matter. I'd check the console and test with remote debugging.

Comment 8 (In reply to #6) by Raymond Camden posted on 3/16/2015 at 10:12 AM

Sorry for the dupe comment.

No, that shouldn't matter. I'd check the console and test with remote debugging.

Comment 9 by Boyong Lambert posted on 3/19/2015 at 6:29 PM

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

Comment 10 (In reply to #9) by Raymond Camden posted on 3/19/2015 at 7:00 PM

Sorry, not sure about that one.

Comment 11 (In reply to #2) by Madhav posted on 3/21/2015 at 3:05 PM

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?

Comment 12 by Bill Wiseman posted on 3/25/2015 at 11:00 PM

what do you add the plugin to the config.xml file for PhoneGap?

Comment 13 (In reply to #12) by Raymond Camden posted on 3/26/2015 at 2:02 PM

Sorry, can you rewrite that question? I don't understand

Comment 14 by Neha Thakkar posted on 4/1/2015 at 6:56 AM

How do i use this plugin to send sms to multiple numbers?

Comment 15 (In reply to #14) by Raymond Camden posted on 4/1/2015 at 10:59 AM

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.

Comment 16 by Faiz posted on 6/8/2015 at 9:46 AM

please tell me how to make free sms sending app all over the world in phonegap?

Comment 17 (In reply to #16) by Raymond Camden posted on 6/8/2015 at 12:24 PM

You can't control what the carrier charges the customer for SMS.

Comment 18 by Francis Rodrigues posted on 8/21/2015 at 8:03 PM

I would like to block the button while I wait the sending of sms

Comment 19 (In reply to #18) by Raymond Camden posted on 8/21/2015 at 8:09 PM

Then disable it via jQuery or regular DOM manipulation and then re-enable it in the callback.

Comment 20 by Hughes posted on 9/24/2015 at 11:11 AM

Is it possible to send the sms with a custom name e.g. CompanName instead of the telephone Number of the device?

Comment 21 (In reply to #20) by Raymond Camden posted on 9/24/2015 at 1:08 PM

SMS messages come from phone numbers - so as far as I know, no.

Comment 22 by Nitheesh posted on 10/6/2015 at 11:07 AM

not working

Comment 23 (In reply to #22) by Raymond Camden posted on 10/6/2015 at 1:17 PM

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.

Comment 24 by Sujana P posted on 10/20/2015 at 5:37 AM

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??

Comment 25 (In reply to #24) by Raymond Camden posted on 10/20/2015 at 10:56 AM

You need to URL encode the body and remote the quotes. So something like

sms:XXXXX?body=My%20Name%20is%20Ray

Comment 26 by Mike Cunneen posted on 12/1/2015 at 11:37 PM

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)

Comment 27 (In reply to #26) by Raymond Camden posted on 12/2/2015 at 2:34 PM

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.

Comment 28 (In reply to #27) by Mike Cunneen posted on 12/2/2015 at 11:53 PM

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.

Comment 29 by Veeraj Shenoy posted on 12/14/2015 at 11:17 AM

how can I send sms without my sms being starred in the users sent messages list

Comment 30 (In reply to #29) by Raymond Camden posted on 12/14/2015 at 11:26 AM

As far as I know, that would be a security issue if it wasn't recorded.

Comment 31 by brodrigues1990 posted on 2/2/2016 at 3:58 PM

How can I read sms with cordova ?

Comment 32 (In reply to #31) by Raymond Camden posted on 2/2/2016 at 4:38 PM

Google for "cordova read sms" - first result: https://github.com/floating...

Comment 33 by SS posted on 2/12/2016 at 8:42 PM

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.

Comment 34 (In reply to #33) by Raymond Camden posted on 2/12/2016 at 8:50 PM

Ensure you added the plugin and ensure you waited for deviceready to fire.

Comment 35 (In reply to #34) by SS posted on 2/12/2016 at 9:07 PM

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.

Comment 36 (In reply to #35) by Raymond Camden posted on 2/12/2016 at 9:16 PM

Are you using my code *exactly* as is?

Comment 37 (In reply to #35) by SS posted on 2/12/2016 at 9:16 PM

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.

Comment 38 (In reply to #36) by SS posted on 2/12/2016 at 9:24 PM

Yes, everything except the fonts

Comment 39 (In reply to #37) by Raymond Camden posted on 2/12/2016 at 9:26 PM

I can't tell you how to use TACO - I've only played with it a bit.

Comment 40 (In reply to #38) by Raymond Camden posted on 2/12/2016 at 9:26 PM

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.

Comment 41 by Sivaprakash D Desingu posted on 3/4/2016 at 7:53 AM

nice tutotial dude... it charging normal sms cost from my mobile.
is there any way to send free message using ionic app?

Comment 42 (In reply to #41) by Raymond Camden posted on 3/4/2016 at 12:41 PM

Not that I know of.

Comment 43 by mamun posted on 4/2/2016 at 6:22 PM

its not working

Comment 44 by mamun posted on 4/2/2016 at 6:23 PM

its not working & even not showing any error. please send source with plugin configuration.

Comment 45 by mamun posted on 4/2/2016 at 6:43 PM

Great! its working...... Thanks Ray

Comment 46 by Amir Pournasir posted on 6/6/2016 at 3:16 PM

hi
how can i get two textarea in one sms?

Comment 47 (In reply to #46) by Raymond Camden posted on 6/6/2016 at 3:36 PM

You can literally just add another textarea. Then duplicate this line:

var message = document.querySelector("#message").value

And combine the two strings together.

Comment 48 (In reply to #47) by Raymond Camden posted on 6/6/2016 at 3:36 PM

I don't mean literally duplicate - you would give it a new variable name and new selector of course.

Comment 49 (In reply to #47) by Amir Pournasir posted on 6/6/2016 at 3:56 PM

tnq for ur answer
but, i do this and dont work

Comment 50 (In reply to #49) by Raymond Camden posted on 6/6/2016 at 3:57 PM

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.

Comment 51 (In reply to #50) by Amir Pournasir posted on 6/6/2016 at 4:06 PM

how i do this ? can u help me ?

Comment 52 (In reply to #51) by Raymond Camden posted on 6/6/2016 at 7:45 PM

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".

Comment 53 (In reply to #52) by Amir Pournasir posted on 6/7/2016 at 5:50 AM

relay tnq man <3
sry my eng not very good

i do this, but when i click on send that give just one ftextarea:(

Comment 54 (In reply to #53) by Raymond Camden posted on 6/7/2016 at 10:27 AM

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.

Comment 55 (In reply to #54) by Amir Pournasir posted on 6/7/2016 at 2:43 PM

sry for my question's

can u show me thats code ? or send to my email ?
filikyfilik@gmail.com

Comment 56 (In reply to #55) by Raymond Camden posted on 6/7/2016 at 2:45 PM

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.

Comment 57 (In reply to #50) by MavusiKenpachi posted on 6/22/2016 at 2:24 PM

or use a class selector, then
var message = document.querySelector(".message").value

Comment 58 (In reply to #6) by swapna posted on 7/4/2016 at 11:34 AM

How can my app read the sms., can you please help me

Comment 59 (In reply to #58) by swapna posted on 7/4/2016 at 11:36 AM

Its worked for me, but i need how read sms

Comment 60 (In reply to #58) by Raymond Camden posted on 7/4/2016 at 1:11 PM

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.

Comment 61 by hanie posted on 8/25/2016 at 6:57 AM

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 ;) ]

Comment 62 (In reply to #61) by Raymond Camden posted on 8/25/2016 at 1:06 PM

I'm sorry, but I can't understand what you are asking.

Comment 63 (In reply to #62) by hanie posted on 8/25/2016 at 1:41 PM

so sorry:(my English is not good:(
fortunately i get my answer :)

Comment 64 by hanie posted on 8/25/2016 at 4:11 PM

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)

Comment 65 (In reply to #64) by Raymond Camden posted on 8/25/2016 at 5:49 PM

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).

Comment 66 by Rika Van Der Post posted on 10/18/2016 at 1:15 PM

Can i get the sms send automatically without interaction from the user?

Comment 67 (In reply to #66) by Raymond Camden posted on 10/18/2016 at 2:15 PM

See the last paragraph - I address this.

Comment 68 by Jaimin Patel posted on 3/7/2017 at 3:44 PM

iOS, the user will see the ‘real’ SMS application pop up and send message.
Sending Message successfully i pay charges????

Comment 69 (In reply to #68) by Raymond Camden posted on 3/7/2017 at 3:50 PM

No, the user does.

Comment 70 by Uttaran Tribedi posted on 6/26/2017 at 8:41 AM

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?

Comment 71 (In reply to #70) by Raymond Camden posted on 6/26/2017 at 1:17 PM

What do you see when you check devtools?

Comment 72 (In reply to #71) by Uttaran Tribedi posted on 6/27/2017 at 7:22 AM

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

Comment 73 (In reply to #72) by Raymond Camden posted on 6/27/2017 at 1:12 PM

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.

Comment 74 by Paul Sammut posted on 8/13/2017 at 6:16 AM

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

Comment 75 (In reply to #74) by Paul Sammut posted on 8/13/2017 at 7:03 AM

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!!

Comment 76 (In reply to #75) by Raymond Camden posted on 8/13/2017 at 6:38 PM

Glad you got it!

Comment 77 by Omondi Mac'Odhiambo posted on 11/8/2018 at 3:02 PM

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?

Comment 78 (In reply to #77) by Raymond Camden posted on 11/8/2018 at 4:58 PM

You've got me - never dealt with multiple SIMs before.

Comment 79 by sady posted on 2/21/2019 at 7:32 AM

where is the app.js file

Comment 80 (In reply to #79) by Raymond Camden posted on 2/21/2019 at 2:37 PM

I linked to the repo in the last paragraph. :) Here is the direct link: https://github.com/cfjedima...

Comment 81 by Donz posted on 3/25/2019 at 3:33 PM

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

Comment 82 (In reply to #81) by Raymond Camden posted on 3/25/2019 at 4:15 PM

Please try remote debugging w/ Chrome and see what happens.

Comment 83 (In reply to #82) by Donz posted on 3/26/2019 at 1:04 AM

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

Comment 84 (In reply to #83) by Raymond Camden posted on 3/26/2019 at 1:32 PM

This implies you didn't install the plugin.

Comment 85 by Emmanuel Magbin posted on 8/19/2020 at 3:29 AM

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.

Comment 86 (In reply to #85) by Raymond Camden posted on 8/19/2020 at 11:01 AM

I assume you saw the note on top and are using https://github.com/cordova-... instead. That's the best I can suggest now.