Transcription
We're going to connect NADN to Elementor Forms and have our form data and messages funneled into a Slack channel. We're using Slack as an example, but what we're doing here could work with thousands of tools. And you may have heard about NADM. It's basically like Zapier on steroids, and it's become the go-to for automations and AI agents. But what I like most about it is that it's almost open source, meaning we could self-host it on our own servers or even locally on our computers and have it all for free. Let me show you how this works.
Here's the Elementor form we're going to connect to NAN. First thing we're going to want to do is go to actions after submit, select add action, and then find the web hook. Once you select a web hook, you're going to see this option for a web hook URL. We'll come back to this in a moment, but now let's jump over to N8N.
Once you have it installed, you're going to have your dashboard. If you do want me to do another video on how to install this, definitely let me know. There are a few different ways you could install this on a server or you could install this on your computer locally. First thing to do, let's go create a workflow. Now, inside of our workflow, I'm going to rename this and call this my Elementor form. The first step that we are going to add is our trigger and our trigger is going to be the on web hook call. So go ahead and select that and we are going to change the get to a post.
Now we got this test URL and production URL. You're going to use a production URL when it is live and you activate it. But while we're testing it, we are just going to use a test URL. Let's copy it. Take this back over to our Elementor form and paste this in our web hook URL. Save it and let's go check and make sure it works. Before I fill out the form, go back here to NAN and select on listen for test event. So now it is running and it's waiting for something to trigger that web hook. And what's going to trigger it is filling out the form. Send message. And if all goes well, there should not be any errors. So this is good. If you do get an error, then something isn't connected correctly. Go back and start over. Okay. Now you can see it did get all of the data. You can see right here we have everything that we inputed into the fields.
Now the next step is we need to set up Slack. But before we go in and add a Slack node, it's going to be better to create our credentials. So go back to your dashboard. Go ahead and save it. And here we're going to go to credentials and create one for Slack. Now, this is going to work if you have something like notion, a sauna, whatever it is that you're using. You can go ahead and create a credential for it and it's going to make the process easier. Search for Slack and we're going to use a Slack API. Select on continue and let's get our access token and signature secret. To do this, we are going to go over to our Slack API.
This next step here is going to be similar but different depending on what tool or app that you use. Let's go over here to your apps. And this is hopefully going to help just to give a good idea. I already created an app, but what you would do here is create a new app. Here is mine. I have my signing secret. So, let me copy this. I'm going to go over here to my credentials and put it in my signature secret. And then I'm going to go back over to my API. And from here, I'm going to go to my OOTH. And I have my token. I'm going to copy this. So, let's go ahead and paste this in, save it, and see if everything's connected. And it is. We're good. It is successful. If it is not successful, you're going to have to go back through it.
Now, before we could continue, let's go back over to our application. And we see this notice up over here. And this is telling me that I need to install these changes into my actual app. So, here is my Slack space. I created a dedicated channel. And this is where I want my messages to appear. So, we need to install the chatbot on this. So, I'm going to go back here to reinstall your app. And this is just showing where I want the connection to go to. So, I'm going to choose my channel that I selected. And now, back in my channel, you can see I have the connection. And now we're good.
Let's go back over to Naden and to our workflow. And then we are going to add a new node that's connecting to the web hook. And this node is going to be the Slack node. They have already builtin nodes for several apps. If your app doesn't have a built-in connection in NAD, you could still use your APIs. For an example, I have connections to our circle community. It does not have it default built into NAN, but I'm able to use NADN tools. They're just a little bit more technical and take time to set up. If there's an API, it could work here. And remember our action is I want the data from the contact form to message us inside of our Slack channel. So let's find the right action and send a message. This looks like the right action here.
Now it already has everything connected. We have our Slack account which is our credential. It's already set up. So we're connected. Our message send message to. Let's select on channel. And now we could choose a channel. And we're going to choose the one where our bot is connected to. And then we got a simple message that is totally fine. And then our message text. I'm just going to put in testing right now, but we'll come back and fix that with the proper fields. Now, let's go ahead and execute the step. And it's waiting for the trigger. So, let's go back and fill out the form. Send message. And it was a success. Let's go back over. And you can see it pulled out all the data. It went through.
Now, let's take a look at our Slack. And we could see that we just got a message as well. So, let's go ahead and reconfigure all this so we can get our full message telling us the name, the email, and whatever field we were working with. The first thing we need to do is customize our message text. Let's go over to expression. It's just a lot easier to see everything. Hey, you just got a new message. And let's go ahead and give a space. And now this is where things get cool. Right here, let's grab the right details. So, right here, we can see our name. I'm going to drag this over and put this in my message text. And then I'm going to do the same thing for the email. Let's drop this in as well. And then let's go get our message. So, here is our message. We're going to drop this in.
Now, let's go ahead and execute it one more time. And you can see now we got our set message. We got the details testing. Okay. Now, let's go ahead and space it out, though. I want it to look good. You just want to go in and make sure you pick the right spot. So, I'm going to go right between these brackets and hit enter. So, we could break the line. And then you can see what the results are going to look like right here. Just be very careful not to break these brackets. Maybe you want to give a little bit of a space. And I like to get creative, so I usually put like emojis and stuff like that just to make it stand out. Let's go ahead and execute it one more time. And now we can see our message is here. It's working. We have our bot set up, our automation. No more contact form leads will get lost in emails.
There's one more step in order to make this live and finalize everything. That is going back out over to our web hook and then let's get our production URL. So we're going to turn this live. Let's go ahead and select on active. Let's go back over to our form. And then we're going to replace the web hook, the testing web hook with the live production web hook. Let's go ahead and publish this. All right. We're going to make sure this automation is live. Let's go ahead and send that message. And I'm just going to go back over to my Slack. And you can see here we got our message. This is now live. It's set up. It is good to go.
This example only scratches the surface. And right now I'm going down a deep rabbit hole with Nadn because I do see this as a powerful tool even for us web designers. So many possibilities. And if you would like to learn more, even things like how to install this on your computer and run it locally, just let me know inside of the comments. I'd be happy to create more content around this. Well, I hope you found value in it. If you do got any questions, then definitely let me know inside of the comments. Thank you for watching and I'll see you in the next video.