How to Send Triggered Emails Using Wix Velo

Introduction

Wix Velo offers a robust way to send triggered emails, which are automated emails sent in response to specific events or conditions on your website. The process is even more streamlined with the Triggered Email dashboard available in the Velo Sidebar. This blog post will guide you through the updated steps to set up triggered emails using Wix Velo.

Prerequisites

• A Wix website

• Basic understanding of JavaScript

Step 1: Access the Triggered Email Dashboard

1. Log in to your Wix account and go to your site's dashboard.

2. In your Sidebar, select the Developer Tools tab.

3. Then select Triggered Emails.

Step 2: Create an Email

If You're New to Triggered Emails

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

For Everyone

• Click + Create New to open the Triggered Email Editor.

• Alternatively, if you want to duplicate an existing Triggered Email, click the 'Show More' icon and then click 'Duplicate'.

Design Your Email:

• Edit the provided content by clicking on an element to customize or delete it.

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

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

Step 3: Use Variables for Personalization

1. Click on a text element and then click + Add Variable.

2. Variable Name: Choose a meaningful name for the variable.

3. Fallback Value: Enter a replacement text that will appear if the specific piece of data is missing. Note that fallback values can be applied in the body of an email but not in the subject line.

4. Click Add.

Step 4: Get Your Triggered Email's Code Snippet

1. Click Save & Publish on the top left.

2. If prompted, click Add Details to specify how your name appears and the reply-to address. Click Save.

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

4. Choose the recipients:

   1. Email New Contacts for new sign-ups.

   2. Email Site Members for existing members.

5. Click Copy to copy the code snippet that appears in the text window.

6. Click Got It to close the window.

Implementing the Code Snippet

After copying the code snippet, you can implement it in your site's backend to trigger the email based on specific events, such as user sign-up or purchase confirmation.

Step 5: Implementing the Trigger with a Code Example

Now that you have your Triggered Email set up and the code snippet copied, it's time to implement the trigger that will send the email. For this example, let's assume you want to send a welcome email to a new user upon sign-up.

Backend Code

First, create a new backend file, for example, backend/welcomeEmail.jsw, and paste the following code:

import { sendTriggeredEmail } from 'wix-users-backend';

export function sendWelcomeEmail(userId, userEmail, userName) {
  const emailId = "your_email_id_here"; 
  // Replace with the email ID you copied
  
  sendTriggeredEmail({
    emailId: emailId,
    to: userEmail,
    variables: {
      name: userName
    }
  });
}

In this code, we import the 'sendTriggeredEmail' function from wix-users-backend. The function 'sendWelcomeEmail' takes the user's ID, email, and name as parameters and sends a triggered email using the email ID you copied earlier.

Frontend Code

Next, open your site's frontend code and add the following:

import { wixUsers } from 'wix-users';
import { sendWelcomeEmail } from 'backend/welcomeEmail';

$w.onReady(function () {
  wixUsers.onLogin((user) => {
    user.getEmail()
      .then((email) => {
        sendWelcomeEmail(user.id, email, user.displayName);
      });
  });
});

Here, we import wixUsers to listen for the onLogin event. When a user logs in, we get their email and display name and then call the sendWelcomeEmail function from our backend.

Putting It All Together

1. Replace 'your_email_id_here' in the backend code with the email ID you copied from the Triggered Email dashboard.

2. Save both the backend and frontend files.

3. Publish your site to apply the changes.

Now, whenever a new user signs up and logs in, they will receive a personalized welcome email.

Conclusion

By following these five steps, you can set up and implement triggered emails in your Wix website using Wix Velo. This feature not only enhances user engagement but also automates a significant part of your email marketing efforts.