- Hi there and welcome to module 3.7, Webhook Overview. Now in this video you are going to discover how to set up a Webhook with your autoresponder. Now for any reason if you don't see your third party tool, your autoresponder integrated natively with Clepher yet, or you simply don't want to use Zapier or Integromat or you don't see your autoresponder integrated with Zapier or Integromat as well, then the Webhook might be a good solution here as well. Now again this might seem a little bit daunting now for some reason, the word Webhook scares people. Now I was one of them before, but then I figured out how to read documentation, and to be honest, it all comes down to that. If you can read and understand how to read Webhook documentation, API documentation, it all makes sense and you are going to see how extremely easy it is once you know what to look for. To be honest, that's it. So without further ado, let's open right away. And just like that we're inside Clepher again and it is in this little video, you're about to discover how to set up the Ask for email address Flow with the Webhook cards. Now, this might seem a little bit daunting at first, Webhook codes and all that stuff, but it's actually quite easy once you know how to read developer documentation, and how to use that documentation in order to set up the Webhook card. Very, very easy stuff. Now, all you need to do in order to start the process we are going to click on the cog wheel right here going to dashboards and going to Flows right here. There we go. And this redirects us to the Flows manager. As you can see right here I've created a Webhook card overview and I'm going to open up that Flow by clicking on the Action button and clicking on edit. This redirects us to the Flow composer, and as you can see right here again, it looks similar to the other Ask for email address Flows we have created this far. The only thing that actually changed is this card. Now remember, for integrating our autoresponder natively, we use the ActiveCampaign integration cards, then in the video showcasing Zapier and Integromat mounts, we replace that card with an Action card that would have a tech to the subscriber, and whenever a subscriber was stacked, we send that data over to other Integromat or Zapier. And all we need to do in order to make the Webhook set up work is simply replacing this parts with the Webhook cards. You can actually find the Webhook card right here in the bottom, under Actions right here and you simply Drag and Drop it to the composer and I will do that right now so that you can see me setting up the actual Webhook card. But let's first check the current set abouts. There we go. Now, obviously in this specific card, I blurred some stuff out like my Account name and the API key, but that shouldn't be in the way of this overview. Now, as you can see right here, we start this card with a title, we can choose between four request methods, GET, POST, PUT and DELETE. For this specific purpose, we need to use POST. And we have a Request URL provided by ActiveCampaign in this case. And they need us to provide a header for authentication, in this case, the API token with my API key. And we have chosen to go with the Raw form of type instead of the Form-data. Very, very easy stuff. The request is actually that bunch of codes right here. And again, this might seem a little bit daunting, but all we are actually doing is setting this sniffers of code with the placeholders arrived there and those get replaced by the actual data of the subscriber. And that data is added to your autoresponder, your webinar platform or any other third party tool you wish to connect through a Webhook cards. And that's authorized to it in order to send an email, first name and last name to our autoresponder ActiveCampaign. And let me just show you how easy this is. Let me first close this up and open up this card so you can see me build it from scratch. Now, what I'm going to do first is I'm going to go to the ActiveCampaign developer documentation. There we go. Right here we are already in the right section. Let me just go up right here. There we go. So this is the developer documentation for the autoresponder we use ActiveCampaign and what we want to do, We want to create a new contact in our accounts. So we are going to navigate to the contact section. There we go, click on it, and we want to create or update a contact. There we go. Now again, I imagine that if you're not tech savvy, and you're seeing all this stuff, you're like, what the hell do I need to do right here? And I get that. You see all this code right here, and it might seem a little bit daunting. However, it's all about understanding how to read documentation. Right here we already have everything we need in order to set up a proper Webhook basically sending the subscriber's data to this autoresponder. Right here we can see create or update contact, yes, that's the Action we would like to use, right here we see a small label which has posts. So I immediately go ahead and go to my Clepher account right here, and I set this to POST. Super simple. I navigate back to the ActiveCampaign Developer Documentation, and I can see that this is the Request URL. So I'm going to simply select that and copy that, move back and replace the Clepher default URL and paste it in. There we go. Now, what I need to do, I actually need to change this name, your Account name into my actual Account name. And for this part of the video I'm not going to do that, but every order autoresponder, more or less works the same way you need to specify your Account name obviously somewhere in this process. In this case, it's inside the URL, and any respective application, actually wants you to authenticate. I know for a fact that ActiveCampaign needs a header, and they want to receive our API token. Basically our API key functions as a password. So once we actually make the call to this specific URL, the API key is in this case nothing more than the password that allows us to access that specific function. Again, for the setting up, I'm not going to do this right now, I'm just going to fill it up with a couple of access right there. I'm going to go to the developer documentation again, and simply get this entire code and copy it. Then I'll navigate back to Clepher again, I've already selected Raw, paste the code in right there, and now we want to tidy it up. I do know there are some other stuff right here, like field values, field one value and fields values etc, etc. This is basically the Custom Fields set up. This basically means that we can use this specific function, to send over Custom Fields and their values as well. However, for this short little overview, I'm not going to set that up. So what I'm going to do in order to make sure that I am not breaking the code is simply selecting the entire code, copy it and navigate to this website right here. It's called JSON Parser Online. We simply put in the code right here, We don't have any errors so far, but right now I'm going to delete this specific part. Let's see what happens on the right. There we go. It seems that we got some errors right there. And now we're just going to tidy up the cards in such a way that it actually works. There you go. So right now we have this clean code right there. We also included the phone, however, for this example I'm just going to delete that as well. Again, we got a little error, that's because of this little coma right there. So right now with this functional piece of codes, we can actually select all, copy and navigate back to the Clepher app, get rid of all the codes and paste it in. There we go. Now, all that that is left is basically replacing the email placeholder right here, with the actual email Custom Fields. The first name and the last name and we replace those with the personalization texts we got going on inside Clepher. And all I need to do right now is simply highlighting these things right there and replace them, with the Custom Fields and personalization texts. Very, very easy. I simply delete this right here, navigate to the little dots in the lower right corner of this field shots on email, click on it and it gets replaced. And there we go. So let's skip those other steps because it's actually a little bit redundant but showcasing you how to replace one of those data points with a personalization Tech Oracle of some fields. I actually think you can actually manage to replace those others as well. And this is actually how it looks like at the end, this way we set up our Webhook card. Very, very simple stuff. Frankly, the only way you need to understand is how to read developer documentation. Now, right now, what we did is basically set up the Webhook cards, in the exact way ActiveCampaign actually wants it. So again, they wanted to be a POST with the Request URL right here. We set that up as you can see right here, the authentication part, let me just go to that bar graph here and ActiveCampaign is actually telling us the API key should be provided as HTTP header and API token. So we added the header named it API-Token, and then we are going to add our API key right here. It basically boils down to copying and pasting. Then we go back to the documentation right here, we want to add a context. So we navigate to the context section, we are choosing for this specific purpose We could either go for create a context or create or update a contact, but I would like to have this option so that whenever a context is already existing using this specific Action we can also update the content, making sure that there are no errors and that any additional data is actually forwarded to our ActiveCampaign account as well. Now, what we did is basically copy this thing right here this piece of code, and we clean that code a little bit up using this specific app it's called JSON Parser Online, just google it and it's the first hit on Google. We put that code right here in a Raw Request at the bottom of this card. And we replace those placeholder values, with the Actual Custom Fields we want to send over to in this case, our Autoresponder ActiveCampaign. Let me just save it right here. There you go. Now let me save the entire Flow. And I've already did my work right here in this Webhook card, and now we're going to simply do a quick little test of this Webhook card and see if it actually worked. Now, I'm going to close this up because it's the exact same cards we have added right here in this sequence, in this Flow. So right there, I'm going to save it. Awesome. As you can see right here, we got no subscriber in this account under the name Stefan van der Vlag. There we go. And right now I'm simply going to go to the first card, open that up, go to triggers and click on the M.me link to preview this. This redirects us to the Messenger app. And for this specific purpose, I actually cleaned out the entire conversation so that we have a nice clean approach, a nice clean preview of the entire set up. So we are starting with the Get Started. But then again, we're going to click on that. There we go. Now once I actually click this, you probably think, okay this dude is going to click on the Get Started button. Now first, the Welcome Message will pop up. We are actually going to see the message tied to the M.me link we clicked. So there's a small hint right there. If you would like to send people, another message in your chatbot and they are not subscribed to your chatbot yet, you can simply send them an M.me link and they get a another message and they get the message tied to that specific M.me link instead of the Welcome Message. So let me just go ahead right here and click on Get Started. There we go. We lead in this Flow with that image, and we're going to leave our email address. And let's just also demo that Lead Magnet Delivery Flow as well. Yes, please send it. Awesome, alright so let me just navigate back to my ActiveCampaign Account. There we go. Let's just do a refresh there. And there we go. So we can actually see that this contact has just been added. So the Webhook card is functional and working. Alright cool. So now you actually know how to set up a Webhook card. Like I said, at the start of this little video it might seem daunting by hearing the word Webhook or code or whatever, but actually I've seen it it's actually quite easy to set it up. Now with that said, if you don't see your third-party tool, your first-party autoresponder integrated with Clepher yet there's two things you should do. First step is sending us a message over at support,
[email protected] and request your third-party tool to be integrated. And we'll make sure we get that integrated as soon as possible. To continue with this training, you can either go with the Zapier or Integromat integration, and use that software that middleware as that sends data over from Clepher to your third party tool, or you can use the webhook cards, in order to set up a semi-native integration. So to speak. If you run into problems with setting up your Webhook card, then also sent a message to support. We are here to help 24 seven. So for any reason, if your Webhook card set up doesn't give you the results you actually want, let's say sending a lead from Clepher to your third-party application, does send us a message. And we'll happily look at that Webhook card, and make the fixes for you. And helping you understand process a little bit more so that you can actually create those in the future yourself. And with that said, that concludes the Webhook cards, in this video. In the next video, you'll find a small roundup of what we actually discovered and learned in this module, and a few Action points you can take home. Basically the Action points are a summarized list that allow you to get a quick overview on what you actually need to do in order to complete this module for yourself.
