Sendgrid v3 Nodejs substitutions in templates not working

[vinvantest]

Hi,

In sendgrid nodejs npm package I encountered an issue. I am able to send emails with substitutions and template but the issue is in email at client end the %name%, %company% etc. substitutions do not get replaced with the value.

Code snippet
const sgMail = require('@sendgrid/mail');
sgMail.setApiKey(sendgrid_key);
var msg =
{
"personalizations": [{
"to": [{
"email": "your_email@gmail.com",
"name": "Some Company"
}],
"substitutions": {
"%name%": "John",
"%company%": "Some Company",
"%business%": "Faster Pheny"
},
"subject": "Invoice For Some Company!"
}],
"from": {
"email": "CompanyA customerservice@companya.com",
"name": "CompanyA"
},
"reply_to": {
"email": "customerservice@companya.com",
"name": "Customer Service"
},
"subject": "Invoice For Some Company!",
"template_id": "93f052da-08d4-46f2-8f0c-f2a193bceea0"
};

sgMail
.send(msg)
.then(() => {
console.log('SendGrid :: Response after sending email successfully !');
})
.catch(error => {
console.error('Error SendGrid ::: ' + error.toString());
});

Code gets executed and receive email without substitutions for %name%, %business%, %company%

---

Now I tried using sengrid website https://sendgrid.com/docs/API_Reference/api_v3.html
It sends email perfect without any issues and all substitutions are made correctly.

What is wrong in the javascript npm code that I am using to set the values in sgMail.send(msg)?

Request your help.

[jfuenmayor96]

It seems like you're missing the substitution wrappers. I just used the example that they used in this use case with a simple template, and it works.

const sgMail = require('@sendgrid/mail');
sgMail.setApiKey(process.env.SENDGRID_API_KEY);
sgMail.setSubstitutionWrappers('{{', '}}'); // Configure the substitution tag wrappers globally
const msg = {
  to: 'john@example.com',
  from: 'noreply@example.com',
  subject: 'Hello world',
  text: 'Notification',
  html: '<p></p>',
  templateId: 'your-id-goes-here',
  substitutions: {
    name: 'John'
  },

};
sgMail.send(msg);

My template consists only of this snippet of code:

<%body%> {{name}}

Apparently, the <%body%> part is mandatory.

Maybe you can try setting your wrappers to something like {{, }}, or something else (or %, % in your case), also, notice that the example doesn't include the wrappers in the substitution object, just the name of the substitution.

Try with something like this:

"substitutions": {
  name: "John",
  company: "Some Company",
  business: "Faster Pheny"
},

[vinvantest]

Fantastic. It worked. Thanks a ton. Substitution Wrapper is what was missing.

[vinvantest]

Thanks for the full answer. Happy coding!

[thinkingserious]

@adamreisnz,

Perhaps we should call sgMail.setSubstitutionWrappers('{{', '}}'); by default to avoid this sort of issue in the future. What do you think?

[adamreisnz]

@thinkingserious We do precisely that though; see https://github.com/sendgrid/sendgrid-nodejs/blob/master/packages/mail/src/classes/mail-service.js#L21

[thinkingserious]

@adamreisnz,

Maybe we try to detect a few common wrappers, such as % or _?

[vinvantest]

That will be awesome. When the user through Sendgrid portal creates/designs the template the portal by default inserts substitution %body% and %name%. So naturally the user will think not to change the % character and will continue with the template as he is not fully aware of the functionality. If Sendgrid can suggest that % can be changed to any character or the feature prefers {{}} then the user will use it or the template that loads default settings replaces % with {{ in the first place. It will avoid the issue I faced.

[adamreisnz]

I am not to keen on automatic detection, unless it's a very robust algorithm. The trouble with trying to make the process too smart is that it can lead to potentially hard to debug errors. What if someone uses _ for emphasis? E.g. _really_ emphasized. That doesn't mean that the _ symbol is the substitution wrapper. Same with %, you could use it for percentages and it might trick the algorithm into thinking you're using it as a substitution wrapper where you're not.

Since Sendgrid is moving to handlebars templates, which uses {{ and }} as the substitution wrappers, I think this is a sensible default to have. There's a reason those characters are used as substitution wrappers in languages like handlebars, because they are not very common in normal language. The underscore and percentage are more common and thus potentially prone to misinterpretation.

I think it's just a matter of documenting this well to make it clear. With the option of specifying your own wrapper, the user should have everything they need to make it work.

If anyone does have an idea for robust automatic detection I'd love to see a pseudo algorithm that can handle all scenario's and all possible wrappers well, while avoiding false positives.

Thoughts?

[vinvantest]

Agree. Documentation updates will be the best option.

[thinkingserious]

@adamreisnz @vinvantest agreed, please see #681 for progress.

[goelmk]

Sendgrid v3 requires to replace substitutions with dynamic_template_data something like this:

const msg = {
    to: email,
    from: 'sender@company.com',
    subject: 'Sample Email Subject',
    templateId: 'your_template_id_here,
    substitutionWrappers: ['{{', '}}'],
    dynamic_template_data: {
      "data_item": "value" 
    }
   };

[thinkingserious]

@goelmk,

Here is a full example. Thanks!

With Best Regards,

Elmer

[alexdabast]

Very confusing that you have to use dynamic_template_data
It would be nice to update the documentation https://sendgrid.com/docs/API_Reference/api_v3.html

[shawnkoh]

I tried following @goelmk most recent example. Doesnt work for me :(
My template was built using your WYSIWYG editor and i tried putting {{ verifyUrl }} in both a text component and a button component's url link. neither works.

[frossi85]

@shawnkoh Did you solve it? I also created the template with the visual designer and substitution is not working.