This is a very simple integration with the native email application on the device. If the user imported their contacts from Google Contacts, use the Gmail compose UI in a new window.

After the user selects their contacts from the widget and clicks the CTA it will open an email composition window. The selected contacts are populated in the BCC field of the email.

In this example, placeholder text is used to prepopulate the subject and body of the email.

Show Code

<script src="https://api.cloudsponge.com/widget/localhost-only.js"></script>
<script>
cloudsponge.init({
  browserContactCacheMin: 3600,
  localeData: {
    GET_CONTACTS: 'Send ${0} invitations'
  },
  // receive the contacts into your javascript and direct the page to open the native mail app.
  afterSubmitContacts: function(contacts, source, owner) {
    var emails = [],
        senderEmail = owner && owner.email && owner.email[0] && encodeURIComponent(owner.email[0].address),
        subject = encodeURIComponent('Hello there'),
        body = encodeURIComponent('This is the body.\r\n\r\nHere is another line in the body.\r\n\r\nHere is a <a href="https://www.example.com/cool">link to sign up for my cool service</a>.');

    for (var contact of contacts) {
      emails.push(contact.selectedEmail());
    }
    emails = emails.join();

    var composeLink = null;
    if (source === 'gmail' && isDesktop()) {
      // gmail has a nice composition UX that is low distraciton and closes after the user is done
      composeLink = 'https://mail.google.com/mail/u/'+senderEmail+'?view=cm&fs=1&to='+senderEmail+'&su='+subject+'&body='+body+'&bcc='+emails;
      window.open(composeLink);
    } else {
      var mailto = 'mailto:'+senderEmail+'?bcc='+emails+'&subject='+subject+'&body='+body;
      window.location.href = mailto;
    }
  }
});
// helper function to determine if the gmail composer will open as expected
function isDesktop() {
  var reMobileUA = /(Android|iPhone|iPad|iPod|Windows Phone|Windows CE|BlackBerry|Samsung|SAMSUNG|Opera Mini|Opera Mobi)/;
  return !reMobileUA.test(navigator.userAgent);
}
</script>