Use Sendgrid to send emails from your Wix Site

In this video, we explain how to use Velo in order to integrate your Wix site with the SendGrid service and send emails directly from your site. We build it in four steps. Let's get started.

First, we need a SendGrid account. Go to sendgrid.com and log into your account, or create an account if you don't already have one. Once you're logged in, go to your Dashboard, navigate to the left menu and go to Settings Sender Authentication and verify your email address. Go to Settings API Keys and create an API key.

Copy the API key from your Dashboard.

We will need it for the next step.

Now let's add the SendGrid API key to our WIX site. Go to your site and turn on Dev Mode. In the Velo sidebar, select Velo Tools Secrets Manager. Click Store Secret. Name the secret SendGrid secret. Store both your SendGrid API key and the verified email address associated with your SendGrid account in a single secret like this. Paste this into the value and click Save. Next, we need to install the sendgrid NPM package.

Go back to the editor, click the

Code Files tab in the Velos sidebar. In the Packages section, hover over NPM, click the plus icon and select Install Package.

From NPM.

Find the SendGrid mail package and click Install.

Now we need to write backend code to send the email using SendGrid. Go to the Backend section of the Code Files tab, click the plus icon and choose New Web module. Name the file Send email jsw

now

we'll go over the code that you need to write in the backend. First, we import the NPM package and the WIX Secrets backend API. Then we create an async function called Send Email that gets three parameters Recipient, Subject, and Body. Inside the function, we get the sendgrid secret we stored earlier using the WIX Secrets Backend API and convert the response to JSON. Then we assign the key and sender email into constants. Now we use the key in order to initialize the sendgrid module. Next, we create a message object for the email. We use the sender email constant as the value of the from property and the three parameters we passed into the function as the values of the remaining properties. Last, we send the email by calling sendgrid Send function with the Message object and then return the response. In our example, we demonstrate how to send an email when a user submits a form. To do this, let's go to our page code. First, we import the Send Email function from our backend code. Then we create an onclick event handler that's triggered when a user submits the form. In the event handler, we call the Send email function with the information provided by the user in the form. Remember that this is just one example, and that you can implement this logic for your own use case.

You can see the full code for this example on the Velo example site. For more information, you can check out the Velo tutorial in the Help Center.