Automated Email Notification on Booking

July 2025 Update: Wix added support for built-in automated emails without any third-party code required. See below for the heading: Wix Automated Emails.

Most of the instructions necessary for creating an automated email notification when website visitors create a booking reservation can be found in this Velo Tutorial. If the video at that link doesn't load, you can try this link instead.

Start by completing Step 1: Create an Account with SendGrid, then Step 2a: Store Secrets in the Secrets Manager, and Step 2b: Add the SendGrid npm Package. Skip Step 2c. Next, complete all of Step 3: Write Backend Code in the sendEmail.jsw Web Module. We are now done with what we need from the tutorial.

We will now add our own frontend code to call the sendEmail function. Go to the page where the Booking Calendar has been added and open up the code window. Replace the code with the following:

import { sendEmail } from 'backend/sendEmail.jsw';
const SUCCESS_CODE = 202;

$w.onReady(function () {

	$w('#calendar1').onDatesReserved(async ({data: dates}) => {
		let body = `start: ${dates.start.toString()}, end: ${dates.end.toString()}\n` +
			`itemId: ${dates.itemId}\n` +
			`first name: ${dates.first}\nlast name: ${dates.last}\n` +
			`email: ${dates.email}\nphone: ${dates.phone}`;
		const result = await sendEmail('your.email@gmail.com', 'Dates Reserved', body);
		if (result[0].statusCode !== SUCCESS_CODE) {
			console.log('Error sending email, please verify your SendGrid account details.');
		}
	});

});

Change 'your.email@gmail.com' to the email address where you want to receive the notification email. Feel free to make any other changes to the body or title of the email that you desire. Preview the website and confirm that making a new booking results in an automatic email notification.

The onDatesReserved function is called whenever a booking reservation is made with the Booking Calendar, so if there is any other functionality you desire at this time, code can be added here to perform it.

Wix Automated Emails

To use Wix Automated Emails, start by following the instructions at this link to Add a Custom Trigger. Below is the frontend code currently being used instead of SendGrid. The backend code is exactly as given in Wix Automations. See Step 2, the "Copy code ..." section. If you want to pass the booking data to the email as I'm doing in the code below, then you need to define the payload structure as described in Step 2. It's just { payload: "string" } for the code below.

import { runTrigger } from 'backend/runTrigger.web';

$w.onReady(function () {

	$w('#calendar1').onDatesReserved(async ({data: dates}) => {
	  const info = `start: ${dates.start.toString()}, end: ${dates.end.toString()}\n` +
			`itemId: ${dates.itemId}\n` +
			`first name: ${dates.first}\nlast name: ${dates.last}\n` +
			`email: ${dates.email}\nphone: ${dates.phone}`;
        const payload = {
            payload: info
        }
        await runTrigger(payload);
	});

});

Once that's done, then next step is to create and send the email. Here are the instructions for Automated Emails. To add the action to send an email, you need to click the + symbol below the Velo Code Trigger box you created above. The rest of the instructions are pretty self explanatory, but you can email me if you have any problems.