#Example #Sendgrid #Email #WebModules #ServerSide #backend #3rdPartyServices #PackageManager #ExternalCode #NPM
Demonstrates
Web modules - server-side (backend) code
Accessing 3rd Party Services (using backend function)
Calling Server-side Code from the Front-end with Web Modules
Required for this example
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 sendEmail.jsw 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
View the "Live" example in a browser page
Open the Example template in the Wix Editor
About this example
This example uses the SendGrid mail NodeJS package included in the Wix Package Manager to replace the sendGrid.js file in original SendGrid REST example. Using built-in code packages is easier and more convenient than having to write your own code.
As in the original example, 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, the backend sendMail() function calls the SendGrid NodeJS send() function to send the email. A Lightbox then opens to notify the user of the email’s transmission status (success or failure).
For more information, see the Wix Package Manager and the Sendgrid API documentation.
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)
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?
Sorry back again :( 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,:(
I should have not re-adjusted the page size :/ now I am left with the site thinking the page is bigger when half is collapsed.
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 ?
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?
How can I send on a set date?
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.
Perfect. Thank you for your patience, Yisrael - all working now.
understood - thank you for your assistance.
@Yisrael (Wix) Got the code implemented but it is not hitting sendgrid using this api. Here is the editor link for the site. Please can you have a look snd let me know where I am going wrong?
https://editor.wix.com/html/editor/web/renderer/edit/4fdb2332-b929-4779-8fee-017d110f3635?metaSiteId=1ff5245e-da0c-44a1-b71d-cde9a9b7f2dd&editorSessionId=2356ccca-42dd-4772-824d-9107bf5e44a1&referralInfo=dashboard
Parabéns pelo exemplo... bem simples. Sabe alguma coisa sobre Socket.IO?
Congratulations on the example ... very simple. Do you know anything about Socket.IO?
Epiccccc. Thanks Wix Team
Wow! That opens up a whole new world. I somehow missed the introduction of the PM. Was looking at the Google Calendar API, bu this is great. Good work.
PS the Gear Icon (in PM Doc) should be + sign.