Sending email using phonegap

  • 1
  • Question
  • Updated 4 years ago
How to send email through PhoneGap? html mailto is not working in device.
Photo of Sandeep Karnam

Sandeep Karnam

  • 16 Posts
  • 0 Reply Likes

Posted 4 years ago

  • 1
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
html mailto: is 'working' properly in a device (although it's not the most eleant way to do this, just like using mailto: on a website).
Anyway, which devices are you talking about (what OS and version), how did you whitelist the mailto intent and how are you sure that there's a mail client installed?
Photo of Sandeep Karnam

Sandeep Karnam

  • 16 Posts
  • 0 Reply Likes
Hi Petra, i am developing phonegap app for android and ios. Currently I am testing testing in android 5.1 lollipop phone with phonegap developer app installed in my phone. In my phone mail client i.e gmail is installed. My requirement is send html form details entered to send email from the app. Can you please share sample code to send email using phonegap including config.xml code.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Do you want to populate a mail client's edit screen, which can then be sent by the user, or discarded (as he wishes), OR
do you want a mail sent immediately when the user fills in an html form and taps the Send button in your app?

In the former case, you may want to use a plugin, as suggested elsewhere in this thread. In the latter case, you should post the data to a web service, using ajax/xhr, which then sends the mail from the server and returns a confirmation or error message (as the case may be) to the app.
Photo of Sandeep Karnam

Sandeep Karnam

  • 16 Posts
  • 0 Reply Likes
Hi Petra,
I am building a standalone app which i don't have server. Yes i need to send mail immediately as soon as user taps on submit button from html. Can you suggest me a simple solution for this.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
There is none.
In html, you can prepare an email, but the user must still send it all by himself.
The reason is that if browsers (or app webviews) allowed emailing directly from the form page, that will reveal the visitors email address. A malicious hacker can collect the email address of the visitors to the web page and then spam them. In order to protect the web users, no client side language can send email without the user’s intervention.
Photo of Sandeep Karnam

Sandeep Karnam

  • 16 Posts
  • 0 Reply Likes
Hi Petra ,

Thanks a lot for your kind responses. Can you please share sample code to use email plugin from my app (html & js) for both android and ios as i am very new to phonegap.I am unable to understand how to use email plugin as mentioned in the below link. Please help.
https://github.com/katzer/cordova-plu...
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Well, I could repeat the doc's text, but that would obviously not help much.
The docs contain only these things:
- how to include the plugin in your config.xml
- how to use the only two methods from the plugin's interface.
For each, the code is written out (as a sample).

What exactly is it that you don't understand? Do you have any specific questions about that document?
Photo of Sandeep Karnam

Sandeep Karnam

  • 16 Posts
  • 0 Reply Likes
Hi Petra,
I am not sure of how to install plugin from windows machine and how & where to include the plugin in config.xml for android and ios. I have config.xml created for the first time when sample app is created in phonegap desktop client.
Where to place this below piece of code in phonegap ( i mean which folder or which file).
Photo of Sandeep Karnam

Sandeep Karnam

  • 16 Posts
  • 0 Reply Likes
cordova.plugins.email.open({
to: Array, // email addresses for TO field
cc: Array, // email addresses for CC field
bcc: Array, // email addresses for BCC field
attachments: Array, // file paths or base64 data streams
subject: String, // subject of the email
body: String, // email body (for HTML, set isHtml to true)
isHtml: Boolean, // indicats if the body is HTML or plain text
}, callback, scope);
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Ah! We have a completely different problem here.

- Are you building with Phonegap Build, or do you build locally?
- If PGB, then you need to change the config and the directory structure as generated by the desktop client. PGB wants both config and index.html in the root of your zip file. And only upload your assets, not a full Cordova project.
- You don't "install" plugins when using PGB. Just reference the plugin as described in the plugin's docs and as described in the Plugins section of the Phonegap Build documentation (link in menu bar of this forum)
Photo of Sandeep Karnam

Sandeep Karnam

  • 16 Posts
  • 0 Reply Likes
I am building locally currently, i have followed below steps so far.

1. Installed PhoneGap Desktop app in windows machine and PhoneGap Developer app (mobile app) in my android phone from play store as mentioned in the phonegap website. http://phonegap.com/
2. Created a new phonegap app PhoneGap Desktop app, which generated phonegap project structure (www folder, config.xml,...) in my windows local drive.
3. I am modifying www folder as per my app requirement.
4. I am pushing the code to server from PhoneGap Desktop app. It displays server url
5. I am testing in my phone through phonegap mobile app by entering server url diplayed in PhoneGap Desktop app and submit.

Please let me know whether i am following the right procedure if not suggest me with the right procedure.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
The procedure is correct if you want to build locally. However, Phonegap Desktop app doesn't allow the use of third party plugins, so you won't get far with this one.
You could instead stop using the Phonegap desktop app now, add the plugin through the CLI, then build your app locally with CLI as described in the Phonegap documentation. The plugin will then be included and you can follow the docs from there.

This here is the Phonegap Build forum, the place for developers who don't go through the hassle of installing and maintaining Phonegap, SDK's, Java, plugins, Node and whatnot. PGB is a service that allows developers to build in the cloud, not locally.
So, you may be a bit lost here. You would more likely get better help at the Phonegap Google Group or at Stackoverflow.
Photo of Sandeep Karnam

Sandeep Karnam

  • 16 Posts
  • 0 Reply Likes
It is a great help from you. Thanks a ton Petra. I will try to use CLI for local and PGB for cloud build. I will get back to this forum if i stuck somewhere.
Photo of Sandeep Karnam

Sandeep Karnam

  • 16 Posts
  • 0 Reply Likes
Hi Petra,

How to call cordova.plugins.email.open() function.
Photo of Sushant Rawale

Sushant Rawale

  • 3 Posts
  • 0 Reply Likes
try emailcomposer plugin for phonegap.

https://github.com/katzer/cordova-plu...
Photo of Sandeep Karnam

Sandeep Karnam

  • 16 Posts
  • 0 Reply Likes
Hi Sushant,
My requirement is send html form details entered to send email from the app. Is it neccessary to use emailcomposer plugin? Cant i send email using html mailto? Can you please share sample code to send email with phonegap using emailcomposer including config.xml code. Also how to use emailcomposer plugin and how to call emailcomposer.js from html as i am very new to phonegap.
Photo of Sushant Rawale

Sushant Rawale

  • 3 Posts
  • 0 Reply Likes
this plugin will open default email client in app. Like gmail in case of android. and that mail screen is called by this plugin. Do you want to send email via users email id in device or via website only?
Photo of Sandeep Karnam

Sandeep Karnam

  • 16 Posts
  • 0 Reply Likes
Hi Sushant,

I want to send email via users email id in device. Can you please share sample sample code or links to implement this. Thanks in advance.
Photo of Sushant Rawale

Sushant Rawale

  • 3 Posts
  • 0 Reply Likes
Sample is given in link i provided in previous post.

1) add plugin from cmd:
cordova plugin add https://github.com/katzer/cordova-plu...

2) Add the following xml to your config.xml to always use the latest version of this plugin:

3) The following example shows how to create and show an email draft pre-filled with different kind of properties.

cordova.plugins.email.open({
to: 'max@mustermann.de',
cc: 'erika@mustermann.de',
bcc: ['john@doe.com', 'jane@doe.com'],
subject: 'Greetings',
body: 'How are you? Nice greetings from Leipzig'
});

//to open a blank draft.

cordova.plugins.email.open();
Photo of Sandeep Karnam

Sandeep Karnam

  • 16 Posts
  • 0 Reply Likes
Thank you very much Sushant.
Photo of Sandeep Karnam

Sandeep Karnam

  • 16 Posts
  • 0 Reply Likes
Hi Sushant,

How to call cordova.plugins.email.open() function.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
It's written out in the plugin's docs. Is there anything specifically which you don't understand?

cordova.plugins.email.open({
app: 'mailto',
subject: 'Sent with mailto'
})

https://github.com/katzer/cordova-plu...
Photo of Sandeep Karnam

Sandeep Karnam

  • 16 Posts
  • 0 Reply Likes
Hi Petra,
Code mentioned in docs is js function. How to invoke open function by just calling open() from html or js , or by calling cordova.plugins.email.open() as mentioned in docs. In some sites code is window.plugin.email.open(). So i am confused. Please help how to invoke open() function.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
I am not quite sure what it is you are asking.
You confirm that this is a javascript function (which it is). The funcion itself is defined in the plugin, so you don't need to worry about that.

If you have a html form with input fields for subject, message, recipient, you simply catch the 'submit' event and in the eventListeners's callback function you:
- set the values for the appropriate object attributes in
cordova.plugins.email.open({
to: Array, // email addresses for TO field
cc: Array, // email addresses for CC field
bcc: Array, // email addresses for BCC field
attachments: Array, // file paths or base64 data streams
subject: String, // subject of the email
body: String, // email body (for HTML, set isHtml to true)
isHtml: Boolean, // indicats if the body is HTML or plain text
}, callback, scope);

- call that function
- check for the result in the callback function.

Make sure you first use the isAvailable() function to check for an installed mail client. Otherwise, you shouldn't even display the form.
Photo of Sandeep Karnam

Sandeep Karnam

  • 16 Posts
  • 0 Reply Likes
Hi Petra,
I am doing following

1. Downloaded phonegap emailcomposer plugin (zip) from https://github.com/katzer/cordova-plu...

2. I have placed cordova-plugin-email-composer folder into the plugin folder of phonegap project created by phonegap desktop app

3. Added to the config.xml

4. In my html code is

5. In my js code is (just for testing purpose)

function sendEmail(){
cordova.plugins.email.open({
to: 'max@mustermann.de',
cc: 'erika@mustermann.de',
bcc: ['john@doe.com', 'jane@doe.com'],
subject: 'Greetings',
body: 'How are you? Nice greetings from Leipzig'
});

}

6. Building in phonegap desktop app
7. Running in phonegap mobile app

When i test this mail client is not opening.

Please let me know whether i am doing correctly ? or i have to build my phonegap locally using phonegap CLI?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
I will try to use CLI for local and PGB for cloud build.
Which one are you using now? If the latter, then don't download the plugin, don't use the developer app.

(4): When posting code at this forum, wrap it in a CODE element as described under "some HTML allowed"

(5) After which event, action or condition do you call your function sendEmail(), then?

Now, I am not sure whether or not this is the proper procedure. This is the Phonegap Build community. If you insist on using the CLI and/or developer app, you'd better ask your question in the Phonegap Google Group.
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
@Sushant,

You cannot use Phonegap Desktop App with Phonegap Build.

Phonegap Build is a cloud-based build system you upload your files to.

Are you using Phonegap Build? This forum is for supporting Phonegap Build. If you are using the CLI (Command Line Interface), you should be on Google Groups for Phonegap _or_ Adobe forums for Phonegap CLI

Jesse