Unlock seamless workflows and faster delivery with our latest releases – get the details

Using webhooks and Netlify functions for email notifications in Sanity

42 replies
Last updated: Apr 5, 2022
Hey everyone. Anyone knows any good method to use webhooks to handle email notifications when a new document is created in Sanity? I’m collecting form submissions and need to have some sort of notification whenever a new one comes in.
Apr 2, 2022, 3:38 PM
Hi Guillermo - you could have your web hook sent to an email service with an endpoint setup for that link d of thing, or have it sent to a server less function that sends the email. Are you already using some sort of email service?
Apr 2, 2022, 5:56 PM
Not at the moment. I wanted to try with Zapier but the web hooks feature is for paid plans only.
Apr 2, 2022, 5:59 PM
What is your hosting service?
Apr 2, 2022, 6:01 PM
I ask because Netlify has a starter function for sending an email.
Apr 2, 2022, 6:02 PM
I'm using Netlify. I know they offer a forms feature but I already built out the API to send the json payload from the form directly to Sanity
Apr 2, 2022, 6:02 PM
Yeah, I guess I could try to integrate that into my script after the data is sent to Sanity.
Apr 2, 2022, 6:03 PM
I have no idea how though
Apr 2, 2022, 6:03 PM
You have a front end form that posts data to sanity?
Apr 2, 2022, 6:03 PM
Exactly
Apr 2, 2022, 6:04 PM
Ok and does it create a new instance of a document like “formSubmission” or whatever you called it?
Apr 2, 2022, 6:05 PM
If if so - set up a webhook to fire when that document type is created and give it the form data a payload or “cargo”.
Apr 2, 2022, 6:06 PM
Precisely, each submission creates a new document using the schema I set
Apr 2, 2022, 6:07 PM
Great so set up a webhook in the Sanity admin and have it send the form data to either a server less function or some email sends service like sendgrid.
Apr 2, 2022, 6:07 PM
What’s your current email provider?
Apr 2, 2022, 6:08 PM
Yes! I created a hook and set up the GROQ query and projection to only create the payload with the form data I want. Now it's just a matter of sending that out as an email
Apr 2, 2022, 6:08 PM
Great - so you just need to send the data to a thing that will send the email - are you using netlify cli?
Apr 2, 2022, 6:08 PM
Currently none. It's a project for a client. I guess if thing get too complex I can always suggest paying for Zapier
Apr 2, 2022, 6:09 PM
No CLI… actually I've never used it before
Apr 2, 2022, 6:09 PM
But I can give it a try
Apr 2, 2022, 6:09 PM
Gimme a minute going to go to computer. BRB
Apr 2, 2022, 6:10 PM
Have you played with webhooks before?
Apr 2, 2022, 6:10 PM
There's no rush, I appreciate your help
Apr 2, 2022, 6:11 PM
This will be the first time using web hooks for me. I'm going all-in in the jamstack for this project 🙏
Apr 2, 2022, 6:12 PM
OK, cool, so first thing you should do is set your webhook (assuming you are still just testing now) to post data to a place where you can see it. I've used this: https://webhook.site/#!/b239db54-9e8d-47f7-84fb-26be1f7f19a3
Apr 2, 2022, 6:14 PM
basically you can see how your data will look as it is shipped to the url that will accept it - just obiviously don't zap around private info
Apr 2, 2022, 6:15 PM
actually just go to webbook.site , it will generate a new unique url for you to post to
Apr 2, 2022, 6:16 PM
or this one is even simpler: https://requestcatcher.com/
Apr 2, 2022, 6:16 PM
Oh nice. So I can actually see the data I'm sending
Apr 2, 2022, 6:17 PM
exactly. So once you get that working, you can then send it to either a service designed for this (like SendGrid or something), or too a serverless function that will take the data and send the email. Like all things, a certain amount can be done for free, and then if it's super large volumes you end up paying, but how many emails are we talking?
Apr 2, 2022, 6:21 PM
actually gonna delete that example, there's a clearer one, hangone
Apr 2, 2022, 6:23 PM
Interesting how everything starts working together… I'm not anticipating a large volume of messages. At most two or three per day
Apr 2, 2022, 6:23 PM
If you are on netlify I really reccomend using netlify cli - it makes function creation really simple. I was worried at first it was going to mess in weird ways with my stuff but it is very non-intrusive
Apr 2, 2022, 6:24 PM
brb again
Apr 2, 2022, 6:24 PM
Awesome. I'm reading up on it as we speak
Apr 2, 2022, 6:25 PM
what's cool is that there is an in-the-web console where your function logs, so instead of seeing the payload on requestcatcher, you see it in that netlify window when your function gets the hook. and/or you can also test them locally. Here's the out-of-the-box nodemailer that Netlify has as an example function. You should be able to find all the data sent with the webhook in the
event
parameter. ALso, Netlify will use .env vars and node packages you define in the top level of your repo., anyway here's my copy/paste of that example email function: https://gist.github.com/bacalj/bc57aceeb7ee89a4b907563a41cb46d9
Apr 2, 2022, 6:32 PM
(because instead of sending your webhook to requestcatcher, you are going to send it to the url netlify sets up for your function, like www.mythingwhatever/.netlify/functions/my-function
Apr 2, 2022, 6:33 PM
AWESOME
Apr 2, 2022, 6:34 PM
😀 this is all extremely helpful
Apr 2, 2022, 6:34 PM
awesome, I was extremely jazzed when I first started playing with netlify functions, amazing what you can do
Apr 2, 2022, 6:35 PM
Yeah, I'm learning a lot of stuff week after week, went from basic React/Next to Sanity backend, multilingual sites, ISR, APIs and now web hooks.
Apr 2, 2022, 6:38 PM
I ended up setting up SendGrid after all. It was pretty straightforward to plug in the code into my existing api. Now after the form is sent, it creates a new document in Sanity and sends off the data in a nicely formatted email. Thanks for all your help!
Apr 4, 2022, 7:27 PM
Awesome!
Apr 5, 2022, 3:13 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?