Substitutions not functional when using SendGrid in conjunction with Firebase functions

I'm encountering difficulties when trying to include substitutions data in emails sent from Sendgrid using Firebase Cloud Functions.

Here's my function

exports.firestoreEmail = functions.firestore
.document('users/{id}')
  .onCreate(snap => {
    const user = snap.data();
    const msg = {
      to: user.email,
      from: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e2b362f233e222b602d2123">[email protected]</a>',
      subject: `${user.firstName}, please Verify Your Email Address`,
      templateId: 'templateID',
      substitutionWrappers: ['{{', '}}'],
      substitutions: {
        firstName: user.firstName,
        email: user.email,
        id: user.id
      }
    };
    return sgMail
      .send(msg)
      .then(() => console.log('email sent!'))
      .catch(err => console.log(err));
  });

and the transactional template for the templateId is

<html>
  <head></head>
  <body>{{firstName}} - {{email}} - {{id}}</body>
</html>

This results in an email being sent to the user.email as planned, but with empty spaces where the substitutions data should appear.

In line with the documentation and use cases provided here, I've also attempted to include

sgMail.setSubstitutionWrappers('{{', '}}');

to globally set the substitutionWrappers. However, it still doesn't seem to work.

I've also used console.log(user) which displays the data intended for the substitutions in the console.

What am I overlooking? The data is accessible, the email format is correct, and the function closely aligns with the examples provided by SendGrid.

Answer №1

After spending numerous hours, I finally cracked the code by understanding that substitutions and substitutionWrappers are meant for Legacy Transactional Templates.

For the v3 API, it's recommended to use dynamic_template_data instead of substitutions, with the handlebars {{ }} acting as the substitutionWrappers.

  dynamic_template_data: {
    firstName: user.firstName,
    email: user.email,
    id: user.id
  }

Lesson learned - always thoroughly read the documentation next time... well, most likely.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing grease/tampermonkey (or any other browser extension) to filter out specific characters within webpage elements

Forgive me if my language is not accurate, as I am still learning about programming. The forum that I visit has cluttered the page with unnecessary and glitchy images and text for a promotion. This has made the forum difficult to navigate. I was successful ...

How can I display the value of a radio button that has been chosen?

Would you mind sharing how to display the selected value of a radio button? I attempted it this way, but unfortunately, it did not work. You can view my code at this link. <mat-radio-group [(ngModel)]="favoriteName"> <mat-radio-button *ngFor="l ...

Dynamic image loading in React with custom properties

I'm facing an issue while trying to display an image using the source stored in this.props.src. The correct name of the image file I want to load, "koolImg", is being output by this.props.src. I have imported the file using: import koolImg from ' ...

JavaScript example: Defining a variable using bitwise OR operator for encoding purposes

Today I came across some JavaScript code that involves bitwise operations, but my knowledge on the topic is limited. Despite searching online for explanations, I'm still unable to grasp the concept. Can someone provide insight into the following code ...

Registering components globally in Vue using the <script> tag allows for seamless integration

I'm currently diving into Vue and am interested in incorporating vue-tabs into my project. The guidelines for globally "installing" it are as follows: //in your app.js or a similar file // import Vue from 'vue'; // Already available imp ...

Ways to ensure Vue retrieves data from the database whenever a specific event occurs

I have individual buttons next to each row, with unique data entries in the database. When clicking on a button, I want specific information to appear in a Bootstrap Modal. However, I am facing challenges ensuring that Vue updates correctly with each click ...

Sending data between two elements when a jQuery event is triggered

As a JavaScript beginner, I am facing an issue where I need to push data from an h1 tag to a textarea. My website is built using WooCommerce and when a visitor clicks on a product, a chat box with the product title opens. Currently, I have successfully p ...

Experiencing Excessive Recursion While Dynamically Attaching Click Event Listener With Post Method to a Div Element

I'm encountering 'too much recursion' errors when trying to dynamically add a click handler to specific div tags with the class name 'reportLink'. Despite successfully logging the innerText of the divs, the code fails when attempti ...

Stable and persistent popup window that remains at the forefront in a Chrome extension

Currently developing a Google Chrome extension and seeking assistance in creating a popup window that remains fixed in one corner while staying on top of all other windows. Here is a reference image for clarification: https://i.stack.imgur.com/IPw7N.jpg ...

Guide to utilizing a script variable within a Kendo DataSource

i am working on a project that involves a dropdown and tree view functionality with drag and drop feature. @Html.DropDownListFor(model => model.xyz, Model.xyzlist, new { id = "dropdownid" }) my current task is to trigger a controller action method when th ...

encountering an issue with the react hook useHistory leading to an error

I recently encountered an issue while implementing useHistory() in my code. Previously, I had used it without any errors, but now I'm getting the following error in this component: Line 6:18: React Hook "useHistory" is called in function "showPost" ...

The minimum and maximum limits of the Ionic datepicker do not function properly when selecting the month and day

Recently, I have been experimenting with the Ionic 2 datepicker. While the datepicker itself works perfectly fine, I've run into some issues when trying to set the min and max properties. <ion-datetime displayFormat="DD-MM-YYYY" [min]="event.date ...

Displaying the votes through an advanced system called Ajax voting system

I've encountered a challenge while using an ajax voting system in my project. The issue is that I'm utilizing a div with an id to showcase the votes, but whenever someone clicks on vote up or down in any of the posts (which are generated through ...

Setting up angular-cli project for rc5- Step by step guide

Trying to integrate angular-cli with angular 2 rc5 but facing challenges: The issue of 'Promise' not being found After attempting to install 'npm install -g angular-cli@webpack', typings did not get installed, resulting in WebStorm un ...

Sending a series of filtered GET requests to my Express backend in a MERN (MongoDB, Express, React,

I have developed a MERN web application and am in the process of adding some GET methods to retrieve the same item for different scenarios. However, when I attempt to implement a second filter method and pass an existing parameter in my item schema, Postma ...

When using nodejs with sqlite3, the first callback parameter returns the class instance. How can this be resolved in order to prevent any issues?

Exploring a TypeScript class: class Log { public id: number; public text: string; construct(text: string){ this.text = text; } save(){ db.run( `insert into logs(text) values (?) `, this.text, ...

MongoDB Client > Error: No operations provided - cannot proceed

NPM Library: "mongodb": "3.1.4" Encountering an issue while attempting to bulk insert a list of data: Here is the code snippet: db.collection('products').insertManyAsync(products, {ordered: false}) The error message displayed: An Invalid O ...

Check Image Dimensions prior to Image Loading

I've been working with JQuery Masonry and would like to incorporate Lazy Load using a WordPress plugin to load images only when they come into view. The issue I'm facing is that when Lazy Load is used, the masonry elements don't recognize t ...

Issue [ERR_MODULE_NOT_FOUND]: The module 'buildapp' could not be located within buildserver.js

I am currently working on a node project using typescript. The project's structure is organized in the following way: --src |-- server.ts |-- app.ts --build |-- server.js |-- app.js In server.ts: import { app } from &q ...

Ways to safeguard NextJS Route Handlers from unauthorized access beyond my website

While using the NextJS 14 App Router, I noticed that my Route Handlers for APIs were accessible to my friend via Postman from his PC. This was unexpected as I assumed they were protected by default due to the same-origin policy headers in NextJS. However, ...