Send a template email using sendgrid npm and wix code

Send a template email to a client using sendgrid npm and Wix code under 20 lines of code. https://salman2301.wixsite.com/npmsendgrid

Requirements

1. Sendgrid account

i) Sendgrid

Sign up for sendgrid account > select "transactional" option under "Templates"

Click on the "Create Template" button on top right.

Type the name, Click the "Save" button. Click "Add version" select "Design Editor" and Select "Continue"

Design the email using Drag and Drop options

To create a variable you need to use two open and close brackets

{{name}}

One of helpful thing is we can test the email using test Data. To do this goto Preview mode in the email editor then click on the "Show Test Data"

Copy the template id under "Transactional Template"

Get the API KEY on setting > API Keys Click on the Create API Key and get the KEY

ii) Wix code

Create a form. (No code required) Check this video how to create a form submission using dataset in Wix code

I have created a Database "form" which then i am going to use ""hook" hook - hook will trigger the backend code based on the changes in the Database like insert, update, etc.

To create a hook select the Database the on the top right select "Add hook" then add "After Insert" So, everytime if the data is inserted in the DB the code will be triggered on the "event.js" backend code

Before adding the code in the backend Install the Npm Click on the plus icon on the backend side bar and select "Install Node Package" And search and install "@sendgrid/mail" npm To know more about the npm click here

Open the "event.js" backend now and paste the code

import sgMail  from '@sendgrid/mail';

export function Form_afterInsert(item, context) {
sgMail.setApiKey('<API KEY>')
const msg = {
  to: item.email,
 from: 'salmanhammed77@gmail.com',
  templateId: '<TEMPLATE ID>',
  dynamic_template_data: {
    name: item.title,
    email: item.email,
    detail: item.detail,
  },
};
sgMail.send(msg);
}

Replace the <API KEY> , <TEMPLATE ID> and the variable on the dynamic_template_data Test the live site