CODEWITHSUNDEEP
cssemailhtml-emailmime-typesamazon-ses
Jim
Jim

Reputation: 4192

How Do I Add Inline CSS Styles To Gmail Email (SES sendRawEmail)?

I am using amazon SES to send HTML emails using the node.js aws-sdk library. Here is the js script that I'm using to send it:

export const main: APIGatewayProxyHandler = async (event, _context) => {

  const success = await sendEmail()

  return {
    statusCode: 200,
    body: JSON.stringify({
      message: 'Done!',
      input: event,
    }, null, 2),
  };

}

const sendEmail = async () => {

  const fileName = "2019-W-4.pdf";
  var rawMailBody = "From: [email protected]\n";
  rawMailBody = rawMailBody + "To: [email protected]\n";
  rawMailBody = rawMailBody + "Subject: Test Subject Dueces 3\n";
  rawMailBody = rawMailBody + ``
  rawMailBody = rawMailBody + "MIME-Version: 1.0\n";
  rawMailBody = rawMailBody + "Content-Type: multipart/mixed; boundary=\"NextPart\"\n\n";
  rawMailBody = rawMailBody + "--NextPart\n";

  rawMailBody = rawMailBody + "Content-Type: text/html;\n";
  rawMailBody = rawMailBody + "Content-Transfer-Encoding: quoted-printable\n";
  rawMailBody = rawMailBody + "\n";

  const emailData = await getEmailData();

  rawMailBody = rawMailBody + emailData;

  console.log('final body', rawMailBody)

  const params = {
    RawMessage: {
      Data: rawMailBody
    },
    Destinations: [],
    Source: '[email protected]'
  };

  ses.sendRawEmail(params, function (err, data) {
    if (err) console.log("Error: " + err);
    else {

      console.log("Success call: ", JSON.stringify(data));
      return data
    }

  });

}

const getEmailData = () => {

  return new Promise( (resolve, reject) => {

    var output = '\n';

    var readerStream = readline.createInterface({
      input: require('fs').createReadStream('./simple.html')
    });

    readerStream.on('line', function (line) {
      const newLine = line;
      output = output + newLine;
      console.log('reading...', line)
    });

    readerStream.on('close', () => {
      console.log('closing...' , output)
      output = output + "\n";
      resolve(output);
    });

  })

}

And here is the "simple.html" file that I am reading and inserting into the email:

<html>

<body>
    <table style="background-color: #737373; color: orange;">
        <tr>
            <td style="background-color: #737373; color: orange;">

                <span style="background-color: #737373; color: orange">

                    Hello!
                    Hello2!
                </span>
                </th>
                <h2>More cool Stuff!</h1>
                    <pre>some pre text...!</pre>
                    <p>Please see the attached file for a list of customers to contact.</p>
                    <h1>Yaaaaa!</h1>
            </td>
        </tr>
    </table>
</body>

</html>

As you can see I am attempting to style the text "Hello" and "Hello2!" with a grey background and orange color. However, this is what I see in gmail:

enter image description here

It is coming through as HTML, but some reason I cannot get any styles whatsoever to be applied. After looking at other posts everyone says that using inline styles should work, but I AM using inline styles...

Can anyone help point out what I am doing wrong here?

Thanks!

Upvotes: 1

Views: 1795

Answers (2)

Jim
Jim

Reputation: 4192

Along with the correction from the answer by @Syfer for proper html, I simply deleted the line that a adds Content-Transfer-Encoding: quoted-printable\n to rawMailBody and it worked!

Upvotes: 3

Syfer
Syfer

Reputation: 4489

You have a few issues with your code:

  1. You have a rogue th after the span for the background-color and color
  2. You have a h2 open with a h1 closing.

Fixing those will get the below code that works.

<html>

<body>
    <table style="background-color: #737373; color: orange;">
        <tr>
            <td style="background-color: #737373; color: orange;">

                <span style="background-color: #737373; color: orange">

                    Hello!
                    Hello2!
                </span>
               
                <h2>More cool Stuff!</h2>
                    <pre>some pre text...!</pre>
                    <p>Please see the attached file for a list of customers to contact.</p>
                    <h1>Yaaaaa!</h1>
            </td>
        </tr>
    </table>
</body>

</html>

Upvotes: 0

Related Questions