Hackernoon logoHow To Run Triggered Sends with Velo by Wix by@velo

How To Run Triggered Sends with Velo by Wix

Velo by Wix Hacker Noon profile picture

@veloVelo by Wix

Velo is a full-stack development platform that empowers you to rapidly build, manage and deploy professional web apps.

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';
 to the top of the code in the page where you want to 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.

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 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
 function returns the 
contactID
 for the newly created contact. We'll use that ID 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 

createContact
 function returns a promise, so we'll add our snippet after it. Now that we have the 
contactID
 we will use it 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:

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

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

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.