With YAMM, you can already send campaigns with a simple template. But you can also choose to create an advanced formatted newsletter using HTML and CSS directly in your Gmail draft. This tutorial will show you how to do it.
Goal
What you'll learn
You will learn how to send a mail merge with YAMM using a coded HTML draft saved in Gmail.
Time to complete
Prerequisites
Running a simple example
![]() |
![]() |
Note: Thanks to the media queries, the orange and blue colors are reversed when the email is opened from a mobile phone. You can modify the styles to change other elements (like the font size etc.).
To reproduce the same results and send this email template with YAMM, please follow these steps:
1. Activate 'Plain text mode'
The purpose of this is to get rid of any formatting that can cause troubles and overlaps with the HTML code that you'll insert later in this draft.
2. Code your template in a Gmail draft
Or simply copy the following example code (starting from <html> to </html>), and paste it into your Gmail draft.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 |
<html> <head> <style> .banner-color { background-color: #eb681f; } .title-color { color: #0066cc; } .button-color { background-color: #0066cc; } @media screen and (min-width: 500px) { .banner-color { background-color: #0066cc; } .title-color { color: #eb681f; } .button-color { background-color: #eb681f; } } </style> </head> <body> <div style="background-color:#ececec;padding:0;margin:0 auto;font-weight:200;width:100%!important"> <table align="center" border="0" cellspacing="0" cellpadding="0" style="table-layout:fixed;font-weight:200;font-family:Helvetica,Arial,sans-serif" width="100%"> <tbody> <tr> <td align="center"> <center style="width:100%"> <table bgcolor="#FFFFFF" border="0" cellspacing="0" cellpadding="0" style="margin:0 auto;max-width:512px;font-weight:200;width:inherit;font-family:Helvetica,Arial,sans-serif" width="512"> <tbody> <tr> <td bgcolor="#F3F3F3" width="100%" style="background-color:#f3f3f3;padding:12px;border-bottom:1px solid #ececec"> <table border="0" cellspacing="0" cellpadding="0" style="font-weight:200;width:100%!important;font-family:Helvetica,Arial,sans-serif;min-width:100%!important" width="100%"> <tbody> <tr> <td align="left" valign="middle" width="50%"><span style="margin:0;color:#4c4c4c;white-space:normal;display:inline-block;text-decoration:none;font-size:12px;line-height:20px">Webinars</span></td> <td valign="middle" width="50%" align="right" style="padding:0 0 0 10px"><span style="margin:0;color:#4c4c4c;white-space:normal;display:inline-block;text-decoration:none;font-size:12px;line-height:20px">Tuesday 14, February 2017</span></td> <td width="1"> </td> </tr> </tbody> </table> </td> </tr> <tr> <td align="left"> <table border="0" cellspacing="0" cellpadding="0" style="font-weight:200;font-family:Helvetica,Arial,sans-serif" width="100%"> <tbody> <tr> <td width="100%"> <table border="0" cellspacing="0" cellpadding="0" style="font-weight:200;font-family:Helvetica,Arial,sans-serif" width="100%"> <tbody> <tr> <td align="center" bgcolor="#8BC34A" style="padding:20px 48px;color:#ffffff" class="banner-color"> <table border="0" cellspacing="0" cellpadding="0" style="font-weight:200;font-family:Helvetica,Arial,sans-serif" width="100%"> <tbody> <tr> <td align="center" width="100%"> <h1 style="padding:0;margin:0;color:#ffffff;font-weight:500;font-size:20px;line-height:24px">Invitation to Revevol webinar</h1> </td> </tr> </tbody> </table> </td> </tr> <tr> <td align="center" style="padding:20px 0 10px 0"> <table border="0" cellspacing="0" cellpadding="0" style="font-weight:200;font-family:Helvetica,Arial,sans-serif" width="100%"> <tbody> <tr> <td align="center" width="100%" style="padding: 0 15px;text-align: justify;color: rgb(76, 76, 76);font-size: 12px;line-height: 18px;"> <h3 style="font-weight: 600; padding: 0px; margin: 0px; font-size: 16px; line-height: 24px; text-align: center;" class="title-color">Hi {{Name}},</h3> <p style="margin: 20px 0 30px 0;font-size: 15px;text-align: center;">Join our webinar to discover our latest release. Places are limited, so <b>register now</b>!</p> <div style="font-weight: 200; text-align: center; margin: 25px;"><a style="padding:0.6em 1em;border-radius:600px;color:#ffffff;font-size:14px;text-decoration:none;font-weight:bold" class="button-color">Join the conference</a></div> </td> </tr> </tbody> </table> </td> </tr> <tr> </tr> <tr> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> <tr> <td align="left"> <table bgcolor="#FFFFFF" border="0" cellspacing="0" cellpadding="0" style="padding:0 24px;color:#999999;font-weight:200;font-family:Helvetica,Arial,sans-serif" width="100%"> <tbody> <tr> <td align="center" width="100%"> <table border="0" cellspacing="0" cellpadding="0" style="font-weight:200;font-family:Helvetica,Arial,sans-serif" width="100%"> <tbody> <tr> <td align="center" valign="middle" width="100%" style="border-top:1px solid #d9d9d9;padding:12px 0px 20px 0px;text-align:center;color:#4c4c4c;font-weight:200;font-size:12px;line-height:18px">Regards, <br><b>The Awesome Team</b> </td> </tr> </tbody> </table> </td> </tr> <tr> <td align="center" width="100%"> <table border="0" cellspacing="0" cellpadding="0" style="font-weight:200;font-family:Helvetica,Arial,sans-serif" width="100%"> <tbody> <tr> <td align="center" style="padding:0 0 8px 0" width="100%"></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </center> </td> </tr> </tbody> </table> </div> </body> </html> |
Your draft should look like this.
The hardest part is done! Now all you need to do is to select your template and send it through YAMM.
3. Select your template in YAMM UI and send it to your mailing list
Go back to your spreadsheet, then click Add-ons > Yet Another Mail Merge > Start Mail Merge.
Then select your template and click Send emails.
After doing this, your recipients will get the following email.
As you can see, YAMM took your coded email template and replaced it with the right formatting. This feature will let you customize your emails indefinitely! Just make sure to use CSS properties that are supported by Gmail. You'll find the official list here.
Comments
8 comments
Now all you need to do is to select your template and send it through YAMM.
3. Select your template in YAMM UI and send it to your mailing list
how to do this ?
Hi Mohammed,
We have added an explanation and a screenshot for this part. Please let us know if this is clear enough, and thanks for your feedback ;-)
How do I link a button?
For ref:
<div style="font-weight: 200; text-align: center; margin: 25px;"><a style="padding:0.6em 1em;border-radius:600px;color:#ffffff;font-size:14px;text-decoration:none;font-weight:bold" class="button-color">Join the realty revolution</a>
<a href="mailto:sean@punchlistsc.com"</a>
</div>
Bonjour,
Est-ce-que vous connaissez un service d'éditeur e-mail HTML en drag and drop avec toutes les options de mailing (ajout images, cadres, fonction d'unscribe, titre, boutons…) qui serait :
^^
how to Select your template in YAMM UI and send it to your mailing list.
Please send me the details on my mail to follow the steps 3.
I have trouble in this part to understand.
i would like to have a template for my website (https://bloggerrun.com) can anyone suggest to me?
Thank you very much for the code but i try to add image and it is not show up. Already check my email setting and it is "Always display images from the recipient"
Hi,
Thanks for your post!
Your issue seems to require a bit of technical investigation. Could you please send an email to our support team support@yet-another-mail-merge.com. Please provide any details, screenshot that can be helpful
Thanks
Please sign in to leave a comment.