Vorbly <Code>
CODING MADE EASY WITH VORBLY
WIX SENDGRID API V3 - AUTO EMAIL MESSAGES
Need an auto email notification for your forms? With the SendGrid API V3, you can personalize and schedule emails from your website. This tutorial will show you how to integrate SendGrid API V3 to your online forms using Wix Code. Customers will receive a 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: Same as SendGrid API V2 //
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 = "contactus@example.com"; // Sender email //
const recipient = "admin@example.com"; // 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 = "contactus@example.com"; // Sender email //
return sendWithService(key, sender, recipient, subject, body); // Customer email //
}
// Note: Same as SendGrid API V2 //
Back-End Code
// sendGrid.js //
import {fetch} from 'wix-fetch';
export function sendWithService(key, sender, recipient, subject, body, date) {
const url = "https://api.sendgrid.com/v3/mail/send";
const headers = {
"Authorization": "Bearer " + key,
"Content-Type": "application/json"
};
const data = {
"personalizations": [{
"to": [{
"email": recipient
}]
}],
"from": {
"email": sender
},
"subject": subject,
"content": [{
"type": "text/html",
"value": body
}]
};
return fetch(url, {
"method": "POST",
"headers": headers,
"body": JSON.stringify(data)
})
.then(response => response.text);
}
// Note: SendGrid API V3 - You can personalization your email messages in the "data" section //
// Refer to SendGrid API V3 Documentation for personalization options //
COMMENTS
I'm a paragraph. Click here to add your own text and edit me. It's easy.
