sendgrid / email-templates

A repository of common email templates to use and modify to your heart's content.

A repository of common email templates to use and modify to your heart's content.

Table of Contents

• Usage
• Purpose
• Contributing
• Paste Templates
• License

Purpose

The purpose of this repo is to provide email skeletons that someone can use to build any emails that they would like to build. The content of the email templates in this repo doesn't really matter, we are more focused on providing templates that can be used in multiple ways.

Usage

Templates Usage Documentation

Contributing

Review Pull Requests

Paste Templates

Our initial set of templates were designed and built to reflect the most common transactional templates. These can be a great starting point for new customers of SendGrid.

License

The MIT License (MIT)

email-templates's Issues

Add a .env_sample file

Our preference is that users have an environment file when using the SendGrid API, because it is less likely that someone would commit their credentials to github.

Please make a couple changes:

• make a .env_sample file that contains: export SENDGRID_API_KEY=''
• make (or add) a .gitignore file and include .env
• add instructions to the README file about how to copy .env_sample to .env and add the API Key

Transactional template designer does not respect handle bars

Actual Behavior

When creating a transactional template with the designer, code blocks aren't correctly formatted.

It looks like this after formatting:

{{#each user.orderHistory}}
    
    {{/each}}
  <table>
  <tbody><tr>
      <td>You ordered: {{this.item}} on: {{this.date}}</td>
    </tr></tbody>
</table>

Expected Behavior

It should look like this:

<table>
  <tbody>
    {{#each user.orderHistory}}
    <tr>
      <td>You ordered: {{this.item}} on: {{this.date}}</td>
    </tr>
    {{/each}}
  </tbody>
</table>

Steps to reproduce it

Create a code block in the transactional template designer UI and paste the code above.

Add a CODE OF CONDUCT to this repo

You can get a copy of this file here

Add this file to this repo.

Can not use formatDate helper without time part

Expected Behaviour

Template should be rendered, and test email should be received.

Actual Behaviour

Test email is not received. It works on preview, also on sending test email it says, test email sent successfully, but test email never received

Steps to reproduce it

Email template
<p>{{formatDate recommendation.project.start_date "DD MMM YYYY"}}</p>

Test data
{ "recommendation": { "project": { /* ---------------- */ "start_date": "2022-07-04" } } }

We have to pass whole date time, otherwise its not working with formatDate, e.g. "start_date": "2022-07-04T00:00:00Z"
If this is expected behaviour, then preview should not display it or at least test mail sending should not display success message.
Or it would be great if date without time is allowed on formatDate, assuming time is 00:00:00Z.

LICENSE copyrights SendGrid instead of SendGrid, Inc

Actual Behaviour

LICENSE copyrights SendGrid`` instead of SendGrid, Inc```

Expected Behaviour

Most repositories have them licensed to SendGrid, Inc but not this one. It should do the same.

Examples:
https://github.com/sendgrid/sendgrid-csharp/blob/master/LICENSE.txt
https://github.com/sendgrid/sendgrid-php/blob/master/LICENSE.txt
https://github.com/sendgrid/sendgrid-nodejs/blob/master/LICENSE.md
https://github.com/sendgrid/sendgrid-python/blob/master/LICENSE.txt

Steps to reproduce it

Visit LICENSE in the repository

Would you like to work on the issue?

PR coming up in a minute.

Force Travis build to fail when htmlint has errors

Currently, Travis is building properly, but htmlint is throwing errors and not causing Travis to fail:

[htmllint error in paste-templates/admin-created-account-welcome.html ] TypeError: bannedAttrs.forEach is not a function
[htmllint error in paste-templates/base.html ] TypeError: bannedAttrs.forEach is not a function
[htmllint error in paste-templates/digest.html ] TypeError: bannedAttrs.forEach is not a function
[htmllint error in paste-templates/email-confirmation.html ] TypeError: bannedAttrs.forEach is not a function
[htmllint error in paste-templates/password-reset_design_editor.html ] TypeError: bannedAttrs.forEach is not a function
[htmllint error in paste-templates/password-reset.html ] TypeError: bannedAttrs.forEach is not a function
[htmllint error in paste-templates/receipt.html ] TypeError: bannedAttrs.forEach is not a function
[htmllint error in paste-templates/welcome.html ] TypeError: bannedAttrs.forEach is not a function
[htmllint] found 0 errors out of 8 files

Sendgrid template does not support #with helper

Actual Behaviour

Can not use with (https://handlebarsjs.com/guide/block-helpers.html#the-with-helper) block helper in email template. It does work in UI editor but actual email with the same test data does not contain the block.

Expected Behaviour

Email includes includes all blocks

Steps to reproduce it

• Create simple template

{{#with data}}
    {{one}}
    {{two}}
    {{three}}
{{/with}}

• Add test data

{
    "data": {
        "one": 1,
        "two": 2,
        "three": 3
    }
}

• Check that UI editor shows 1 2 3
• Send test email

Deploy to Sendgrid through GitHub actions?

Would love to version control dynamic templates in Github. Is there a way to deploy them to Sendgrid through GitHub Actions?

Create your own style of paste-templates

Apply your own styles to our first email template styles:

• Make a copy of the paste-templates directory.
• Change the new directory name to a new name for the style (be creative, but work-appropriate)
• Apply changes to the templates, whether style changes, format, whatever
• Make sure the templates continue to work in various email tools and are still responsive (the best way to do this is to use litmus)
• Publish by submitting a Pull Request

Edit: please change the word "Paste" from the original templates to match the name of your new template

Handlebars Not working

The variable are not been replace on the email, but are working fine on the test data, I'm with JSON

{
  "nickname": "Nick Name RESFull_Email",
  "asunto": "Mi super asunto",
  "variable": "Mi Variable",
  "from": {
    "email": "<<pcFromEmail>>",
    "name": "<<pcFromName>>"
  },
  "reply_to": {
    "email": "<<pcReplyTo>>",
    "name": "<<pcRepyName>>"
  },
  "content": [
    {
      "type": "text/html",
      "value": "Prueba body"
    }
  ],
  
  "personalizations": [
    {
      "to": [
        {
          "email": "<<pcToEmail>>"
        },
        {
          "email": "[email protected]"
        }
      ],
      "subject": "<<pcSubject>>"
      
    }
  ],
  "attachments": [
    {
      "content": "<<lcFileRead64>>",
      "type": "<<pcContenType>>",
      "filename": "<<pcAttachmentFileName>>",
      "disposition": "attachment"
    }
  ],
  "template_id": "d-xxxxxxxxxxxxxxxxxxxxxxxxxxx"
}

I had try using {{var}}, %var% 
Using version 3 of the API, any help will be appreciate

In HTML Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html data-editor-version="2" class="sg-campaigns" xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
      <!--[if !mso]><!-->
      <meta http-equiv="X-UA-Compatible" content="IE=Edge">
      <!--<![endif]-->
      <!--[if (gte mso 9)|(IE)]>
      <xml>
        <o:OfficeDocumentSettings>
          <o:AllowPNG/>
          <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
      </xml>
      <![endif]-->
      <!--[if (gte mso 9)|(IE)]>
  <style type= of the a"text/css">
    body {width: 600px;margin: 0 auto;}
    table {border-collapse: collapse;}
    table, td {mso-table-lspace: 0pt;mso-table-rspace: 0pt;}
    img {-ms-interpolation-mode: bicubic;}
  </style>
<![endif]-->
      <style type="text/css">
    body, p, div {
      font-family: arial,helvetica,sans-serif;
      font-size: 14px;
    }
    body {
      color: #000000;
    }
    body a {
      color: #1188E6;
      text-decoration: none;
    }
    p { margin: 0; padding: 0; }
    table.wrapper {
      width:100% !important;
      table-layout: fixed;
      -webkit-font-smoothing: antialiased;
      -webkit-text-size-adjust: 100%;
      -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
    }
    img.max-width {
      max-width: 100% !important;
    }
    .column.of-2 {
      width: 50%;
    }
    .column.of-3 {
      width: 33.333%;
    }
    .column.of-4 {
      width: 25%;
    }
    @media screen and (max-width:480px) {
      .preheader .rightColumnContent,
      .footer .rightColumnContent {
        text-align: left !important;
      }
      .preheader .rightColumnContent div,
      .preheader .rightColumnContent span,
      .footer .rightColumnContent div,
      .footer .rightColumnContent span {
        text-align: left !important;
      }
      .preheader .rightColumnContent,
      .preheader .leftColumnContent {
        font-size: 80% !important;
        padding: 5px 0;
      }
      table.wrapper-mobile {
        width: 100% !important;
        table-layout: fixed;
      }
      img.max-width {
        height: auto !important;
        max-width: 100% !important;
      }
      a.bulletproof-button {
        display: block !important;
        width: auto !important;
        font-size: 80%;
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      .columns {
        width: 100% !important;
      }
      .column {
        display: block !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
      .social-icon-column {
        display: inline-block !important;
      }
    }
  </style>
      <!--user entered Head Start--><!--End Head user entered-->
    </head>
    <body>
      <center class="wrapper" data-link-color="#1188E6" data-body-style="font-size:14px; font-family:arial,helvetica,sans-serif; color:#000000; background-color:#FFFFFF;">
        <div class="webkit">
          <table cellpadding="0" cellspacing="0" border="0" width="100%" class="wrapper" bgcolor="#FFFFFF">
            <tr>
              <td valign="top" bgcolor="#FFFFFF" width="100%">
                <table width="100%" role="content-container" class="outer" align="center" cellpadding="0" cellspacing="0" border="0">
                  <tr>
                    <td width="100%">
                      <table width="100%" cellpadding="0" cellspacing="0" border="0">
                        <tr>
                          <td>
                            <!--[if mso]>
    <center>
    <table><tr><td width="600">
  <![endif]-->
                                    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%; max-width:600px;" align="center">
                                      <tr>
                                        <td role="modules-container" style="padding:0px 0px 0px 0px; color:#000000; text-align:left;" bgcolor="#FFFFFF" width="100%" align="left"><table class="module preheader preheader-hide" role="module" data-type="preheader" border="0" cellpadding="0" cellspacing="0" width="100%" style="display: none !important; mso-hide: all; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">
    <tr>
      <td role="module-content">
        <p>PRODUCTOS QUIMICOS REPRESENTACIONES, SOCIEDAD ANONIMA</p>
      </td>
    </tr>
  </table><table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-muid="84b34b4b-37ca-4a2c-8cba-bf23316eced7" data-mc-module-version="2019-10-22">
    <tbody>
      <tr>
        <td style="padding:18px 0px 18px 0px; line-height:22px; text-align:inherit;" height="100%" valign="top" bgcolor="" role="module-content"><div><div style="font-family: inherit; text-align: inherit"><strong>Factura electronica: PRODUCTOS QUIMICOS REPRESENTACIONES, SOCIEDAD ANONIMA %asunto% </strong></div><div></div></div></td>
      </tr>
    </tbody>
  </table><table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-muid="fa66d58d-29b4-4270-8c10-8a226defd973" data-mc-module-version="2019-10-22">
    <tbody>
      <tr>
        <td style="padding:18px 0px 18px 0px; line-height:22px; text-align:inherit;" height="100%" valign="top" bgcolor="" role="module-content"><div><div style="font-family: inherit; text-align: inherit">Estimado cliente: {{Cliente}}<br>
Adjunto le enviamos un PDF del DOCUMENTO TRIBUTARIO ELECTRONICO FEL en referencia %variable%</div>
<div style="font-family: inherit; text-align: inherit"><br></div>
<div style="font-family: inherit; text-align: inherit">Esto es una variable {{variable}}</div><div></div></div></td>
      </tr>
    </tbody>
  </table><table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-muid="6f598c48-e014-453c-9ce4-9e55dc128b96" data-mc-module-version="2019-10-22">
    <tbody>
      <tr>
        <td style="padding:18px 0px 18px 0px; line-height:22px; text-align:inherit;" height="100%" valign="top" bgcolor="" role="module-content"><div><div style="font-family: inherit; text-align: inherit">Gracias</div>
<div style="font-family: inherit; text-align: inherit">Este correo es generado automaticamente por nuestro sistema, despues de la autorizacion de la SAT!...</div><div></div></div></td>
      </tr>
    </tbody>
  </table><div data-role="module-unsubscribe" class="module" role="module" data-type="unsubscribe" style="color:#444444; font-size:12px; line-height:20px; padding:16px 16px 16px 16px; text-align:Center;" data-muid="4e838cf3-9892-4a6d-94d6-170e474d21e5"><div class="Unsubscribe--addressLine"></div><p style="font-size:12px; line-height:20px;"><a target="_blank" class="Unsubscribe--unsubscribeLink zzzzzzz" href="{{{unsubscribe}}}" style="">Unsubscribe</a> - <a href="{{{unsubscribe_preferences}}}" target="_blank" class="Unsubscribe--unsubscribePreferences" style="">Unsubscribe Preferences</a></p></div></td>
                                      </tr>
                                    </table>
                                    <!--[if mso]>
                                  </td>
                                </tr>
                              </table>
                            </center>
                            <![endif]-->
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </div>
      </center>
    </body>
  </html>

Email templates

Add CONTRIBUTING guide to this repo

Grab contributing file from here and make the following modifications:

• Change every instance referencing sendgrid-python to reference email-templates

Remove:

• Environment Variables section
• Development Environment section from improvements to the codebase
• Testing Multiple Versions of Python section

Rewrite

• Understanding the Codebase to match this repo
• Testing to have the same information from the README in this repo

For Style Guide and Naming Conventions:

• add instructions about:
• For new styles: create a directory in the root named after the "style"
• For each email type: create a file in the directory, with a hyphenated name describing the email type (give the examples from paste-template)

Add a USAGE.md file

Usage files are really nice when they exist in a repo, because it makes it really obvious where to look for information about how to use this tool. It can be frustrating when you expect this file to be there and it's not.
Please add a USAGE.md file, you can see an example of this
here

Please make sure you modify the file for this repo (hint: Most of this information should be in the README file)

Add a CHANGELOG to this repo

Add a changelog that follows this format

• add the date this repo was created as the first entry

Create an ISSUES_TEMPLATE

You can get an example of this here

dynamic-templates README.md Documentation is a 404

The link to documentation on the README currently goes to a 404 page. I'm not sure where is it supposed to go instead.

Can not use formatDate helper inside table

Actual Behaviour

Template should be rendered.

Expected Behaviour

Test email is not received. It's hard to say what is wrong. But when I replace table with ul or just p tags it works ok.

Steps to reproduce it

• Create email template

<html>
<body>
<table>
<tbody>
{{#each meetings}}
<tr>
    <td>{{title}}</td>
    <td>{{formatDate startAt "h:mm"}}</td>
    <td>{{formatDate endAt "h:mm"}}</td>
</tr>
{{/each}}
</tbody>
</table>
</body>
</html>

• Set test data

{ 
    "meetings": [
        {
            "title": "meeting 7",
            "startAt": 1633023600,
            "endAt": 1633023600
        },
        {
            "title": "meeting 8",
            "startAt": 1633023600,
            "endAt": 1633023600
        },
        {
            "title": "meeting 8",
            "startAt": 1633023600,
            "endAt": 1633023600
        }            
    ]
}

• Editor shows data in the table.
• Send test email
• No email received

If you replace table with list it works fine. If you delete formatDate helper it also works

Add email template validation to TravisCI

Is there a way to validate the email HTML inside of a TravisCI script? Maybe through an npm package or something else?

Set up a travis.yml that will cause all of the files within sub directories of this repo to be validated for proper HTML.

added label on issue and PR

Like if issue assign somebody then "Under the progress"
and If not then like " unassigned"
so the PR/works do not get clashes.

Add unittest to check for specific repo files

This repo should have the following list of files included:

• ./Docker or docker/Docker
• ./docker-compose.yml or ./docker/docker-compose.yml
• ./.env_sample
• ./.gitignore
• ./.travis.yml
• ./.codeclimate.yml
• ./CHANGELOG.md
• ./CODE_OF_CONDUCT.md
• ./CONTRIBUTING.md
• ./.github/ISSUE_TEMPLATE
• ./LICENSE.md
• ./.github/PULL_REQUEST_TEMPLATE
• ./README.md
• ./TROUBLESHOOTING.md
• ./USAGE.md
• ./USE_CASES.md

This PR is only asking for tests of the existence of these files, if the files do not exist when you run the tests - do not worry about the tests not passing. We will identify this and create a new PR for the issue.
Thank you!

Create a Use Cases Directory

Due to the success we have seen from hacktoberfest, we are seeing more people create use cases. This is amazing!
We want to make sure that everyone can find them. Please help us to break up this file and make it easier to read and manage:

• Create a Use Cases Directory
• Put a README.md in this directory
• Make a file in the new directory for each individual Use Case from USE_CASES.md, copy the content to this file
• For each file you've created, link to it from the README you created
• Organize the links in the README by type
• Make sure the names of the files you created are related to the Use Case
  Thank you!

Create a USE_CASES.md file

We want to show people how we would like them to use this repository. We had a contributor who provided a modification of the paste-templates/welcome.html email and created paste-templates/admin-created-account-welcome.html.

This is awesome! What we learned was that we want to have people add markedly different templates, if they add one to one of the design folders.

So, we have an idea because this provided a perfect use case for this repo!

Please do the following:

• Identify the differences in the content of the two emails (paste-templates/welcome.html vs paste-templates/admin-created-account-welcome.html)
• Create a USE_CASES.md file in the root of this repo with a section called "Using one of the Templates"
  • This section should explain that you can take an email template like welcome.html and modify the content for your specific email use case.
  • Use the examples of the changes, showing the before (from welcome) and after (from admin-created-account-welcome.html)

Thanks!

How to add (gt, lt, eq) condition in handlebarjs for sendgrid email?

Actual Behaviour

It returns The template you provided is invalid.

<!--{{#if (&gt; 1 2) }}-->
foo
<!--{{else}}-->
bar
<!--{{/if}}-->

Expected Behaviour

bar should be displayed

Steps to reproduce it

Use Sendgrid Email Design Editor and just add code block and try it.

email format is incorrect with dynamic templates

https://github.com/sendgrid/email-templates/tree/master/dynamic-templates/receipt

copied the above link's html and json in my sendgrid code editor, it worked fine.see below image for preview.

But in my mail account, i see email format is incorrect, that handlebar code is not executing, see the below image

please let me know how to resolve it.

Mismatch between html provided and JSON sendgrid wants

Actual Behaviour

Sendgrid API wants me to patch JSON wtf do I do with these HTML templates

Expected Behaviour

Documented way to create template on Sendgrid given this html

Steps to reproduce it

why bother

LogCat for the issue

Screenshots of the issue

Would you like to work on the issue?

unfortunately I am dealing with your dev-ops unfriendly api

Write a use case for creating a new template

Add a section to USE_CASE.md called "Creating a new template"

Should include:

• New templates should be structurally different
• The language in the template should be placeholder language (see the current templates in Paste templates)
• The styles should match the emails in the theme directory
• Please add the email template to the paste-templates directory (if you're feeling awesome, add the template in the other theme directories and update it for those themes)

Create a PULL_REQUEST_TEMPLATE

Issue Summary

We would like to have a template for describing what has changed in the pull request being submitted.

Github docs on this

You can use this file as an example

Add a .codeclimate.yml file to this repo

It is possible to configure how CodeClimate looks at a repository.
These Docs explain how this is done. Please create an appropriate .codeclimate.yml for this repo. It should test the main language of the repo and run tests.

poolix

How to obtain the subject dynamically?

How to obtain the subject dynamically?

Math operations in Dynamic Email

Hi I'm very new to sendgrid's dynamic template and saw some samples that it is possible to use handlebars, my question is how do I do mathematical operations?

I have a list of Items that I need to add Quantity and Price to get the total price for each Item and I can't seem to find a way on how to do it. I saw some Helpers but I'm not sure how to actually implement and it where to put it.

Handlebars.registerHelper("multiply", function(a, b){
    return (a * b);
});

Add a table of contents, badges, and SG Logo to README

Follow the format from this README for TOC, SG Logo, and License file

The badges to add are here, but please modify for this repo specifically:

[![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE.txt)
[![Twitter Follow](https://img.shields.io/twitter/follow/sendgrid.svg?style=social&label=Follow)](https://twitter.com/sendgrid)
[![GitHub contributors](https://img.shields.io/github/contributors/sendgrid/sendgrid-python.svg)](https://github.com/sendgrid/sendgrid-python/graphs/contributors)

change the file name main page of template

May I send a PR to change the main page of the email templates.
welcome.html -> index.html

Drag and drop markup not rendering editable content

Actual Behaviour

I've created a template in code following the docs here: https://docs.sendgrid.com/ui/sending-email/editor#importing-custom-html-with-drag-and-drop-markup

According to the document I can create an email template in HTML but still let my colleagues use the Design Editor to fill in content.

I've done a simple test with a text module and set the inner content to [MODULE CONTENT] but there are a few issues when I try to create a Single Send with the Design Editor:

• All my body / global styles have been removed
• I don't see a text module, only one Code module

Expected Behaviour

When a user creates a Single-Send based on our template using the Design Editor they can can edit a placeholder for the text module and the email is already correctly styled.

Steps to reproduce it

There are 2 ways I have tried (expand for details)

First way follows the docs exactly

• Read https://docs.sendgrid.com/ui/sending-email/editor#importing-custom-html-with-drag-and-drop-markup
• Go to "Design Library"
• Click "Create Email Design"
• Select "Design Editor"
• Navigate to the "Build" tab in the left-hand navigation.
• Scroll down and select the "Advanced" drop-down menu.
• Expand the option titled Import Drag & Drop HTML.
• Click "Import". A window opens where you can paste in your own HTML.
• Paste in HTML based on docs https://gist.github.com/seanlail/ada397e421bdc58e51331c79916218f0
• click "Import"
• Click "Save"
• Go to Design Library
• "Preview" new template
• Click "Create Single Send"
• Select "Design Editor"

Second way with Code Editor

• Read https://docs.sendgrid.com/ui/sending-email/editor#importing-custom-html-with-drag-and-drop-markup
• Go to "Design Library"
• Click "Create Email Design"
• Select "Code Editor"
• Paste in HTML based on docs https://gist.github.com/seanlail/ada397e421bdc58e51331c79916218f0
• Click "Save"
• Go to Design Library
• "Preview" new template
• Click "Create Single Send"
• Select "Design Editor"

Screenshots of the issue

Would you like to work on the issue?

I've contacted support directly but was told:
"We guide our customers who want to explore more alternatives and implementations through code to raise a question on our Github channel so our devs can assist."

What am I doing wrong?
Is the documentation for the Drag and Drop modules wrong / missing something?
How can I help?

Iterating through a list object - Handlebars

Actual Behaviour

After communicating with the SendGrid engineers we have settled on a format / structure for our JSON payload and so far we have been able to reference values / properties using Handlebars syntax for our Dynamic templates. However, we now have to include properties that can be a list of values and the Handlebar syntax being used is unable to evaluate at run time

Expected Behaviour

The Dynamic template should be able to display the values within the list array

Steps to reproduce it

JSON file is structured as so:

{
"personalizations":[
{
"subject":"Waive Fee",
"dynamic_template_data":{
"template_data":[
{
"insurance":[
{
"PolicyType":"Comprehensive",
"InsuranceProvider":"Blue Elephant",
"InsuranceFinanced":false,
"InsurancePremium":0.0,
"PolicyId":""
}
],
"pyNote":"",
"pyApproveStatus":"Decline",
"CaseID":"S-7160",
"waiveFeeList":[
{
"Comments":"This is a test",
"DueDateValue":"29/06/2017",
"InvoiceNumber":"0014593711",
"InvoiceAmount":3.25,
"Reason":"Goodwill"
}
],
"userDetails":{
"pyUserName":"mrinalini",
"pyFirstName":"James",
"pyUserIdentifier":"mdubey",
"pyPosition":"",
"pyEmailAddress":"",
"pyTelephone":""
},
"customer":{
"Brand":"GENERIC",
"PartyRole":"",
"CifNbr":"CUST-77472",
"FirstName":"Paul",
"FullName":"Paul Tabbiner",
"ShortName":"Paul Tabbiner",
"LastName":"Tabbiner",
"OnyxID":"75422643",
"CustomerType":"Individual"
}
}
]
},
"to":[
{
"email":"[email protected]",
"name":"Paul Tabbiner"
}
],
"custom_args":{
"sourceSystem":"PEGA CRM",
"correlationId":"3b3e1db9-65f7-42de-bc80-186a4566e40c"
}
}
],
"reply_to":{
"email":"[email protected]",
"name":"Test Account"
},
"from":{
"email":"[email protected]",
"name":"Test Account"
},
"template_id":"d-eecec6cea3f049178816d411b9bde1b3"

}

An example of the Handlebars syntax being used to dynamically populate a Dynamic template with the 'Comments' value (that doesn't work):

								<ol>
							{{#each template_data.waiveFeeList}}
							<p><li>{{Comments}}</li>
							
							{{/each}}
							</ol>   

Please let us know if you can work on it or the issue should be assigned to someone else.

I can work on this issue
ListTest_sendgrid.txt
WaiveFee_template.txt

Dynamic templates is beta functionality, and you may not have access.

Is it still beta?

Unable to get unsubscribes to work

Actual Behaviour

The unsubscribe links in the dynamic templates do not work despite passing the unsubscribe group id with web api call.

Expected Behaviour

Passing the Unsubscribe Group ID with the test data would have working unsubscribe and unsubscribe preferences buttons with dynamic templates.

Steps to reproduce it

1. Create a dynamic template with design editor or code editor
2. If code editor, use one of the dynamic templates in this github repo, if design editor add the unsubscribe module to email
3. Enter the test data and pass the unsubscribe group id in addition to other test data
4. Send test email

LogCat for the issue

NA

Screenshots of the issue

NA

Would you like to work on the issue?

No

Dynamic template data for multiple recipients

Actual Behaviour

Right now, I can only send dynamic template data for one recipient at a time. Example of my code:

{
"personalizations": [
{
"to": [
{
"email": "[email protected]",
"name": "John Doe"
}
],
"dynamic_template_data": {
"firstName": "John",
"lastName": "Doe"
},
"subject": "Hello, World!"
}
],
"from": {
"email": "[email protected]",
"name": "John Doe"
},
"reply_to": {
"email": "[email protected]",
"name": "John Doe"
},
"template_id": "<<YOUR_TEMPLATE_ID>>"
}

Expected Behaviour

I want to send dynamic template data for each recipient, but I don't know how. The idea is to send personalized e-mails for multiple recipients one at a time, instead of sending emails one by one. I tried to search for an example but I couldn't find it. Do you have any?

Create a Usage File in this repo and link to it from the README

Follow the format here

This file will be very basic and will have the information from the README

Please also link to this file from the README

Reference a single item in an array by position

Actual Behaviour

Json
`curl -X "POST" "https://api.sendgrid.com/v3/mail/send"
-H 'Authorization: Bearer <<YOUR_API_KEY>>'
-H 'Content-Type: application/json'
-d '{
"from":{
"email":"[email protected]"
},
"personalizations":[
{
"to":[
{
"email":"[email protected]"
}
],
"dynamic_template_data":{

        "recently_viewed_products":[
           {
              "title":"Yellow A-line Gown by Teeze me",
              "image":"https://qny.queenly.com/wardrobe_grid/wardrobe-1631372397543.jpg",
              "link":"https://queenly.com/featured/night-out-dresses"
           },
           {
              "title":"Dress",
              "image":"https://marketing-image-production.s3.amazonaws.com/uploads/8dda1131320a6d978b515cc04ed479df259a458d5d45d58b6b381cae0bf9588113e80ef912f69e8c4cc1ef1a0297e8eefdb7b270064cc046b79a44e21b811802.png",
              "link":"URL"
           },
           {
              "title":"Dress",
              "image":"https://marketing-image-production.s3.amazonaws.com/uploads/8dda1131320a6d978b515cc04ed479df259a458d5d45d58b6b381cae0bf9588113e80ef912f69e8c4cc1ef1a0297e8eefdb7b270064cc046b79a44e21b811802.png",
              "link":"URL"
           },
           {
              "title":"Dress",
              "image":"https://marketing-image-production.s3.amazonaws.com/uploads/8dda1131320a6d978b515cc04ed479df259a458d5d45d58b6b381cae0bf9588113e80ef912f69e8c4cc1ef1a0297e8eefdb7b270064cc046b79a44e21b811802.png",
              "link":"URL"
           },
           {
              "title":"Dress",
              "image":"https://marketing-image-production.s3.amazonaws.com/uploads/8dda1131320a6d978b515cc04ed479df259a458d5d45d58b6b381cae0bf9588113e80ef912f69e8c4cc1ef1a0297e8eefdb7b270064cc046b79a44e21b811802.png",
              "link":"URL"
           },
           {
              "title":"Dress",
              "image":"https://marketing-image-production.s3.amazonaws.com/uploads/8dda1131320a6d978b515cc04ed479df259a458d5d45d58b6b381cae0bf9588113e80ef912f69e8c4cc1ef1a0297e8eefdb7b270064cc046b79a44e21b811802.png",
              "link":"URL"
           }

        ]
      }
  }

],
"template_id":"d-c954edc39559465ba86fefbe2a10f357"
}'`

I'd like to reference just one of the items in my email by its position. Was trying to use
<img src="{{recently_viewed_prooducts.[0].image}}" alt="" width="250" height="330" border="0" style="display: block; max-width: 250px;"/>

However nothing is showing up

Expected Behaviour

Expected the first product in the arrays immage to show

Steps to reproduce it

Add steps to reproduce bugs or add information on the place where the feature should be implemented. Add links to a sample deployment or code.

Would you like to work on the issue?

I would like someone to help me on this issue

HTML lint is reporting weird errors

If you know what this is or how to fix it, please let us know!

I couldn't find bannedAttrs or for

[htmllint error in paste-templates/admin-created-account-welcome.html ] TypeError: bannedAttrs.forEach is not a function
[htmllint error in paste-templates/base.html ] TypeError: bannedAttrs.forEach is not a function
[htmllint error in paste-templates/digest.html ] TypeError: bannedAttrs.forEach is not a function
[htmllint error in paste-templates/email-confirmation.html ] TypeError: bannedAttrs.forEach is not a function
[htmllint error in paste-templates/password-reset_design_editor.html ] TypeError: bannedAttrs.forEach is not a function
[htmllint error in paste-templates/password-reset.html ] TypeError: bannedAttrs.forEach is not a function
[htmllint error in paste-templates/receipt.html ] TypeError: bannedAttrs.forEach is not a function
[htmllint error in paste-templates/welcome.html ] TypeError: bannedAttrs.forEach is not a function

Receipt Rendering on Outlook for iOS

Actual Behaviour

Outlook for iOS is causing my receipt table to stagger.

Expected Behaviour

Steps to reproduce it

Open the example template in Outlook for iOS

Notes

This only happens when the line item content is wrapped in a div. Moving the center style to the td and removing the div fixes this issue and appears to still render correctly according to Litmus.

https://github.com/sendgrid/email-templates/blob/master/dynamic-templates/receipt/receipt.html#L183

It appears that Outlook for iOS runs javascript (outlook-ios.js) that tries to find "out of bound elements" and scale them with explicit widths.

readme link to documentation is busted

Actual Behaviour

404

Expected Behaviour

200

Steps to reproduce it

Click link to dynamic templates

LogCat for the issue

Provide logs for the crash here

Screenshots of the issue

Would you like to work on the issue?

No

Please let us know if you can work on it or the issue should be assigned to someone else.

Make current email templates compatible with SendGrid's Design Editor

Refactor one or more of the available email templates to use the modules from our documentation, so that importing the template as a design editor template will work.

You can test this by importing the template in the SendGrid UI.

When you create the new version, do it in a file using the original file name + "_design-editor" e.g: "forgot-password_design-editor.html"

Hacktoberfest: SendGrid Current Status

Update 11/1/2017

We still have a couple hundred PRs to even open and scan at this point, across all our repos. We are working on a solution to giving access to the swag form and will update this issue, tagging each person and sharing a link.

As of right now, if your PR has not been merged - then you will not be able to get swag...YET. Please hang in there, we will have an update soon.

Thank you for being awesome, more great things and information to come!

• Matt Bernier, Developer Experience Product Manager

SendGrid DX team current status:

• Wow
• OMG
• THANK YOU

Hacktoberfest 2017 has completely blown us away. We have had over 900 pull requests from over 300 contributors all in the last 30 days. That is more PRs than we normally get in 2 years!
We are actively working to review, comment, and/or merge as many PRs as we possibly can as quickly as we can.

We are currently working on “intaking” all the PRs that have come in, oldest first (we have about 400 remaining to go through). We are making sure that each PR we review is one we have a chance of merging - there have been a couple spammy items that came through. Due to the massive influx of requests so far, @thinkingserious and @mbernier have been working nights and weekends all month just to keep up! We’re not even mad, this is amazing!

Hey, that’s great for you - but what about my shirt!

If you have signed the CLA before 11/1, but haven’t had a PR merged yet, do not despair! We know we are behind on even just commenting on every PR to show you that we received it (something we typically do). If you submitted a mergeable (non-spam, actually adds value to the project) PR during October 2017, we will grant access to this page to redeem your shirt, sticker, and hacker pin. Next year, we will be sure to communicate this information sooner. We are sorry for any confusion we have caused. We appreciate those of you who have reached out to find out what’s going on!

What can I do to help move things along?

Have you signed the CLA yet?
We can only merge items from contributors who signed the CLA

Can you help another contributor?
If you can identify potential problems, add suggestions, or even leave a comment with your review of another PR (Looks good to me! Or I approve this change), that would help us review those PRs much faster, making it easier to get to your PR.

Do you even write tests, friend?
If you see a place where we could have a test to validate a piece of functionality, add it in. We know We know! It’s just another PR we have to review and merge. You’re right, it is! However, the more tests we have, the earlier our CI tool can catch issues, saving us a review as well as back and forth time.

@8601302516, @anshuman73, @dhoeric, @krischoi07, @lmm3, @sevfitz

Update the license file to have the correct date range

This license file might have the wrong end year (2017). If this is the case, please make a PR that updates the year. If the year is correct, please close this issue!

Add Code Review to Contributing.md

• Add a "Code Reviews" section on CONTRIBUTING.md
• Put the following under the header:

If you can, please look at open PRs and review them. Give feedback and help us merge these PRs much faster! If you don't know how, Github has some great information on how to review a Pull Request.

• Link the header in the Contributing.md Table of Contents
• Add a link to the README.md file: Review Pull Requests under "Contributing Section"

Create a use case in the USE_CASES.md file for making new themes on templates

Add a section to the USE_CASES file called "Making a new template theme"

This should explain how to take a current template and apply new themes to it, as well as adding the new folder. Please include the following:

• Make a copy of the paste-templates directory, named after your new theme

cp paste-templates my-new-theme-templates

• Apply your changes to the CSS of these templates
• Change the name "Paste" in all the templates to the name of your theme
• Make a PR to this repo with the new files

Key to women

I think it's an opinion

Add a unittest to check the license.md file date range

The end year in the license file should be "this year" and this should be checked on every run of the tests. If the end year is no correct, fail the test.
example:

Copyright (c) 2012-2016 SendGrid, Inc.
It is 2017, so this should be:
Copyright (c) 2012-2017 SendGrid, Inc.
and the test should fail.
--done