Recently, I have been working a lot with webhooks and n8n. Webhooks have first-class support in and can be used to enable powerful workflows. n8n is a licensed tool that helps you automate tasks, sync data between various sources, and react to events all via a visual workflow editor. In case you are not familiar with , it is an open-source messaging alternative to Slack. n8n fair-code Mattermost Before moving forward, let’s quickly talk about what webhooks are. Webhooks are used to send automated messages from applications such as Mattermost, , and essentially any product or service that supports them. The messages that are sent by webhooks are triggered when an event happens in the application. For instance, a ( ) was issued on Mattermost or maybe an incident was created on PagerDuty. PagerDuty slash command /remind n8n has a webhook trigger which allows us to create webhook integrations with ease. Let’s take a look at how we can utilize webhooks with n8n and make our personalized slash command on Mattermost powered by n8n. node Install n8n In case, you don’t already have n8n installed, you can do so with by issuing the following command: npm npm n8n -g install You can also run n8n using . Once you have installed n8n, you can start it using the following command: Docker n8n start --tunnel Make sure that you don’t forget to add the parameter. Note: --tunnel n8n has to be reachable from the web as the triggers of external services rely on that to be able to send data to the webhooks. To make that easy, n8n has a special tunnel service that redirects requests from n8n’s servers to your local n8n instance (uses ). localtunnel Typing “o” in the terminal will open the Editor UI for us. The webhook node in n8n To create a workflow node, click on the + button on the top right. Select the ‘Webhook’ node under the ‘Triggers’ section. This adds a new Webhook node. Here’s a GIF of me creating the Webhook node. Before trying to pull in some data with cool applications, let’s take a quick look at the configuration options of the node. Configuration options for the webhook node First of all, in the parameters section, we have the Webhook URLs. Clicking on that will reveal the URLs for the webhook. Here you have two options, let’s understand the difference between them. A Production webhook is only registered when a workflow has been activated (via the switch on the top right of the page). You will never see its data in the Editor UI. To save the executions, you can either set that as a or you can specify that on a in the workflow settings. You will then see the data from the workflow under ‘Past Executions’. Production: global default per-workflow basis A Test webhook is only registered in the time between executing a workflow via the UI and until the first call gets made (when it displays “waiting for Webhook call”). After the Test webhook gets called for the first time, it displays the data in the Editor UI, and then gets deactivated. Test: If you feel that the rest of the configuration details of the node are too dry for you, feel free to skip to the next section where we start playing around with this node. You can always return here to learn more about the node configuration. Here we have the option to add authentication. You can set the authentication to None, Basic Auth (username and password) or Header Auth (name and value). Authentication: You can define whether the request will use the GET or the POST HTTP method. HTTP Method: You can enter a path for your webhook. This is the path that the webhook will listen to. If you are not sure what to include here, just type in . Path: webhook Here you can specify the HTTP response code to return. You’ll probably want to keep it set at . Response Code: 200 This defines when and how to respond to the webhook. Here we have two options: Response Mode: This option sends the defined response code back as soon as it receives data from the webhook. On Received: This option returns the data of the node that was executed before the Webhook node. If the Webhook node is the only node (or the first node) in the workflow, this option would just return its own data as it itself would be the node that was last executed. Last Node: This option becomes visible if you selected the Last Node for the Response Mode. Here you have three configuration options: Response Data: This returns all the entries of the last executed node and always returns an array. All Entries: This returns the JSON data of the first entry of the last executed node. This option always returns a JSON object. First Entry JSON: This returns the Binary data of the first entry of the last executed node. This option always returns a binary file. First Entry Binary: Cocktail Suggestion Workflow I am always looking to make my colleagues laugh and in my pursuit, I created a Mattermost slash command that when called, sends out a random recipe for a cocktail. This is very useful for Friday evenings. Let me show you how you can do that too. 1. Webhook Node First of all, we’ll create a Webhook node on n8n using the same steps that we followed above. In the configuration, I set the HTTP Method to POST as I will be sending a POST request later on to this node. Always ensure that you are using the correct HTTP method for the Webhook node. For path, I have entered . Feel free to change that to something else according to your preferred naming convention. webhook After configuring the node, I clicked on Webhook URLs, selected the Test tab, and clicked on the URL to copy it. We’ll be using the Test webhook for the tutorial. Here’s a GIF of me following the steps mentioned above. I have also shown how you can save and activate the workflow. Now we need to create a slash command in Mattermost, which will trigger our workflow using the Webhook node. Go to your Mattermost instance and click on Integrations in the hamburger menu next to your name on the top left. In the Integrations menu, click on the Slash Commands option and then click on the button marked ‘Add Slash Command’ on the top right. This will then show you a menu to configure the slash command. For the settings, the most important options are the Command Trigger Word and the Request URL. I added as the Command Trigger Word and I added the Test webhook URL that I copied from the node. cocktail You can also click on the Autocomplete button and fill out the Autocomplete Hint or Autocomplete description to make it easier to discover and use the slash command. Once you are done with the settings, you can go back to your Mattermost instance and issue the command. /cocktail Note: Make sure that you click on the ‘Execute Workflow’ button at the bottom of your n8n workflow editor to register the webhook. Here’s a GIF of me following the steps above. Now, if we go back to n8n and check the webhook node, you’ll see the response from our newly created slash command. Congratulations, you got your first webhook working with n8n! 2. HTTP Request Node Now that we have a working Webhook node, let us add an HTTP Request node that queries an API, so that we can send a random cocktail recipe when somebody triggers the webhook with the command on Mattermost. /cocktail We’ll use to get information about a random cocktail recipe. There are multiple endpoints to the API as well as a test API key which will be perfect for our use case. Create the ‘HTTP Request’ node by clicking on the + button on the top right of the Editor UI. In the node configuration view, enter the following URL: TheCocktailDB https://www.thecocktaildb.com/api/json/v1/1/random.php When you click on the ‘Execute Node’ button, you’ll see that the node pull in the details of a random cocktail for you. Here’s a GIF of me following the steps mentioned above. 3. Mattermost Node The last step of this workflow is to pass on this information to the channel from which the command was queried. Create a ‘Mattermost’ node by clicking on the + button on the top right of the screen. /cocktail You’ll need to add the credentials from your Mattermost instance to get the node to work. Here’s some detailed on how to create an access token. I have used an access token from a bot account, but you can just use the access token from your account. information Made sure that all your nodes are connected in the following order to properly access the data from the other nodes: Webhook node > HTTP Request node > Mattermost node. Note: Once you have that, we’ll need to enter a Channel ID to specify which channel should the message be sent to. Since this will be a dynamic piece of information, we’ll click on the gears icon next to the field and select ‘Add Expression’. Once you have the editor open, select the following in the variable selector: Nodes > Webhook > Output Data > JSON > body > channel_id Perfect, now go back to the node configuration and fill in the information that you’d like to send to the channel in the Message field. Add the information that you’d like using ‘Add Expression’. You can find the different pieces of information that you are looking for in the variable selector under: Nodes > HTTP Request > Output Data > JSON > drinks > [Item: 0] This is what I ended up selecting for the Message field: Why not try {{$node[ ].json[ ][ ][ ]}}?
{{$node[ ].json[ ][ ][ ]}} Serve in {{$node[ ].json[ ][ ][ ]}}. "HTTP Request" "drinks" 0 "strDrink" "HTTP Request" "drinks" 0 "strInstructions" "HTTP Request" "drinks" 0 "strGlass" And finally, we can send a picture of the delicious cocktail by clicking on ‘Add attachment’ under Attachments. Click on ‘Add attachment item’ and select ‘Image URL’. To fill the Image URL field, select the Add Expression option again. Once you have the editor open, select the following in the variable selector: Nodes > HTTP Request > Output Data > JSON > drinks > [Item: 0] > strDrinkThumb Here’s a GIF of me following the steps mentioned above. Now if you click on ‘Execute Node’, this should send a message to your Mattermost channel where you issued the command. /cocktail Make sure to click on the ‘Execute Workflow’ button before trying out the complete workflow. Note: Here’s a GIF of me issuing the command on Mattermost and getting a lovely cocktail suggestion 🍹 Congratulations, you have successfully created the Cocktail Suggestion Workflow! Now, to make sure that the workflow runs permanently without you having to press the ‘Execute Workflow’ button before every slash command on Mattermost, we’ll need to use the Production webhook. To do that, you’ll just need to get the Production webhook URL from the Webhook node, update the URL for the slash command on Mattermost, and finally activate the workflow. This will make your workflow ready to use. When working with a Production webhook, please ensure that you have saved and activated the workflow. Don’t forget that the data flowing through the webhook won’t be visible in the Editor UI with the Production webhook. Note: Don’t forget to tell your colleagues about the new slash command 🙂 Next Steps As the next steps, you can try using webhooks from other products/services such as PagerDuty, so that a workflow gets triggered every time an incident report is created. You can also try enriching the cocktail information that is sent to the channel and check out what other functionalities the Mattermost node has. Did you decide to use different services, APIs, or used other nodes? Don’t forget to submit your workflow . You can find the workflow that I created for this tutorial . here here Summary n8n provides a powerful platform to create workflows. The Webhook node provides an easy to use interface which enables us to connect to a variety of services and unlocks many possibilities. I am currently working on a group of workflows to automate incident response playbooks and am using a lot of webhooks in it. Stay tuned for a detailed tutorial on that very soon! I’d be excited to check out what you’ve built using n8n! In case you’ve run into an issue while following the tutorial, feel free to reach out to me on or ask for help on our 💙 Twitter forum Previously published at https://medium.com/n8n-io/webhooks-fun-with-n8n-and-mattermost-4ebf7e2b4d2a

Slack

Twitter

Book a call

Read My Stories

Too Long; Didn't Read

Questions about cloud security? Get answers here.

Webhooks Fun with n8n and Mattermost 🍸

Too Long; Didn't Read

Companies Mentioned

Tanay Pant

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Webhooks Fun with n8n and Mattermost 🍸

Too Long; Didn't Read

Companies Mentioned

Tanay Pant

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES