Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Send Email From Android And iOS With Ionic Framework

TwitterFacebookRedditLinkedInHacker News

Sending email directly from your mobile application might be critical at some point in time. You may want to create an easy outlet for users to send you feedback about your app without having to sift through your website. Using the Apache Cordova plugin, Email Composer, you can easily send email from Android and iOS with Ionic Framework.

Using a command prompt, navigate to your Ionic project and run the following command:

cordova plugin add https://github.com/jcjee/email-composer.git

This will download the Email Composer plugin and install it into your project for use. As described in the project’s README, to send an email you must use the following function:

window.plugins.emailComposer.showEmailComposerWithCallback(callback, subject, body, toRecipients, ccRecipients, bccRecipients, isHtml, attachments, attachmentsData);

Parameter information is as follows:

ParameterDescription
callbackFunction that receives a return parameter from the plugin
subjectA string value subject for the email
bodyA string value email for the email body. Can be HTML if isHTML is set to true
toRecipientsAn array of string value email addresses
ccRecipientsAn array of string value email addresses for the CC
bccRecipientsAn array of string value email addresses for the BCC
isHTMLBoolean determining if the email body will be plain text or HTML
attachmentsAn array of the files, with full paths, that you wish to send
attachmentDataAn array of file name data pairs

An example of this plugin in action can be seen here:

var exampleApp = angular.module('example', ['ionic']);

exampleApp.controller('EmailController', function($scope) {
    $scope.sendFeedback= function() {
        if(window.plugins && window.plugins.emailComposer) {
            window.plugins.emailComposer.showEmailComposerWithCallback(function(result) {
                console.log("Response -> " + result);
            },
            "Feedback for your App", // Subject
            "",                      // Body
            ["test@example.com"],    // To
            null,                    // CC
            null,                    // BCC
            false,                   // isHTML
            null,                    // Attachments
            null);                   // Attachment Data
        }
    }
});

It is a good idea to note that this will only work on the device. Plugins cannot be tested from a web browser. It is also important to note that emails can only be sent if the user has configured a mail client on their device. If no mail account is found, a popup will be shown stating so.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.