Full Tutorial on how to use Velo to send a triggered email using Wix Code on your Wix Website. Find out how to use Velo code and Wix Elements to transfer data from your website to your visitor's email inbox with a good amount of code. Then stay tuned for in-depth knowledge about this trick and the code behind it.
Here is the helpful code to get you going! Let me know if you need any more assistance in the comments on YouTube or contact me at the bottom today!
📚 WHAT WAS COVERED:
00:00 CN Intro
01:09 Setup of Triggered Emails
04:30 Setup your Email in the Wix Email Editor
05:30 Add Variables to your customized email
08:50 Copy Trigger Code & the Email ID
10:00 Setup Elements of the Subscribe Form to add to your Wix Editor
12:40 Trigger Email Page Code Walk-through
17:10 Trigger Email Backend Code Walk-through
27:10 Preview Website & Perform Trigger Email
28:05 Review the email with the transferred data a.k.a. variables
29:06 Outro
Code Snippet to follow along with the video:
Page Code
This loads the page code. This code captures the input entered in the form and the submission button for the trigger to start.
import * as run from 'backend/dev/examples/flow.jsw'
$w.onReady(function () {
$w('#button2').onClick(async (event) => {
//Send trigger email
let email = $w('#input2').value;
if ($w('#input2').valid) {
let sendTrigger = await run.triggerEmail(email);
if (sendTrigger) {
$w('#statebox8').changeState("State2").then(() => {
$w('#input2').value = null;
$w('#input2').resetValidityIndication();
let timeout = setTimeout(() => {
$w('#statebox8').changeState("State1")
}, 15000)
$w('#button4, #button3').onClick(() => {
clearTimeout(timeout);
$w('#statebox8').changeState("State1");
})
})
} else {
//Put something to show visitor an error message
}
}
})
});
Backend Code
Use this code to connect to the backend javascript workbook.
import * as gtf from 'backend/dev/examples/getFlow.js';
export async function triggerEmail (email = "") {
return await gtf.default.sendEmail(email)
}
Once you do the javascript workbook filled out then create a javascript file. This code will set up the contact information for the email. Then send out the email to that contact id via the trigger email.
import wixData from 'wix-data';
import wixCrmBackend from 'wix-crm-backend';
const trigger = {
contact: {
get: async function (email = "") {
let contactInfo = {
emails: [{ tag: "MAIN", email: email, primary: true }]
}
return (await wixCrmBackend.contacts.appendOrCreateContact(contactInfo)).contactId || ""
},
emailContact: function (contactId = "", vars = {}) {
let options = { variables: vars };
console.log(contactId);
return wixCrmBackend.triggeredEmails.emailContact("T8SZ64G", contactId, options).then(() => {
return true
}).catch((err) => {
console.log(err, err.stack);
return false
})
}
},
sendEmail: async function (email = "") {
let contactId = await this.contact.get(email);
if (contactId.length > 0) {
let vars = {
name1: email.split(/@/g)[0], //This gets the left of the @ symbol in th email address
contact1: "contact@yourdomain.com",
link1: "https://bit.ly/creativelynino"
};
return await this.contact.emailContact(contactId, vars);
}
console.log("ContactId error");
return false
}
}
export default trigger;
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
📺 MY PLAYLISTS :
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
💻 WEBSITE
Check out more of the website. If you have a question, let's chat it up below! More information coming soon so stay tuned!
What would you like to see next?
Wix Bookings
Custom Subscription Process
You can vote for more than one answer.
