1

I'm having trouble sending out HTML embedded emails from PHP with Gmail API.

Here's the code:

$raw_message .= "To:".$email['name']." <".$email['email'].">\r\n";
$raw_message .= 'Subject: =?utf-8?B?' .base64_encode($email_array['subject']) . "?=\r\n";

// Set the right MIME & Content type
$raw_message .= "MIME-Version: 1.0\r\n";
$raw_message .= "Content-Type: text/html; charset=utf-8\r\n";
$raw_message .= 'Content-Transfer-Encoding: quoted-printable' . "\r\n\r\n";

$mime = rtrim(strtr(base64_encode($raw_message), '+/', '-_'), '=');
$message = new Google_Service_Gmail_Message();
$message->setRaw($mime);

$template = $this->load->view('email/default_email_template', $email_template_array, true);
$raw_message .= $template;

$mime = rtrim(strtr(base64_encode($raw_message), '+/', '-_'), '=');
$message = new Google_Service_Gmail_Message();
$message->setRaw($mime);

$response = $service->users_messages->send($user, $message);

The email that I receive is just plain text.

Could use some help here.

Thanks in advance!

EDIT: Here's my template

<body style="height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important;margin: 0 !important; padding: 0 !important;">

<!-- HEADER -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse !important;">
<tr>
<td bgcolor="#fff" align="center">
 <!--[if (gte mso 9)|(IE)]>
 <table align="center" border="0" cellspacing="0" cellpadding="0" width="500">
 <tr>
        <td align="center" valign="top" width="500">
        <![endif]-->
        <table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse !important;max-width: 500px;width: 100% !important; max-width: 100% !important;">
            <tr>
                <td align="center" valign="top" style="padding: 15px 0;margin: 0 auto !important;" class="logo">
                    <a href="https://www.example.com" target="_blank">
                        <img alt="Logo" src="https://example.com/home/images/logo.png" width="90" height="90" style="border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; display: block; font-family: Helvetica, Arial, sans-serif; color: #ffffff; font-size: 16px;" border="0">
                    </a>
                    <span style="font-size: 40px; color: #000000;">mad</span><span style="font-size: 40px; color: #e18a07;">gigs</span>
                </td>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        </tr>
        </table>
        <![endif]-->
    </td>
</tr>
<tr>
    <td bgcolor="#ffffff" align="center" style="padding: 0px 15px 20px 15px;padding: 50px 15px 50px 15px !important;" class="section-padding">
        <table border="0" cellpadding="0" cellspacing="0" width="500" class="responsive-table" style="border-collapse: collapse !important;width: 100% !important;">
            <tr>
                <td>
                    <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse !important;">
                        <tr>
                            <td>
                                <!-- COPY -->
                                <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse !important;">
                                    <tr>
                                        <td align="center" style="font-size: 25px; font-family: Helvetica, Arial, sans-serif; color: #333333; padding-top: 30px;padding: 10px 5% 10px 5% !important;text-align: center" class="padding-copy">HI THERE</td>
                                    </tr>
                                    <tr>
                                        <td align="center" style="padding: 20px 0 0 0; font-size: 16px; line-height: 25px; font-family: Helvetica, Arial, sans-serif; color: #666666;padding: 10px 5% 10px 5% !important;text-align: center;" class="padding-copy">BODY OF THE EMAIL</td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </td>
</tr>
<tr>
    <td bgcolor="#ffffff" align="center" style="padding: 20px 0px;">
        <!--[if (gte mso 9)|(IE)]>
        <table align="center" border="0" cellspacing="0" cellpadding="0" width="500">
        <tr>
        <td align="center" valign="top" width="500">
        <![endif]-->
        <!-- UNSUBSCRIBE COPY -->
        <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse !important; max-width: 500px;width: 100% !important;" class="responsive-table">
            <tr>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        </tr>
        </table>
        <![endif]-->
    </td>
</tr>
<tr>
    <td bgcolor="#DFE4E6" align="center" style="padding: 20px 0px;">
        <!--[if (gte mso 9)|(IE)]>
        <table align="center" border="0" cellspacing="0" cellpadding="0" width="500">
        <tr>
        <td align="center" valign="top" width="500">
        <![endif]-->
        <!-- UNSUBSCRIBE COPY -->
        <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse !important;max-width: 500px;width: 100% !important;" class="responsive-table">
            <tr>
                <td align="center" style="font-size: 12px; line-height: 18px; color:#666666;">

                </td>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        </tr>
        </table>
        <![endif]-->
    </td>
</tr>

user3523750
  • 33
  • 1
  • 6

2 Answers2

1

After doing hours of research on this I finally figured it out. The charset in my raw message must be set to Content-Type: text/html; charset=iso-8859-1 & not utf-8.

More on this topic here -

Stackoverflow answer on the difference between UTF-8 and ISO-8859-1

Original article from Wikipidea on ISO-8859-1

Now, my mails are going out with all the styles in tact. Checked in on different clients, & it works perfectly fine on all of them!

Community
  • 1
  • 1
user3523750
  • 33
  • 1
  • 6
  • Kudos on coming back and providing an answer to your own question. There's some good information here. I also found [the third link](https://stackoverflow.com/questions/24940984/send-email-using-gmail-api-and-google-api-php-client) from a prior answer useful in my specific situation. – yodarunamok Jul 28 '20 at 23:29
0

Use inline styles to design the email/default_email_template page. Don't use css classes. If you use classes, your design will be visible in outlook and other email service tools. But not in gmail. Because gmail adds pre-characters to CSS class names.

Ruby Nanthagopal
  • 596
  • 1
  • 5
  • 17