How To Run Triggered Sends with Velo by Wix

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:

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:

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:

1. Add the import statement to the top of the code where we use the snippet.
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.
3. Add code that creates the new contact and gives us the contact's ID.
4. Add the snippet code to the handler function and replace the placeholder values.
5. 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 wixCrm from 'wix-crm';

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()

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 createContact API to create the new contact using the information the site visitor entered in the form fields. 

wixCRM.createContact({
 "firstName": $w('#nameInput').value,
 "emails": [$w("#emailInput").value],
 "interest_area": $w("#interestArea").value
})

The 

createContact

contactID

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

The 

createContact

contactID

<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

interest_area

variables

At this point our code should look like this:

export function signUpButton_click(event) {
 wixCRM.createContact({
   "firstName": $w('#nameInput').value,
   "emails": [$w("#emailInput").value],
   "interest_area": $w("#interestArea").value
  })
  .then((contactId) => {
   wixCRM.emailContact("newsletter_signup", contactId, {
    "variables": {
     "name": $w('#nameInput').value,
     "interest_area": $w("#interestArea").value
    }
   })
  })
}

5. Add some code to handle success and errors.

Since the 

emailContact()

We'll add a 

.then

.catch

Your code should look like this now:

import wixCRM from 'wix-crm';

$w.onReady(function () {

});

export function signUpButton_click(event) {
 wixCRM.createContact({
   "firstName": $w('#nameInput').value,
   "emails": [$w("#emailInput").value],
   "interest_area": $w("#interestArea").value
  })
  .then((contactId) => {
   wixCRM.emailContact("newsletter_signup", contactId, {
     "variables": {
      "name": $w('#nameInput').value,
      "interest_area": $w("#interestArea").value
     }
    })
    .then(() => {
     // do something after the email was sent
    })
    .catch((err) => {
     // handle the error if the email wasn't sent
    });
  });
}

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

Previously published at https://support.wix.com/en/article/velo-tutorial-sending-a-triggered-email-to-contacts