Example: Send email with the SendGrid REST interface.

Show and tell
,
1

#Example #Sendgrid #Email #WebModules #ServerSide #backend #3rdPartyServices #fetch

1083×773 73.9 KB

Demonstrates

In order to run this example in the editor, you will need a SendGrid account to supply your own SendGrid API key . Paste the key in the appropriate line in the sendGrid.js file.

The live demo of this example has an additional field for the your SendGrid API Key. To run the live demo , paste your API Key into the SendGrid API Key input field before clicking the Send Email button.

Links for this example

This example demonstrates how to send an email using the popular 3rd party email processing service SendGrid. We start by setting up a simple form with all of the fields necessary to send an email. When the user completes the form, the user clicks the Send button to request that the email be sent. The fields are checked for validity, and if everything is OK, a post request is sent to SendGrid using fetch(). A Lightbox opens to notify the user of the email’s transmission status (success or failure).

Sending an email using the SendGrid REST API involves using a backend web module and the wix-fetch API to call SendGrid. When clicking the Send Email button, the sendEmail web method (exported from the sendEmail web module, located in the Backend folder) is called. The sendEmail module uses the sendGrid module to perform the actual call to the SendGrid REST API via the wix-fetch HTTP API. ​Note that you can replace the SendGrid API with any other Email API by providing a replacement for the sendGrid.js file .

For more information, see the tutorial How to Send an Email on Form Submission

2 Likes
2

Thank you @yisrael-wix !!!

3

Hi Yisrael :slight_smile:

Is this a new method or an extension of the original SendGrid tutorial article?
Or is it the same one?

4

Hey Nayeli, how are you?

This example is pretty much based on the original SendGrid tutorial . A sequel is in the works. Stay tuned.

5

@yisrael-wix

Love it! I’ve ‘subscribed’ to your notifications :wink:

6

ישראל תודה על כל המדריכים.
אני מתקשה לחבר את זה. איזה סוג API אני אמור לבחור שם?

1471×692 44.4 KB

7

Hi Yisrael-

Is there anything else that needs to be set up behind the scenes to make this work that isn’t immediately obvious? I copied and pasted the backend files from the original tutorial and changed out the key. When I first started and tested, I was able to send 3 emails when I submitted the form without issue. Then, it stopped working. I reached out to sendgrid and they recommended that I setup sender authentication, which I did. They say everything looks good on their end. I’m still not having any luck. I’ve gone through the code line by line and don’t see anything (although that doesn’t mean I didn’t miss something). I’ll post the code below this. Just didn’t know if you’d encountered anything (a setting or permission or otherwise) with wix, sendgrid, or the email provider (g suite in my case) that needs to be accounted for.
Thanks.

// Filename: backend/email.jsw (web modules need to have a .jsw extension)

import {sendWithService} from “backend/sendGrid”;

//export function sendEmail(subject, body, recipient) {
export function sendEmail(subject, body) {
const key = “SG.xxxxxxxxxxxxxxxxxxxxxxxxxxx”;
const sender = “springsworx@gmail.com”;
const recipient = “springsworx@gmail.com”;
return sendWithService(key, sender, recipient, subject, body);
}

//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}&text=${body}’;

const request = {
“method”: “post”,
“headers”: headers,
“body”: data
};

return fetch(url, request)
.then(response => response.json());
}

//email test page
import wixLocation from “wix-location”;
import wixData from “wix-data”;
import {sendEmail} from “backend/email”;

$w.onReady( function () {
//TODO: write your page related code here…

});

function sendFormData() {
const subject = “Test”;
const body = “Thanks”;

//sendEmail(subject, body, address)
sendEmail(subject, body)
.then(response => console.log(response));
}

export function button1_click(event) {
//Add your code for this event here:

sendFormData();
}

8

If you load the Example template in your editor and insert your API key does it work?

9

@yisrael-wix

Our Sendgrid API was been working well for awhile. However, we recently ran into a problem with Outlook email addresses. It seems to be a domain authentication issue.

I tried to modify the CNAME records, but there are already records I guess that have been entered for the preexisting Wix email capabilities.

I created another thread here: https://www.wix.com/code/home/forum/community-discussion/sendgrid-domain-authentication-issues

Any thoughts?

Thanks!

10

hi @yisrael-wix I’m not sure if I’m going a little mad but when you log onto the demo it seems that the backend modules have changed back to .jsw & js instead of having the sendGrid node Module (which I’m sure it had yesterday!) Just incase you guys didn’t know

11

There are two different examples:

Send Email with SendGrid NPM Interface

Send an email using the SendGrid NPM library.

Send Email with SendGrid REST Interface

Send an email using the SendGrid REST API.

12

I knew it must have been my error, I couldn’t find the NPM, apologies!

13

@yisrael-wix This eventually helped me solve my issue with a variable sendGrid template to more than one address from data via a repeater! Thank you. Here is the link if it helps anyone else: https://www.wix.com/corvid/forum/community-discussion/new-sendgrid-node-module-send-email-to-more-than-one-address-with-variable-template-solved

14

Very helpful :slight_smile: