WIX SENDGRID API - HTML EMAIL MESSAGES

Text Elements​

• Event Name ID: #EventName

• Location ID: #location

​​

User Inputs

• Name: #name

• Email: #email

• No. of tickets: #quantity

• Date: #datePicker1

• Comments: #comments

Button Element

• Submit Button: #submit

​

Create a database OrderForm (dataset1) with the same fields as your form.

​

Database fields

• Name: name

• Email: email

• No. of tickets: quantity

• Date: date

• Comments: comments

Go to sendgrid.com and create your free account

• Setup Guide > Integrate using our Web API or SMTP Relay

• Select Web API > Java > Create Key

• Generate API Key and save it

​

import {sendEmail, sendEmailWithRecipient} from 'backend/email';

​

$w.onReady(function () {

 $w("#dataset1").onAfterSave(sendFormData);

});

​

// Customize Your Email //

​

function sendFormData() {

const subject = `Your Email Subject ${$w("#EventName").value}`;

const body = `<font size="3" color="red">

Hi ${$w("#name").value},

<br/>Thank you for booking your tickets with us. Please refer to the details of your order below.

<br/>Event: ${$w("#EventName").text}

<br/>Location: ${$w("#location").text}

<br/>Date: ${$w("#datePicker1").value}

<br/>No. of tickets: ${$w("#quantity").value}

<br/>Please contact us at 123-123-1234 for enquiries. </font>`;

const recipient = $w("#email").value;

​

 sendEmailWithRecipient(subject, body, recipient)

   .then(response => console.log(response));

 sendEmail(subject, body)

   .then(response => console.log(response));

}

​

// Reference: HTML Rich Text Editor //

​

// Note: SendGrid API V3​ is the latest version //

// email.jsw //

import {sendWithService} from 'backend/sendGrid';

export function sendEmail(subject, body) {

    const key = "YOUR_SENDGRID_API_KEY"; // Replace with your API key //

    const sender = ""; // Sender email //

    const recipient = ""; // Notification to yourself //

    return sendWithService(key, sender, recipient, subject, body);

}

​

export function sendEmailWithRecipient(subject, body, recipient) {

    const key = "YOUR_SENDGRID_API_KEY"; // Replace with your API key //

    const sender = ""; // Sender email //

    return sendWithService(key, sender, recipient, subject, body); // Customer email //

}

​

// Note: SendGrid API V3​ is the latest version //

// sendGrid.js //

import {fetch} from 'wix-fetch';

export function sendWithService(key, sender, recipient, subject, body) {

    const url = "https://api.sendgrid.com/api/mail.send.json";

    const headers = {

        "Authorization": "Bearer " + key,

        "Content-Type": "application/x-www-form-urlencoded"

    };

    const data = `from=${sender}&to=${recipient}&subject=${subject}&html=${body}`;

    const request = {

        "method": "post",

        "headers": headers,

        "body": data

    };

    return fetch(url, request)

    .then(response => response.json());

}

​

// Note: SendGrid API V3​ is the latest version //

​

​