Velo Tutorial: Sending a Triggered Email to Members
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:
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:
| Type | ID | Usage |
|---|---|---|
| Input | nameInput | For entering a name |
| Dropdown | sportDropdown | For entering a preferred sport |
| Text Box | commentsInput | For entering comments |
| Button | submitButton | For submitting the data |
| Dataset | sportDataset | For 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:
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
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.
We call the getMember() function which returns a Promise that resolves to a logged-in member's details:
We check if the site visitor is logged in by seeing if getMember() returned anything:
If the site visitor is logged in we get their member ID:
And use the memberId variable in the emailMember() function call:
We also replaced the values in the variables object with the values from our input elements.
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.