Unable to send rich text emails with GMAIL API

Question

I tried this:

var sendRequest = gapi.client.gmail.users.messages.send({
    'userId': 'me',
    'resource': {
        'raw': window.btoa(email).replace(/\+/g, '-').replace(/\//g, '_')
    }
});

And this, too:

var Base64={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=Base64._utf8_encode(e);while(f<e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/[^A-Za-z0-9\+\/\=]/g,"");while(f<e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=Base64._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/\r\n/g,"\n");var t="";for(var n=0;n<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);n+=3}}return t}}

var encodedString = Base64.encode(email).replace(/\+/g, '-').replace(/\//g, '_').replace(/\=+$/, '');

var sendRequest = gapi.client.gmail.users.messages.send({
    'userId': 'me',
    'resource': {
      'raw': encodedString
    }
});

I always get the email with the html tags.

Out of curiosity I sent an email directly from Gmail with the text: text and it was received unformatted. But when I format it in Gmail, it is received as text.

So I'm wondering if it's possible to send rich text emails with the Gmail API?

EDIT Full code:

function sendEmail() {
      $('#submit_compose').addClass('disabled');

        var to = $("#compose-to").val();
        var cc = $("#compose-cc").val();
        var subject = $("#compose-subject").val();
        var message = $("#compose-message").val();

        if (to == "" || to == "null" || to == null) {
            ShowNotification("danger", "Please specify at least one recipient!");
            $('#submit_compose').removeClass('disabled');
        } else if (!validateEmail(to)) {
            ShowNotification("danger", "Please specify a valid email!");
            $('#submit_compose').removeClass('disabled');
        } else if (subject == "" || subject == "null" || subject == null) {
            ShowNotification("danger", "Please specify a subject!");
            $('#submit_compose').removeClass('disabled');
        } else if (message == "" || message == "null" || message == null) {
            $('#submit_compose').removeClass('disabled');
        } else {
        alert('ok');
          sendMessage(
            {
              'To': $('#compose-to').val(),
              'Subject': $('#compose-subject').val()
            },
            $('#compose-message').val(),
            composeTidy
          );
        }
      return false;
    }

    function sendMessage(headers_obj, message, callback) {
      var email = '';
        //message = '<b>hello</b>';
      for(var header in headers_obj)
        email += header += ": "+headers_obj[header]+"\r\n";

      email += "\r\n" + message;
        alert(email);
      var sendRequest = gapi.client.gmail.users.messages.send({
        'userId': 'me',
        'resource': {
          'raw': window.btoa(email).replace(/\+/g, '-').replace(/\//g, '_')
        }
      });
      return sendRequest.execute(callback);
    }

    function composeTidy() {
        $('#compose-modal').modal('hide');
        $('#compose-to').val('');
        $('#compose-subject').val('');
        $('#compose-message').val('');
        ShowNotification("success", "Message Sent!");
        $('#submit_compose').removeClass('disabled');
    }

It is possible. Would you mind including your email in the question? — Tholle
I'm using CKEditor for creating rich text emails. I can write test in the textarea and I can write test then making it bold via the B button, no difference. If I ignore CKEditor and set the message as message='hello' (see code above) I get hello as unformatted — erdomester
Are you including a content type header? Content-Type: text/html — Tholle
Thank you. Didn't know this was necessary. It works with and without CKEditor, too! — erdomester

Tholle Tholle · Accepted Answer · 2016-09-16T17:53:56

If you are not giving your message a content type, it will most likely fall back to text/plain. Make sure you include a Content-Type header with the value of text/html:

From: [email protected]
To: [email protected]
Subject: Foo bar
Content-Type: text/html; charset=UTF-8

<b> This is the content of the email </b>

Unable to send rich text emails with GMAIL API

1 Answers