Sendgrid Emails with a bit more design

Ask the community
, , ,
1

I am using this Velo Tutorial: Sending an Email on Form Submission | Help Center | Wix.com
It works, but I would like to design nicer email than what is coded. It is visually bland and I am going to be using this to welcome members. Does anyone have any ideas?
Thanks for all the help!

2

elizabethjhay ,

please see the example in the above support article, it can be customised using backend code. many email providers also support templating of emails so using the code you just inject the specific data from the form to be further templated with your email design.

Shlomi

3

Shlomi,
I am confused by what you mean. I don’t see a design example. Can you be more specific as to the section of the article I should be looking at?

4

Elizabeth,

i didn’t mean you’ll find design templates in the above article. it was referring to the ability of the email provider, in this case:
const url = “https://api.sendgrid.com/api/mail.send.json”
to use the data sent by your website code and combine it with an email template you create with the email provider
for example here:
https://sendgrid.com/solutions/transactional-email-templates/

the website code allows you to send the email provider the form data in the way its api expects it

Shlomi

5

Thank you for the clarification. I’ll try it.

6

I keep working on this and to no avail. I modified the code to:

//email.jsw

import {sendWithService} from ‘backend/sendGrid’;

export function sendEmail(template_id) { “5597de4b-94b9-4cc2-9824-e89cf893ce04”;
const key = “API KEY”;
const sender = “MY EMAIL”;
const recipient = “MY EMAIL”;
return sendWithService(key, sender, recipient, template_id);
}

export function sendEmailWithRecipient(template_id) { “5597de4b-94b9-4cc2-9824-e89cf893ce04”;
const key = “API KEY”;
const sender = “MY EMAIL”;
return sendWithService(key, sender, template_id);
}

//sendGrid.js

import {
fetch
}
from ‘wix-fetch’;

export function sendWithService(key, sender, recipient, template_id) {
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}&template_id=${template_id}`; 

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

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

}

import {sendEmail, sendEmailWithRecipient} from ‘backend/email’;

$w.onReady(function () {
$w(“#approvaldata”).onAfterSave(sendFormData);
});

function sendFormData() {
const template_id = ‘5597de4b-94b9-4cc2-9824-e89cf893ce04’;
const recipient = $w(“#Email”).value;

sendEmailWithRecipient(template_id, recipient)
.then(response => console.log(response));

Maybe someone with more sendgrid experience can identify what I am doing wrong. Please note the most private info has been omitted in place of text starting with MY

7

Hi Elizabeth,

Please see my suggestions here, with another email provider but similar integration challenges:

Shlomi

8

Elizabeth, did you find a solution to your question? I am struggling with this myself.

9

I didn’t, but my client is fine with it. I tried to do a construct template line in the code that would reference a template id, but that did not work. I wish I had better news for you dbaxter. If anyone has Ideas that would be helpful because the proposed solution above is not as straight forward as Shalomi made it seem.

10

guys, did you try sending the request to https://requestb.in/ for debugging and then copy it from there, and use postman to invoke the sendgrid api, without the wix code context just to troubleshoot what you are missing?

shlomi

11

I tried to do the request bin. I had a trouble with it.

12

weren’t you able to follow this example? Velo Tutorial: Sending an Email on Form Submission | Help Center | Wix.com

13

The example works. I have been using it just fine. The request bin was hard to set up. I am not super familiar with it so I need more of a step by step.

14

Elizabeth,

i suggested the example as it also have a send grid integration. So were you able to connect eventually? Or do you still have a problem?
Request bin lets you create a fake api (bin) you can use in your code so you can actually see the request as it is received by sendgrid. Together with postman it should help you understand what you might be missing in your code. It has nothing to do with wix code, just a way i found helpful to troubleshoot integration with Api-s

15

Sholomi,
that wasn’t my issue. I am fine with the code. Everything works great. I was just trying to see if something could be done with the style the email has. It is very plain. I set up templates in send grid, but even using the template id construct did not adjust what came in email.

16

Elizabeth, Tal directed me here, which appears to be a simple solution: https://www.wix.com/code/home/forum/questions-answers/how-to-design-my-email-notification

17

thanks dbaxter! I play around with it this weekend.

18

Any solutions to call the template_id and how to use template when sending?

19

Take a look at this. I think this will be helpful