Webhooks

hey everyone michael from zano here in this tutorial i'm going to cover web hooks what they are and how to set them up in xano so we can connect them to third-party services so first of all what exactly is a web hook well a web hook is something that happens or an action that happens after something else is performed and that sounds kind of vague but let's go ahead and start to jump into this example and maybe it'll make a little more sense so today to explain web hooks we're going to use another service called

typeform and i just signed up for a free account in using one of their templates and let me go ahead and just quickly preview this so you can see it's basically just a contact form and you can say we get in touch we fill out it looks like they asked for a first name and then a last name an email address and then lastly what type of service i would be interested in for this fake company right so i might just say financial services hit submit okay but what happens with all that data where does

it go so i'm sure typeform might have a place to collect it but what if we want to incorporate this in our application maybe store this information in our database so we can actually use it so that is where webhooks come in handy so you'll notice at the top here there's a connect option and when that loads we can see there's integrations that they have already built in but they have this option for web hooks so we can simply add a web hook and you'll notice it'll ask for a url so we can actually create

a web hook and xano to receive this data so let me jump back to xano here and i'm going to jump to the api and into this demo group where there's no api endpoints and i'm going to just start it and point from scratch and i'll call this form submission and then we're going to make this a post and that's important for web hooks to use this post method so i'm going to go ahead and save that so we have a blank api endpoint here what i can go ahead and do in my function stack

i'm going to go to utility functions and there is a function here called get all input and in parentheses webhook so this will get the entire payload that gets sent to us and you can see there's some different encoding options most of the times it's going to be json for today we're going to use json that's why it's defaulted as that i'm just going to call this return variable payload here and then i actually don't need a response right now and i'll show you why in a second so we're just going to get all inputs

right now and this is pretty cool so i'm going to grab the endpoint url and let's go back and actually connect it here and hit save web hook okay and then let's go ahead make sure this web hook is on and type form and now we are connected so if i actually go to the share link and submit a live form and we go tell me more and let me enter in that similar information again so i'll type in my first and last name an email address and then a service that i'm interested and i

hit submit okay so it says all good but what just happened because we made that connection with the web hook that data has been sent to that url so let's jump back to xano and take a look so in zano if we go to the top right here and go to request history well we can see all the requests that were sent to this web hook that we set up and right here is that form i just submitted so what's really cool is we can go into this and i can actually open the inputs and

see everything that was sent to me from typeform it looks like we have an event id form response there's even a token and then we have our answers so we know in sequential order we had our first name last name email and then our different choices for what kind of service we're interested in and i can even keep expanding this we can see choice object has the consulting services so there's a whole lot of information in here for the point of this tutorial we just want to gather the answers and store it in our database

so that's it our first name last name email and the choice that they are interested in so i'm going to go to the database and let's set up a submissions table and i don't need the endpoints right now so i'll just go submissions so the first field is just our first name and then of course we have our last name and then i'll go ahead and add an email field for email and then lastly we could go ahead and do maybe an enum field for those services if it's going to be pre-defined but i'm just

going to go do a text field for uh just speeding up this video a little bit so we'll just say services there so those are all the questions uh and answers from my form submission so let's jump back to uh that web hook we set up and one thing i want to mention again about this get all input function is it allows us to store that entire payload uh in a variable in xano so that we can transform that data manipulate it maybe send it to another service or store it in a zano database we

can do really whatever we want with it at the power of the function stack so since we know the data is somewhere nested in this payload variable we need to actually find the correct path to get it out when we go to add it to our database so if i go back to request history and i'm just going to click on this bottom one the second one was a quick test that i ran but if we go ahead and look at inputs here well you can see that there's this copy button so this will actually

copy that entire input payload and why that's important is because we can use that with a feature called subpath and xano to actually get the correct path in this variable to grab the data we want so let's go ahead i'm going to go to database request now and do add record and we'll go ahead and do that for submissions here that table we just created so if i go ahead on this first line and say first name and just hover over my payload variable and select this sub path i can now paste in all those

inputs and hit define and this allows me just to visually traverse through all that data to get to exactly where i want and you can see there's my first name michael so if i just click on the that text right there you can see that xana will automatically create the dot notation to basically grab that data at this exact path so i can keep doing that now for each part of my response so i go back into form response answers and then we can see that once i go ahead and select last name there's a

very similar pass it up so you see the zero in one here that's because in the path of this variable there is something called an array or a list known as answers so zero and one are what's called indexes which is how we know a certain place in that list or array and indexes happen to start at zero so that's why you're seeing zero for first name so let's go ahead and keep doing this and i'm going to once again use this sub path feature because since we have a different data type here i think

this email path will look a little bit different and you can see yes it does so we have instead of text we have dot email after our index and let's also do services because this was a multiple choice we'll just go ahead and hit the drop down and answers and then you can see choice is nested all the way here in or i'm sorry services is nested all the way in this choice object here called label so if i go ahead and select that once again it will create that dot notation one other thing i

want to talk about real quick is sometimes when working with payloads from external services through web hooks or even external apis sometimes the response that they send us has a piece of data that we want to use but sometimes it's not actually in the payload for whatever reason for example maybe typeform doesn't require me to put in my first name and the first name isn't even a part of the payload right so what we can actually do because dot notation assumes that a value is actually there we can use this thing right here called get

filter so how that would look is i'm actually going to delete this here and just select this payload variable so we would start with the variable and then i could use this get filter here and now type in the path i believe is form response dot answers dot zero dot text so that in case it's not in our response we can define this default value here often times this might be null or zero depending on what type of data you're using but it could really be anything i could make this default name say mr or

joe or something so i can go ahead and update that and i'm just going to double check i have form response.answers.0 so that is the right path but you can see how that now looks versus our dot notation so this would just make it more flexible in case it doesn't find this exact path in my response because maybe it's not sent for whatever reason so let me go ahead and save and now we're ready to actually go ahead and run a new form submission and should get automatically added to our database so if i just

jump back to typeform and let me get this copy link again and i'll paste it back in my browser to rerun this anew now let's go ahead and type in uh someone new so we'll just go ahead and say we'll say aaron smith and i think i can just press enter here and we'll just say aaron tess.com and then lastly aaron will be interested in it management so i went ahead and hit submit so now our web hook should have been sent so we can come back to zano one thing we could do is we

could check our request history which i know it should be in there but let's jump to our database right away to see if that data got added correctly so if we go ahead now and look there's aaron smith his email and the service that he's interested in so just in review we were able to set up a web hook we used this post method we started with this get all inputs because that allows us just to grab all the input into a variable in zano we were able to use dot notation or the get filter

and also sub path to get the exact piece of data in that entire payload that we wanted and remember the get filter is flexible in case sometimes those answers may or may not be there and now we can really do whatever with the data of course here we went ahead and added it into our database record maybe you want to push it into another service um really the sky's the limit so i hope this video was insightful and helpful remember you can use the request history right here in zano to see what's being sent to

this endpoint typically we don't need responses in web hooks because we're probably not going to be pushing this to a front end but maybe sometimes you are so just keep that in mind in this case we didn't need one i hope the video was helpful uh if it was please go ahead subscribe to our youtube channel like this video so that people can find it and we'll see you guys in the next tutorial