Hi Guys
This is a quick update from this awesome post by WiX(Velo Tutorial: Sending an Email on Form Submission | Help Center | Wix.com). It shows how to upgrade to SendGrid V3 (from V2) and how to incorporate your template.
Create 1st backend file(exactly the same as V2):
//email.jsw
import {sendInstruction} from 'backend/sendGrid';
export function sendEmail(subject, body, Recipient) {
const key = "xxxxxxxxxxYourAPIKeyHerexxxxxxx";
const sender = "senderEmailAddress";
return sendInstruction(APIKey, sender, Recipient, Subject, body);
}
Create the 2nd backend file(this one is quite different to the article). Note the addition of the template_id, this is where you will add your template ID that you retrieve after having created a transactional template in your SendGrid Account. Also note all the addition of âpersonalizationsâ, the change in overall structure and the massive amount of extra brackets, it seems they are actually neccesaryâŚ
//sendGrid.js
import {fetch} from 'wix-fetch';
export function SendInstruction(APIKey, Sender, RecipientEmail, Subject, body) {
const url = "https://api.sendgrid.com/v3/mail/send";
const MyHeaders = {
"Authorization": "Bearer " + APIKey,
"Content-Type": "application/json"
};
const MyBody = {
"personalizations": [{
"to": [{
"email": RecipientEmail
}]
}],
"from": {
"email": Sender
},
"subject": Subject,
"content": [{
"type": "text/html",
"value": body
}],
"template_id" : "xxxxxxxxYourTemplateIDHerexxxxxx"
};
return fetch(url, {
"method": "POST",
"headers": MyHeaders,
"body": JSON.stringify(MyBody)
})
.then(Response => Response.text);
}
Lastly, create you page code. This is also exactly the same as the article
import {sendEmail} from 'backend/email';
function SendClientEmail() {
const Subject = `New Submission from ${$w("#nameInput").value}`;
const body = `Name: ${$w("#nameInput").value}
\rEmail: ${$w("#emailInput").value}
\rSport: ${$w("#sportDropdown").value}
\rComments: ${$w("#commentsInput").value}`;
const RecipientEmail = `recipientEmailHere`;
sendEmail(Subject, body, RecipientEmail)
.then(response => console.log(response));
}
Thatâs it⌠Happy coding!
