Sending Triggered Emails To Members with Velo

Creating a Triggered Email

A Triggered Email allows you to send a personalized message to a site member who has triggered a specific event.

Before getting started, note that Triggered Emails are a feature of Velo by Wix. To become a Velo user, you need to enable Velo.

Steps to create a Triggered Email

Follow these steps to create a triggered email:

Step 1: Access the Triggered Email dashboard

1. Go to Marketing Home in your site’s dashboard.
2. Scroll down and click Triggered Emails on the left.

Note: This tab only appears if you have enabled Velo.

Step 2: Create an email

1. If this is your first time creating a Triggered Email, click Get Started .

2. Click + Create New. This takes you to the Triggered Email Editor.

   • You can also click the Show More icon and click Duplicate if you want to duplicate an existing Triggered Email and then make edits.

3. On the Triggered Email Editor, design your email:

   a. Edit the provided content by clicking, customizing, or deleting an element.

   b. Click the Add icon on the left side to include additional elements.

   c. Click the Background icon on the left side to customize the background.

Step 3: Use Variables to insert specific information

Variables make a Triggered Email truly unique to its reader. The variable is a placeholder that will ultimately be replaced by a real value that you define in the code. The name in the placeholder should be meaningful to you so that you can identify it later.

1. Click a text element and then click .

   a. Variable name: You can name a variable anything you want, but it should be meaningful to you so you can identify it later.

   b. Under Fallback value, write a replacement text that appears in case you’re missing that specific piece of data. (For example, if you don’t have your user’s name, you can add “Customer” or “Buddy”, depending on what fits your situation best.)

   • Please note that fallback values may be applied in the body of an email, but not in the subject line.

   c. Click Add.

Step 4: Get your Triggered Email’s code snippet

If you click Save as Draft at this stage, you are redirected to the Triggered Email dashboard. To proceed to the code snippet, click Save & Publish.

To generate the code snippet:

1. Click Save & Publish on the top left.

2. If you have not already done so,

   a. Click Add Details to choose how your name appears and the reply-to address

   b. Click Save.

   c. You may be asked to confirm your email address. If so, enter the confirmation code from the email in your inbox and click Confirm.

3. Suggested: Change the email ID by clicking the ID listed and then replacing it.

4. Choose who receives your email:
   • Email New Contacts when someone signs up.
   • Email Site Members for existing members.

5. Click Copy in the text window where the code snippet appears.
6. Click Got It to close the window.

Step 5: Add the code snippet to an event on your site

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. The general flow is to paste the generated snippet into your code where you want the email to be sent and then edit the snippet so that it uses the ID of the currently logged-in member — or the newly created contact — and the values you want to insert for the variable placeholders.

Connecting the custom signup form with the Triggered Email

Learn how to send a triggered email upon submission of a particular form.

Sending a triggered email after a form submission

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 and 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.

Prerequisites

This article assumes that you are familiar with creating an input form. We also assume that you’ve written and published the Triggered Email given below. You will also need a way for users 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 within 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:

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 provided below.

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 wixUsers module since it contains the emailUser() 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:

• if a user is logged in, it uses the ID of the currently logged-in member
• It uses the values from the form that was submitted

Notice that we check to see if the user is logged in.

if(wixUsers.currentUser.loggedIn) {    

If the user is logged, in we get the user’s ID.

const userId = wixUsers.currentUser.id;

Use the userId variable in the emailUser() function call.

wixUsers.emailUser("sportMail", userId, {

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

"name": $w("#nameInput").value,
"sport": $w("#sportDropdown").value,
"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 emailUser() function returns a Promise, we can define what happens when the Promise resolves successfully or rejects with an error.

Sending Triggered Email after new user signup

In the previous lesson, we learned how to create a custom registration formcreateCustomRegForm using Velo. Now, we will add functionality to send emails to new signups right after they register.

We can use the same wixUsers.emailUser API to trigger the email but that would be after the user has been successfully registered.

For this, we need to add a .then function in order to write a callback function for the wixUsers.register method.

We first create a welcomeMail email using the steps mentioned at the beginning of this lesson. This email will say “Thank you for signing up!” to new users.

For personalizing the email, we can address the user by his name using the name variable.

A Triggered Email can be generated from anywhere in the code. The wixUsers.emailUser API can be used upon any form submission (including new signups) and is customizable and intuitive.