Example: Send email with the SendGrid NPM interface.

@yisrael-wix I had changed the code back to calling the v2 api. changing it back to the NPM page code now.

but nothing showing in sendgrid and no email delivered…

@stewart I try the Test page but I get an error:


It seems that you’ve deleted a database collection. We’re happy to help out when needed, but you will first need to make sure that things are OK on your side. We can’t do much when code has obvious errors.

@yisrael-wix its on the home page not the test page

@stewart Your Sendgrid email request is invalid. I tried this on your HOME page using a valid email address and this is what I get:


You will need to provide the required information to the sendGrid NPM library. Wix provides support for Sendgrid by allowing REST and NPM interfaces, but it is not part of the Wix product. If you are having difficulties with the interface, then you should refer your questions to Sendgrid .

understood - thank you for your assistance.

I hope you work this out. I would recommend sticking very close to the original tested example and then make small changes till you get what you want. We’re always happy to help out - as long as we understand the subject matter. :smiling_face:

@yisrael-wix ok so I have stared again and got this working and it sends me the template correctly, but I have to specify the email recipient in the to: line rather than it being taken from the form input field. What is the code I am missing so that it can be a variable taken from the form field instead of being hard coded?

@stewart You are calling the sendEmail() function with the name and not the email address. This is your code:

    sendEmail(
            $w("#nameinput").value,
            $w("#emailinput").value)

However, the first parameter should be the To: email address (recipient), and the second parameter is the From: email address (sender). I your code you are passing the recipient’s name and not the email address to the sendEmail() function.

I hope this helps,

Yisrael

Perfect. Thank you for your patience, Yisrael - all working now.

No problem. Glad it worked out and happy to help.

Hey @yisrael-wix

How can I send the response to the frontend when using the npm. do i need to use something like axios?

I have been trying to do return but it doesn’t work.

How can I send on a set date?

I’m confused now haha. I think I have had every method for sending emails on my site (form - wix form - sendgrid) - . The issue I had before was I could not format it or give it a styled email response just basic text (Code below). I used Sendgrid API as this was the only method for my needs at the time. We now have Nodes and NPMs which rocks but has made me redesign accordingly. This is what was prepared before and I wish to now add a triggered email/ convert to the new NPM module

import { sendEmail, sendEmailWithRecipient } from 'backend/email';
$w.onReady(function () {
$w("#dataset1").onAfterSave(sendFormData);
});
function sendFormData() {
const subject = `AIO Request ${$w("#opt1").value}`;
const body = `Dear ${$w("#in1").value }
\r
\rThank you for showing interest in our All-In-One computing solution.
\rWe have received your request and will be contacted shortly.
\r
\
\rHere is a summary of your request:
\r
\rEmail Address: ${$w("#in2").value}
\rCompany: ${$w("#in3").value}
\rModel: ${$w("#opt1").value}
\rSize: ${$w("#opt2").value}
\rProcessor: ${$w("#opt3").value}
\rSystem Memory: ${$w("#opt4").value}
\rIsolation: ${$w("#opt5").value}
\rCable Accesory: ${$w("#opt6").value}
\rQTY: ${$w("#qty").value}
\r
\r
\rContact request -${$w("#mp1").value}
\rSubscribed - ${$w("#mp2").value}
\
\
\rKind Regards
\n
\rBytec Healthcare
\n
\rwww.bytechealth.com `;
const recipient = $w("#in2").value;
sendEmailWithRecipient(subject, body, recipient)
.then(response => console.log(response));
sendEmail(subject, body)
.then(response => console.log(response));
}
import { multiply } from 'backend/aModule';
$w.onReady(function () {
multiply(4, 5).then(product => {
console.log(product);
// Logs: 20
})
.catch(error => {
console.log(error);
});
});
export function subemail_change(event, $w) {
if($w("#subemail").checked===true){
$w("#mp2").enable()
$w('#hide').hide();
}
if($w("#subemail").checked===false){
$w("#mp2").disable()
$w('#hide').show();
}
}

I am getting worried to the amount of code I am using since I also have a filter function in the custom form & section which enables whens a product type is selected. Is there a better way to do all of this?

import wixData from 'wix-data';
$w.onReady(function () {
SELECTOR1();
uniqueDropDownAIO();

});
export function options_change(event) {
switch ($w('#options').value) {
case "Mobile Carts & Stands":
$w('#opt1').expand();
$w('#opt2').collapse()
$w('#opt3').collapse()
break;
case "Mounting Solutions":
$w('#opt2').expand();
$w('#opt1').collapse()
$w('#opt3').collapse()
break;
case "All-In-One PCs":
$w('#opt3').expand();
$w('#opt2').collapse()
$w('#opt1').collapse()
break;
default:
// otherwise
}
}
function SELECTOR1() {
wixData.query("Form-Product-Options")
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#FILTER1").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.ProductType);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return { label: curr, value: curr };
});
}
}
/////////////////// 2
export function FILTER1_change(event, $w) {
SELECTOR2();
$w("#FILTER2").enable();
}
function SELECTOR2() {
wixData.query("Form-Product-Options")
.contains("ProductType", $w("#FILTER1").value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#FILTER2").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.heightType);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return { label: curr, value: curr };
});
}
}
///////////3rdfilter//////////////////
export function FILTER2_change(event, $w) {
SELECTOR3();
$w("#FILTER3").enable();
}
function SELECTOR3() {
wixData.query("Form-Product-Options")
.contains("ProductType", $w("#FILTER1").value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#FILTER3").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.mountOptions);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return { label: curr, value: curr };
});
}
}
///////////////////////////////////////////////// 4
export function FILTER3_change(event, $w) {
SELECTOR4();
$w("#FILTER4").enable();
}
function SELECTOR4() {
wixData.query("Form-Product-Options")
.contains("ProductType", $w("#FILTER1").value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#FILTER4").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.powerOptions);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return { label: curr, value: curr };
});
}
}
////////////////////////////AIO DROP LIST//////// Independant from filter.
function uniqueDropDownAIO() {
wixData.query("AIO-Options")
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#dropdown7").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.aioOptions);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return { label: curr, value: curr };
});
}
}
export function aio_change(event,$w) {
}

Also is there a way to include the previous page URL they were on before submitting the form?

Update: I have installed the NPMs now working with the new code.


but I am slightly confused about what to follow, as mentioned in the post above I want to add the triggered email to this? https://support.wix.com/en/article/corvid-tutorial-sending-an-email-on-form-submission I follow this. there seems to be a different set of circumstances, members / from contact / from form. Also 2 different modules sendgrid client/mail - I previously had just the backend functions email.jsw & sendgrid.js. I really just need a clean update and remove any old methods, they are getting all mixed up, so

Any recommendation on the best method ?

Sorry back again :frowning: haha. In the :
function sendFormData() {
Can you add a IF statement within this ?
I have 3 container boxes which gets enabled when selecting the product type it then provides the user with more user inputs for that product.

I want the Sendgrid function to NOT include sections where its not needed.
Though are if I can state if the Box is enabled or not to include it or else remain as it is.

I have published the page I am working on so that you can dive in.
my orginal sendgrid: https://www.bytechealth.com/23-8-rheda-pro-240p-medical-aio you can test the form just add in comment WIX to see the responce and why I want a formatted email.

my main form: https://www.bytechealth.com/where-to-buy

the one I am working on now: https://www.bytechealth.com/where-2-buy
still working on it. Plus due to the collapsed box I am has spacing issues,:frowning:
I should have not re-adjusted the page size :confused: now I am left with the site thinking the page is bigger when half is collapsed.

Hello, I am a bit stuck with sendgrid / wix when trying to send 2 separate emails upon database record update.
When the lab personnel updates the record and chooses to inform the doctor, it sends an email.
This works, but I want to add a second email trigger when the doctor wants to notify the lab of a certain study he wants them to perform.
I can only have 1 "after_update" event

export function hcgenetica_afterUpdate(item, context) {
 if  (item.informaGenetista === 'SI')
            sgMail.setApiKey('SG.fii-L5gSQ6uUzN7wX8z2dFRw');
 const msg = {
              to: item.genetista,
 from: 'coordinacion@genos.com.ar',
              templateId: 'd-5ae034e07bfc46da9068304e84e23044wasfsf'   dynamic_template_data: {
                etc etc
                
IDEALLY I WOULD LIKE TO ADD ANOTHER ENTRY HERE LIKE THIS:

else if  (item.informaLAB === 'SI')   +>> send the sencond email template         sgMail.setApiKey('SG.fii-L5gSQ6uUzN7wX8z2dFRw');
const msg = {              
to: item.labcontact
,from: 'coordinacion@genos.com.ar',              
templateId: 'd-5ae034e07bfc46d342347assfd',

Any thoughts?

I was working on the same code and used the test example but faced these errors.
Example: https://www.wix.com/code-examples/sendgrid-npm-vw
(used my own key)