Velo Tutorial: Sending a Triggered Email to Members

Visit the Velo by Wix website to onboard and continue learning.

Triggered Emails allow you to create a template for emails that you can send to the currently logged-in site member, using code. Before sending the email, your code can inject information into the template to personalize it with any data that is available in your page code. In this article, we demonstrate how to use the code snippet generated by Triggered Emails to send an email to the currently logged-in site member on the submission of a form.

Although this article uses a form submission for demonstration purposes, you can send an email from anywhere in your code. The general idea is to paste the generated snippet into your code where you want the email to be sent. Then edit the snippet so that it uses the ID of the currently logged-in member and the values you want to insert for the variable placeholders.

Note: For a more general-purpose article on sending an email using a 3rd party email service, see How to Send an Email on Form Submission.

Prerequisites

This article assumes you are familiar with creating an input form. In this example we'll assume you've created and published the following Triggered Email. You will also need a way for members to log into your site.

Notice that the email template contains the following variables:

  • name
  • sport
  • comments

It is good practice to give your email template a meaningful name. Doing so makes it easier to work with in code. In this example, we call our email sportMail.

To create a Triggered Email for Contacts, select the Email Site Members tab. 

The code snippet generated by the email looks like this:

Copy
1
import {triggeredEmails } from 'wix-crm-frontend';
2
3
// ...
4
5
const options = {
6
variables: {
7
name: <enter-value-here>,
8
sport: <enter-value-here>,
9
comments: <enter-value-here>
10
}
11
}
12
triggeredEmails.emailContact('sportMail', <contactID>, options);

The ID of the Triggered Email ("sportMail") and the names of all the variables it contains (name, sport, and comments) are reflected in the code snippet.

Form

Next, we create an input form with a submit button. You can use an existing form or create a new one. Either way, this is a regular input form without any special setup. Each input element is connected to a field in a dataset and a button is connected to the same dataset with the Submit action. 

In this example, we use a simple form with the following input elements:

TypeIDUsage
InputnameInputFor entering a name
DropdownsportDropdownFor entering a preferred sport
Text BoxcommentsInputFor entering comments
ButtonsubmitButtonFor submitting the data
DatasetsportDatasetFor connecting the elements

Code

Finally, we write the code to send the Triggered Email described above when the form is successfully submitted. The code will send the values from the form to be used in place of the variables in the email template. 

Note: Triggered Emails may not work properly when previewing your site. Publish your site to test the code found below.

To do so, we register an onAfterSave() event handler that runs each time a new item is successfully submitted. Inside the handler function, we paste the code snippet generated when we created our Triggered Email. We also have to import the triggeredEmails module, since it contains the emailMember() function.

At this point, our code looks like this:

Copy
1
import { triggeredEmails } from 'wix-crm-frontend';
2
3
$w.onReady(function () {
4
$w("#sportDataset").onAfterSave( () => {
5
triggeredEmails.emailMember("sportMail", <enter-user-id-here>, {
6
variables: {
7
"name": <enter-value-here>,
8
"sport": <enter-value-here>,
9
"comments": <enter-value-here>
10
}
11
} );
12
} );
13
} );

However, it still won't work as intended. 

We have to edit the snippet so that the code:

  • checks to see if a site visitor is logged in 
  • if the site visitor is a logged-in member, uses their ID to send the email
  • uses the values from the form that was submitted
Copy
1
import { triggeredEmails } from 'wix-crm-frontend';
2
import { currentMember } from 'wix-members-frontend';
3
4
$w.onReady(function () {
5
$w("#sportDataset").onAfterSave(async () => {
6
const member = await currentMember.getMember()
7
if (member) {
8
const userId = member._id;
9
triggeredEmails.emailMember("sportMail", userId, {
10
variables: {
11
"name": $w("#nameInput").value,
12
"sport": $w("#sportDropdown").value,
13
"comments": $w("#commentsInput").value
14
}
15
})
16
}
17
});
18
});

Notice that we import the currentMember module from wix-members-frontend. This module gives us access to a member's details if they are logged in.

Copy
1
import { currentMember } from 'wix-members-frontend';

We call the getMember() function which returns a Promise that resolves to a logged-in member's details:

Copy
1
await currentMember.getMember()

We check if the site visitor is logged in by seeing if getMember() returned anything:

Copy
1
if (member) {

If the site visitor is logged in we get their member ID:

Copy
1
const memberId = member._id;

And use the memberId variable in the emailMember() function call:

Copy
1
triggeredEmails.emailMember("sportMail", memberId, {

We also replaced the values in the variables object with the values from our input elements.

Copy
1
"name": $w("#nameInput").value,
2
"sport": $w("#sportDropdown").value,
3
"comments": $w("#commentsInput").value

We can also add code to verify that the email was sent and handle cases where an error has occurred. Since the emailMember() function returns a Promise, we can define what happens when the Promise resolves successfully or rejects with an error.

Copy
1
import { triggeredEmails } from 'wix-crm-frontend';
2
import { currentMember } from 'wix-members-frontend';
3
4
$w.onReady(function () {
5
$w("#sportDataset").onAfterSave(async () => {
6
const member = await currentMember.getMember()
7
if (member) {
8
const userId = member._id;
9
triggeredEmails.emailMember("sportMail", userId, {
10
variables: {
11
"name": $w("#nameInput").value,
12
"sport": $w("#sportDropdown").value,
13
"comments": $w("#commentsInput").value
14
}
15
})
16
.then(() => {
17
// do something after the email was sent successfully
18
})
19
.catch((err) => {
20
// handle error that prevented the email from being sent
21
});
22
}
23
});
24
});
Was this helpful?
Yes
No