Velo Tutorial: Sending a Triggered Email to Contacts

Triggered Emails allow you to create a template for emails that you can send to a newly created contact, 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 newly created contact 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 newly created contact 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:

Notice that the email template contains the following variables:

name
Interest_Area

It is good practice to give your email template a meaningful name. Doing so makes it easier to work with in code. Click on the Email ID to rename it. In this example, we call our email newsletter_signup.

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

The code snippet generated by the email looks like this:

Copy

There are a few things to note about the code in this snippet:

At the top of the snippet there is an import statement. This line needs to be added to the very top of the code on the page where you will be using the rest of the snippet. It imports the library of functions that lets your code work with the Triggered Email functionality.
The contact ID and the values of the variables (name and interest_area) are reflected in the code snippet with placeholders. These placeholder values will need to be replaced with real values in your actual code.

Add a Custom Field to Your Contacts List

In our example we save some information about our contact in a custom field. To work with custom fields in our code we first need to add the custom field to the Contact List in the Dashboard. For our example, name the field interest_area.

Form

Next, we create an input form with a submit button. In this example, we use a simple form with the following input elements:

Type	ID	Usage
Input - text	nameInput	For entering a name
Input - email	emailInput	For entering an email address
Dropdown	interestArea	For selecting area of interest
Button	signUpButton	For submitting the data
Dataset	newsletterDataset	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.

Here's the outline of what we'll need to do:

Add the import statement to the top of the code where we use the snippet. We will also need to import an additional module to create new site contacts.
Add an onClick event handler to the button. The code we add to that handler function will create the new contact and email them.
Add code that creates the new contact and gives us the contact's ID.
Add the snippet code to the handler function and replace the placeholder values.
Add some code to handle success and errors.

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

1. Add the import statement to the top of the code where we use the snippet.

Paste the import statement that was at the top of your snippet: import {triggeredEmails} 'wix-crm-frontend'; to the top of the code in the page where you want to use the snippet. Add contacts in between the { } to import that module as well. The final import statement should look like this:

Copy

2. Add an onClick event handler to the button. The code we add to that handler function will create the new contact and email them.

Use the Properties & Events panel to add an onClick() event handler to the signUpButton that runs each time it's clicked.

3. Add code that creates the new contact and gives us the contact's ID.

Add this code inside the onClick event handler. This uses the appendOrCreateContact API to create the new contact using the information the site visitor entered in the form fields.

Copy

The appendOrCreateContact function returns an object containing the contactID, and identityType for the newly created contact. We'll grab the ID and use it in our snippet to identify the new contact and email them.

4. Add the snippet code to the handler function and replace the placeholder values.

The appendOrCreateContact function returns a promise, so we'll add our snippet after it. We'll declare a new variable called contactId and use it to store the contactId value that is stored in the object returned by appendOrCreateContact(). We will use this ID in the snippet in place of <enter-contact-ID-here>.

We'll also use the values that our site visitor entered in the form fields as the actual values for the name and interest_area variables in the variables object.

At this point our code should look like this:

Copy

5. Add some code to handle success and errors.

Since the emailContact() function returns a Promise, we can define what happens when the Promise resolves successfully or rejects with an error.

We'll add a .then and a .catch to handle these.

Your code should look like this now:

Copy

Test your form in your published site to see that it creates the contact and sends a Triggered Email.

Did this help?