Vorbly <Code>
CODING MADE EASY WITH VORBLY
WIX SENDGRID API - HTML EMAIL MESSAGES
Want to customize your email notifications? This tutorial will show you how to integrate SendGrid APIs into your online forms using Wix Code. Customers will receive a customized HTML email notification everytime they submit a order form or contact form. We will provide you with the webpage elements and sample codes required to implement this feature.
THE DEMO
THE ELEMENTS
The Page
Text Elements
-
Event Name ID: #EventName
-
Location ID: #location
User Inputs
-
Name: #name
-
Email: #email
-
No. of tickets: #quantity
-
Date: #datePicker1
-
Comments: #comments
Button Element
-
Submit Button: #submit
The Database
Create a database OrderForm (dataset1) with the same fields as your form.
Database fields
-
Name: name
-
Email: email
-
No. of tickets: quantity
-
Date: date
-
Comments: comments
SendGrid API Keys
Go to sendgrid.com and create your free account
-
Setup Guide > Integrate using our Web API or SMTP Relay
-
Select Web API > Java > Create Key
-
Generate API Key and save it
THE CODE
Page Code
import {sendEmail, sendEmailWithRecipient} from 'backend/email';
$w.onReady(function () {
$w("#dataset1").onAfterSave(sendFormData);
});
// Customize Your Email //
function sendFormData() {
const subject = `Your Email Subject ${$w("#EventName").value}`;
const body = `<font size="3" color="red">
Hi ${$w("#name").value},
<br/>Thank you for booking your tickets with us. Please refer to the details of your order below.
<br/>Event: ${$w("#EventName").text}
<br/>Location: ${$w("#location").text}
<br/>Date: ${$w("#datePicker1").value}
<br/>No. of tickets: ${$w("#quantity").value}
<br/>Please contact us at 123-123-1234 for enquiries. </font>`;
const recipient = $w("#email").value;
sendEmailWithRecipient(subject, body, recipient)
.then(response => console.log(response));
sendEmail(subject, body)
.then(response => console.log(response));
}
// Reference: HTML Rich Text Editor //
// Note: SendGrid API V3 is the latest version //
Back-End Code
// email.jsw //
import {sendWithService} from 'backend/sendGrid';
export function sendEmail(subject, body) {
const key = "YOUR_SENDGRID_API_KEY"; // Replace with your API key //
const sender = ""; // Sender email //
const recipient = ""; // Notification to yourself //
return sendWithService(key, sender, recipient, subject, body);
}
export function sendEmailWithRecipient(subject, body, recipient) {
const key = "YOUR_SENDGRID_API_KEY"; // Replace with your API key //
const sender = ""; // Sender email //
return sendWithService(key, sender, recipient, subject, body); // Customer email //
}
// Note: SendGrid API V3 is the latest version //
Back-End Code
// sendGrid.js //
import {fetch} from 'wix-fetch';
export function sendWithService(key, sender, recipient, subject, body) {
const url = "https://api.sendgrid.com/api/mail.send.json";
const headers = {
"Authorization": "Bearer " + key,
"Content-Type": "application/x-www-form-urlencoded"
};
const data = `from=${sender}&to=${recipient}&subject=${subject}&html=${body}`;
const request = {
"method": "post",
"headers": headers,
"body": data
};
return fetch(url, request)
.then(response => response.json());
}
// Note: SendGrid API V3 is the latest version //
COMMENTS
I'm a paragraph. Click here to add your own text and edit me. It's easy.