mosaddik.dev
All posts

How to send emails from Wix with Velo

Mosaddik Billah 5 min read

Wix Velo

A blue app icon with a white envelope on a blue background
Photo by Mariia Berezovsky on Unsplash
On this page
  1. How the pieces fit
  2. 1. Create the email template
  3. 2. Build the form
  4. 3. Create the contact and send the email
  5. 4. Test it on the live site
  6. Why an email might not arrive
  7. When to use something else

Sooner or later every Wix site needs to send an email that isn’t a newsletter. A “thanks, we got your request” after a quote form. A welcome note with a download link. A reminder with the visitor’s own details in it. Wix has a built-in way to do this with code, called Triggered Emails, and once you’ve set it up once, it takes about ten minutes on the next site.

Here’s how it works, start to finish.

How the pieces fit#

There are three parts, and it helps to know them before you open the editor:

  • The template. You design the email in the Wix dashboard, like any other email. Where you want personal details, you add variables, for example name or interest_area.
  • The contact. Triggered Emails are sent to a contact in your site’s Contacts list, not to a raw email address. So the code first creates (or finds) a contact and gets back its ID.
  • The code. One function call says “send this template to this contact, with these values for the variables”.

That middle step catches most people out. You can’t just pass someone@example.com. You pass a contact ID.

1. Create the email template#

In your site’s dashboard, open Developer Tools → Triggered Emails and click + New Campaign. Write the email, and wherever you want a personal value, select the text and click + Add Variable. Keep the names simple: name, interest_area, downloadLink. Give each one a fallback value too, so a missing name reads “Hi there” instead of “Hi ,”.

If you’d like to see every screen, I took screenshots of the whole process in how to create a Triggered Email in Wix, step by step.

A few things save trouble later:

  • Use a sender address on your own domain when Wix asks for sender details. Wix’s own docs warn that a Gmail or Yahoo reply-to address tends to land in spam or promotions.
  • Rename the email ID to something readable, like newsletter_signup, on the last screen before you save. The default ID is a random string, and you’ll be typing it in code.
  • Glance at the code snippet Wix shows you there. You don’t need to copy it exactly, but it’s a good check that the ID and variable names are what you think they are.

2. Build the form#

For this example the page has:

Element ID
Text input for the name #nameInput
Email input #emailInput
Dropdown for the topic they care about #interestArea
Submit button #signUpButton
Text that shows a message #statusText

If you also want to save the submission in a collection, connect the inputs to a dataset as usual. Sending the email doesn’t depend on it.

3. Create the contact and send the email#

Page code, using wix-crm-frontend:

JavaScript
import { contacts, triggeredEmails } from "wix-crm-frontend";

$w.onReady(function () {
  $w("#signUpButton").onClick(async () => {
    const name = $w("#nameInput").value;
    const email = $w("#emailInput").value;
    const interest = $w("#interestArea").value;

    $w("#signUpButton").disable();

    try {
      const { contactId } = await contacts.appendOrCreateContact({
        name: { first: name },
        emails: [{ email }],
      });

      await triggeredEmails.emailContact("newsletter_signup", contactId, {
        variables: {
          name,
          interest_area: interest,
        },
      });

      $w("#statusText").text = "Thanks! Check your inbox.";
    } catch (err) {
      console.error(err);
      $w("#statusText").text = "Something went wrong. Please try again.";
      $w("#signUpButton").enable();
    }
  });
});

What each part does:

  • appendOrCreateContact looks for a contact with that email. If there is one, it adds the new details without overwriting anything. If there isn’t, it creates one. Either way you get back a contactId.
  • emailContact takes the email ID from step 1, the contact ID, and a variables object. The keys must match the variable names in the template exactly, including case.
  • The button is disabled while this runs, so an impatient double click doesn’t send two emails.

Before you trust the inputs, validate them. An email field that accepts “asdf” will happily create a contact called “asdf”. I covered that in how to validate a Wix form with Velo.

4. Test it on the live site#

Publish the site and test there, not in Preview. Wix itself notes that Triggered Emails may not work properly in Preview. I’ve lost more time to this than I’d like to admit.

Submit the form with your own address, then check:

  1. The email arrived, and the variables are filled in (not blank, not showing the variable name).
  2. A new contact appeared under Contacts in the dashboard.
  3. Submitting again with the same email didn’t create a second contact.

Why an email might not arrive#

  • The contact is unsubscribed. Triggered Emails skip contacts marked as unsubscribed. If you tested with an address that once clicked “unsubscribe” on one of your emails, that’s probably it. Contacts with no subscription status set do get the email.
  • Wrong email ID. It’s the ID from the Triggered Emails page, not the subject line or the template’s display name.
  • Variable names don’t match. interestArea in code and interest_area in the template means an empty value, not an error.
  • It’s in spam. Check the junk folder before rewriting your code. A sender address on your own domain and a short, plain email both help.
  • The email is still a draft. Drafts aren’t sent. Open it and save it properly.
  • You tested in Preview. See above.

When to use something else#

Triggered Emails are great for emails that go to the visitor: confirmations, welcome notes, simple follow-ups. They’re less suited to:

  • Notifying yourself about a submission. Wix Forms and Automations already do that without code.
  • Large or transactional volume, like order receipts for a busy shop or emails that must arrive in seconds. A dedicated service such as SendGrid or Postmark, called from backend code, gives you delivery logs and better control. The pattern for calling an outside API safely is in how to call an external API from Wix Velo.

If you want emails like this wired into your forms, bookings or member area, I do Wix Velo development.

Comments