Vorbly <Code>

CODING MADE EASY WITH VORBLY

WIX SENDGRID API - HTML EMAIL MESSAGES

Want to customize your email notifications? This tutorial will show you how to integrate SendGrid APIs into your online forms using Wix Code. Customers will receive a customized HTML email notification everytime they submit a order form or contact form. We will provide you with the webpage elements and sample codes required to implement this feature.

THE DEMO

1/6

THE ELEMENTS

The Page

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

​

​

The Database

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

SendGrid API Keys

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

​

​

THE CODE

Page Code

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 //

Back-End Code

// 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 = "contactus@example.com"; // Sender email //

    const recipient = "admin@example.com"; // 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 = "contactus@example.com"; // Sender email //

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

}

​

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

Back-End Code

// 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 //

​

​

​

​

COMMENTS

I'm a paragraph. Click here to add your own text and edit me. It's easy.

Please complete all required fields.
No comments. Be the first to leave a comment.

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP

CONTACT US