In today's digital landscape, personalized communication is crucial for engaging with website visitors and building strong customer relationships. One effective way to achieve this is through automated triggered emails. By implementing this functionality on your Wix website using Wix Velo, you can automatically send personalized emails to contacts based on specific events or actions, such as form submissions.
In this tutorial, we will walk you through the steps to set up automated triggered emails using Wix Velo's Developer Tools. We'll cover the process of creating a Triggered Email, writing backend code to send the email, handling form submissions in the frontend code, and integrating with Wix CRM to create or update contacts.
By the end of this tutorial, you'll have the knowledge to implement automated triggered emails on your Wix website, enabling you to deliver personalized content and enhance the communication with your website visitors. Let's get started!
Step 1: Enable Wix Velo
Wix Velo is a powerful development platform that Wix offers. By enabling Velo, you can write custom code, create databases, and build complex functionalities for your Wix website.
A. Log in to Your Wix Account
Start by logging into your Wix account. If you don't have a Wix account, you will need to create one.
B. Access Your Site Editor
From your Wix account homepage, you'll see a list of your sites if you have created any. Click on the “Edit Site” button for the site you wish to work on. If you haven't created a site yet, you can do so by clicking on “Create New Site” and following the site creation wizard.
Once you are inside the site editor, you’ll see your website and the editing tools. Here, you can add or edit the pages, change the layout, and add elements to your site.
C. Enable Wix Velo
On the top bar of the editor, you will see an option named “Dev Mode”. Click on it.
A drop-down menu will appear. Click on “Turn on Dev Mode”. This will enable Wix Velo on your site.
A dialog may appear explaining what turning on Dev Mode will do. Read through it and click “Turn On” if you agree.
Enabling Velo will change the editor interface a bit. You will now see a “Site Structure” sidebar on the left, which includes options to add database collections, custom user input forms, and backend scripts. Additionally, at the bottom, you'll see a code panel where you can write your custom code.
You'll also see a new menu item called “Velo” on the top bar. You can use this menu to access various Velo resources, including tutorials, examples, and documentation.
At this point, Wix Velo is enabled for your website. This is a fundamental step as it opens up many possibilities for customizing and enhancing your Wix site with code and database functionalities. You can now proceed to create custom elements, write code, and interact with databases within your Wix site.
Step 2: Create a Form
In Step 2, you'll be creating a form on your Wix website. Forms are crucial for collecting information from your visitors, such as names, email addresses, feedback, or any other data. For this example, let's create a simple contact form that collects a visitor's name and email address. Here's a more detailed breakdown:
A. Add a New Page or Select an Existing One
In your Wix Editor, you can either add a form to an existing page or create a new page specifically for the form.
To add a new page, click on the “Menus & Pages” on the left sidebar, then click on the “+ Add Page” button.
B. Add Form Elements
In the Wix Editor, click on the “+ Add” button on the left sidebar.
From the add menu, select “User Input”. Here you can see various form elements like text inputs, drop-downs, checkboxes, etc.
For a simple contact form, you'll likely want to add a couple of text fields (for name and email) and a submit button. a. Drag a “Text” input onto the page for the user's name. Click on it and set its properties such as placeholder text (e.g., "Your Name"). b. Drag another “Text” input but change its type to 'Email' for the user's email address. Similarly, set its properties, like placeholder text (e.g., "Your Email"). c. Lastly, drag a “Button” onto the page. This will be the submit button. Set its text to something like “Submit”. d. Optionally, you can also add a "Checkbox" for agreeing to terms and conditions or subscribing to a newsletter.
C. Assign IDs to Elements
To interact with these elements through code, it's good practice to assign them unique IDs. Click on an element to select it, then go to the properties panel and set an ID (e.g., #nameField for the name input, #emailField for the email input, and #submitButton for the submit button).
D. Style Your Form
Customize the appearance of your form elements using the Wix Editor. You can change the colors, fonts, sizes, and layout to match your website’s design.
E. Set up Database (Optional)
If you want to store the form submissions in a database, you can create a new database collection by clicking on “Content Manager” from the left sidebar, and then clicking “+ New Collection”. This step is optional for just sending an email, but is useful if you want to keep a record of the submissions.
Now you've created a simple form on your Wix website. The next steps involve writing code to handle the form submission and trigger an email, as outlined in the following steps of the original guide.
Step 3: Setup Triggered Email in Developer Tools
In Step 3, you'll be creating a Triggered Email template using Wix's Developer Tools. This template defines the content and structure of the email that will be sent automatically when triggered by an action, such as a form submission.
Here's a more detailed breakdown:
A. Access Developer Tools
Log into your Wix account, navigate to your site's dashboard.
From the dashboard, find the ‘Dev Mode’ section in the left sidebar, and click on ‘Developer Tools’.
B. Create New Triggered Email
In the Developer Tools interface, you will see a sidebar on the left with several options. Look for ‘Triggered Emails’ and click on it.
Click the '+ New Triggered Email' button to create a new email template.
You'll be prompted to enter a name for your email. This is an internal name and won't be visible to recipients. For example, enter 'WelcomeEmail' and click ‘Create’.
C. Customize Email Template
Once you've created the email, you will be presented with an editor to define the content of the email.
The editor allows you to use placeholders for variables that you will later replace with real values. For instance, if you want to address the recipient by name, you can use $name as a placeholder in the email content.
Example:
Subject: Welcome to Our Community!
Hello $name,
Thank you for signing up. We're excited to have you as part of our community.
Best regards,
Your Company
D. Save Your Template
Once you are satisfied with the content and customization of your email template, click the 'Save' button in the top-right corner of the editor.
Now your Triggered Email template is set up and ready to be used in conjunction with backend code to send personalized emails to users based on actions they take on your site, such as submitting a form. The placeholders you used in the template (e.g. $name) will be replaced with actual values when the email is sent.
Step 4: Write Backend Code
A. Access Backend Code
Go back to the Wix Editor, and make sure Wix Velo is enabled (Step 1).
In the site structure sidebar on the left, choose ‘Backend’ and click on '+ New' to create a new JavaScript Web Module file. Name it something relevant, for example, email.jsw.
This .jsw file is where you will write your backend code. The code in this file is executed on the server side, which is ideal for tasks like sending emails.
B. Import Required Module
At the top of your email.jsw file, you need to import the module required for sending emails.
import { triggeredEmails } from 'wix-crm-backend';
This line imports the triggerByEmail function which allows you to send emails using the Triggered Email you set up earlier.
C. Write Function to Send Email
Next, create a function that sends an email using the Triggered Email template. You will pass in the name and email address as parameters.
Certainly! Here's the modified version of the backend code, as per your request:
import { triggeredEmails } from 'wix-crm-backend';
export function myEmailContactFunction(emailId, contactId, name) {
return triggeredEmails.emailContact(emailId, contactId, { name })
.then(() => {
console.log('Email was sent to contact');
})
.catch((error) => {
console.error(error);
});
}
Explanation:
import { triggeredEmails } from 'wix-crm-backend'; - This imports the triggeredEmails module from Wix CRM backend, which provides the emailContact function.
myEmailContactFunction - This is the name of your function. You can rename it as per your preference.
emailId - This parameter represents the ID of the Triggered Email you've set up in Wix Developer Tools.
contactId - This parameter represents the ID of the contact to whom the email will be sent.
name - This parameter represents the name of the recipient, which can be used to personalize the email content.
The function myEmailContactFunction takes the emailId, contactId, and name as parameters. It calls the emailContact function from the triggeredEmails module, passing the necessary parameters. If the email is successfully sent, the then block logs a success message. If there's an error, the catch block logs the error message.
You can call this function from your page code or any other backend code file when a form is submitted or any other relevant trigger occurs. Make sure to provide the correct values for emailId, contactId, and name when calling the function.
Please note that you'll need to have Wix CRM enabled and properly set up to use the triggeredEmails module and the emailContact function.
Step 5: Handle Form Submission
Now you will handle the form submission event and call the backend function that sends the triggered email. This is done using Wix Velo's frontend code, specifically in the page code where the form is located.
Here's a more detailed breakdown:
A. Open Page Code
In the Wix Editor, navigate to the page where your form is located.
Right-click on the page or the form element and select "Page Code" from the context menu. This will open the code editor for that specific page.
B. Import Backend Function
At the top of your page code, import the backend function that sends the email.
import { myEmailContactFunction } from 'backend/email';
Make sure to update the import path according to the actual location of your backend file.
C. Handle Form Submission Event
Inside the page code, find the function or event handler that is triggered when the form is submitted. This could be an onClick event on a submit button or a onSubmit event on the form itself.
Add the necessary code to handle the form submission event and call the backend function.
import { myEmailContactFunction } from 'backend/email';
$w.onReady(function () {
$w("#submitButton").onClick((event) => {
event.preventDefault();
// Prevent the default form submission behavior
const name = $w("#nameField").value;
const email = $w("#emailField").value;
myEmailContactFunction('emailId', 'contactId', name)
.then(() => {
// Optional: Show success message or redirect to a thank you page
console.log('Email sent successfully!');
})
.catch((error) => {
// Optional: Show error message to the user
console.error(error);
});
});
});
Explanation:
'$w.onReady' - This ensures that the code inside the function is executed when the page has finished loading.
'$w("#submitButton").onClick' - This adds a click event handler to the submit button with the ID #submitButton. Modify this selector to match the actual ID of your submit button.
'event.preventDefault()' - This prevents the default form submission behavior, so that the form doesn't reload the page.
'const name = $w("#nameField").value' - This retrieves the value entered in the name field, assuming the input field has the ID #nameField. Adjust the selector to match the actual ID of your name input field.
'const email = $w("#emailField").value' - This retrieves the value entered in the email field, assuming the input field has the ID #emailField. Modify the selector to match the actual ID of your email input field.
'myEmailContactFunction('emailId', 'contactId', name)' - This calls the backend function myEmailContactFunction with the appropriate email ID and contact ID. You can replace 'emailId' and 'contactId' with the actual values you obtained from your Triggered Email setup.
'.then()' and '.catch()' - These handle the promise returned by the backend function. You can add optional code inside the .then() block to show a success message or redirect to a thank you page. Similarly, the .catch() block handles errors and allows you to display an error message to the user.
That's it! You have now handled the form submission event and called the backend function to send the triggered email when the form is submitted. Customize the success and error handling as per your requirements.
Step 6: Save Contacts
To obtain the 'contactId' after the form is submitted, you'll need to use Wix CRM's 'createContact' function to create a new contact in your CRM database. This function will return a promise containing the 'contactId' , which you can then pass to the backend function to send the triggered email.
import { createContact } from 'wix-crm-backend';
import { myEmailContactFunction } from 'backend/email';
$w.onReady(function () {
$w("#submitButton").onClick((event) => {
event.preventDefault();
// Prevent the default form submission behavior
const firstName = $w("#firstNameField").value;
const lastName = $w("#lastNameField").value;
const email = $w("#emailField").value;
const name = `${firstName} ${lastName}`;
// Combine first and last name
const contactInfo = {
name: {
first: firstName,
last: lastName
},
emails: [{
email: email
}
]
};
wixCRM.contacts.appendOrCreateContact(contactInfo)
.then(() => {
const contactId = contact.id;
const fullName = `${firstName} ${lastName}`;
myEmailContactFunction('emailId', contactId, fullName)
// Optional: Show success message or redirect to a thank you page
console.log('Email sent successfully!');
})
.catch((error) => {
// Optional: Show error message to the user
console.error(error);
});
})
.catch((error) => {
// Handle error creating contact
console.error(error);
});
});
});
Explanation:
The wixCRM.contacts.appendOrCreateContact function is called with the updated 'contactInfo' object to create or update the contact in the Wix CRM.
If the contact creation or update is successful, the 'then' block is executed, and the contact object is received as a parameter. The 'contactInfo' is extracted from the contact object.
The 'fullName' variable is created by concatenating the firstName and lastName with a space in between.
The myEmailContactFunction backend function is called with the appropriate 'emailId', the 'contactId', and the 'fullName' parameter to send the triggered email.
If the email sending is successful, the inner 'then' block is executed and a success message is logged. You can optionally show a success message to the user or redirect to a thank you page.
If there is an error during the email sending process, the inner 'catch' block is executed, and an error message is logged. You can optionally show an error message to the user.
If there is an error during the contact creation or update process, the outer 'catch' block is executed, and an error message is logged. You can handle the error according to your needs.
Make sure to adjust the field IDs (#firstNameField, #lastNameField, and #emailField) to match your form input field IDs.
Step 6: Publish Your Site
After you’ve tested your automated email system, publish your site.
And there you have it! You’ve successfully set up an automated triggered email using Wix Velo and Triggered Emails from Developer Tools. Whenever a user submits the form, they will receive a personalized email.
Remember to customize the code according to your specific needs, such as adjusting field IDs and adding error handling or success messages as desired. With Wix Velo's powerful features and integration with Wix CRM, you can create highly personalized and automated email experiences for your website visitors.
If you need any assistance or have further questions, feel free to reach out to CodeMasters Agency, a leading expert in web development and Wix Velo solutions. Their team of experienced developers can provide guidance and support to help you implement and optimize triggered email functionality on your Wix website. Contact CodeMasters Agency today to take your website's email automation to the next level.
