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

1/6

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.

Please complete all required fields.
No comments. Be the first to leave a comment.

Please could you also show an example of sending a SendGrid Template where the template's body text may contain a couple of substitutions (ie firstName / lastName) etc??

Tony

Jun 29, 2019

1

Hi Tony,

You can customize your email body in this section.

The example below substitutes "name" for "firstName" and "lastName". Hope this helps!

// Customize Your Email //

function sendFormData() {

const subject = `Your Email Subject ${$w("#EventName").value}`;

const body = `<font size="3" color="red">

Hi ${$w("#firstName").value} ${$w("#lastName").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));
}

Andrew (Vorbly)

Jul 01, 2019

2

Thanks Andrew for taking the time to show a good example,
Yes, I could do that, but I was thinking more like setting up the body text (with rich formatting etc) within the SendGrid template designer, and including variable placeholders (handlebars) in the template. Then using the API to pass only the variables to the template (not the whole body text).
I have now worked out how to do it.
Firstly, the placeholders in the template must be double brackets, ie {{myVariable}} and
secondly the variables in the API data must be placed inside the "dynamic_template_data" clause of the mail body, which itself must be placed inside the "personalizations" clause.
It failed to work, because I had not placed it inside the personalizations clause.
Example:
const MyBody = {
"personalizations": [{
"to": [{
"email": recipient
}],
"dynamic_template_data": {
"firstName": name,
"paid": paid,
"amount": amount,
"ref": ref
},
}],
"from": {
"email": sender
},
"subject": subject,

"content": [{
"type": "text/html",
"value": body,
}],
"template_id": "your_sendGrid_template_id_goes_here",

};

Hope this is of help to other newbies ;-)

Tony

Jul 03, 2019

3

Thanks Tony for sharing your solution on customizing and sending a SendGrid Template!

Andrew (Vorbly)

Jul 05, 2019

0

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP

CONTACT US