Full Tutorial on how to use Velo to send a triggered email using Wix Code on your Wix Website. Find out how to use Velo code and Wix Elements to transfer data from your website to your visitor's email inbox with a good amount of code. Then stay tuned for in-depth knowledge about this trick and the code behind it.

Here is the helpful code to get you going! Let me know if you need any more assistance in the comments on YouTube or contact me at the bottom today!

📚 WHAT WAS COVERED:

00:00 CN Intro

01:09 Setup of Triggered Emails

04:30 Setup your Email in the Wix Email Editor

05:30 Add Variables to your customized email

08:50 Copy Trigger Code & the Email ID

10:00 Setup Elements of the Subscribe Form to add to your Wix Editor

12:40 Trigger Email Page Code Walk-through

17:10 Trigger Email Backend Code Walk-through

27:10 Preview Website & Perform Trigger Email

28:05 Review the email with the transferred data a.k.a. variables

29:06 Outro

Code Snippet to follow along with the video:

Page Code

This loads the page code. This code captures the input entered in the form and the submission button for the trigger to start.

import * as run from 'backend/dev/examples/flow.jsw'

$w.onReady(function () {
    $w('#button2').onClick(async (event) => {
        //Send trigger email
        let email = $w('#input2').value;
        if ($w('#input2').valid) {
            let sendTrigger = await run.triggerEmail(email);
            if (sendTrigger) {
                $w('#statebox8').changeState("State2").then(() => {
                    $w('#input2').value = null;
                    $w('#input2').resetValidityIndication();
                    let timeout = setTimeout(() => {
                        $w('#statebox8').changeState("State1")
                    }, 15000)
                    $w('#button4, #button3').onClick(() => {
                        clearTimeout(timeout);
                        $w('#statebox8').changeState("State1");
                    })
                })
            } else {
                //Put something to show visitor an error message
            }
        }
    })

});

Backend Code

Use this code to connect to the backend javascript workbook.

import * as gtf from 'backend/dev/examples/getFlow.js';

export async function triggerEmail (email = "") {
   return await gtf.default.sendEmail(email)
}

Once you do the javascript workbook filled out then create a javascript file. This code will set up the contact information for the email. Then send out the email to that contact id via the trigger email.

import wixData from 'wix-data';
import wixCrmBackend from 'wix-crm-backend';

const trigger = {
    contact: {
        get: async function (email = "") {
            let contactInfo = {
                emails: [{ tag: "MAIN", email: email, primary: true }]
            }
            return (await wixCrmBackend.contacts.appendOrCreateContact(contactInfo)).contactId || ""
        },
        emailContact: function (contactId = "", vars = {}) {
            let options = { variables: vars };
            console.log(contactId);
            return wixCrmBackend.triggeredEmails.emailContact("T8SZ64G", contactId, options).then(() => {
                return true
            }).catch((err) => {
                console.log(err, err.stack);
                return false
            })
        }
    },
    sendEmail: async function (email = "") {
        let contactId = await this.contact.get(email);
        if (contactId.length > 0) {
            let vars = {
                name1: email.split(/@/g)[0], //This gets the left of the @ symbol in th email address
                contact1: "contact@yourdomain.com",
                link1: "https://bit.ly/creativelynino"
            };
            return await this.contact.emailContact(contactId, vars);
        }
        console.log("ContactId error");
        return false
    }

}

export default trigger;

🖱️ SUBSCRIBE ►http://bit.ly/2NRVy6o

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

📺 MY PLAYLISTS :

Wix Tutorials for Beginners: http://bit.ly/3aA8mb3

Wix Tutorials 2022: http://bit.ly/2Rpa8V8

Wix Tips: https://bit.ly/2Qudip1

More here: https://bit.ly/3lAeEx4

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

💻 WEBSITE

Check out more of the website. If you have a question, let's chat it up below! More information coming soon so stay tuned!

What would you like to see next?

• Change Image

  Wix Bookings
• Change Image

  Custom Subscription Process

You can vote for more than one answer.