Learn how to use webhooks with Mattermost slash commands 🦄

Tanay Pant
Apr 27, 2020 · 9 min read

Recently, I have been working a lot with webhooks and n8n. Webhooks have first-class support in n8n and can be used to enable powerful workflows. n8n is a fair-code 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 Mattermost, it is an open-source messaging alternative to Slack.

End result of the ‘Cocktail Suggestion Workflow’

Before moving forward, let’s quickly talk about what webhooks are. Webhooks are used to send automated messages from applications such as Mattermost, PagerDuty, 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 slash command (/remind) was issued on Mattermost or maybe an incident was created on PagerDuty.

n8n has a webhook trigger node 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.

Install n8n

npm install n8n -g

You can also run n8n using Docker. Once you have installed n8n, you can start it using the following command:

n8n start --tunnel

Note: Make sure that you don’t forget to add the --tunnel parameter.

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

Creating a Webhook node in n8n

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

  1. Production: 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 global default or you can specify that on a per-workflow basis in the workflow settings. You will then see the data from the workflow under ‘Past Executions’.
  2. Test: 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.

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.

Authentication: 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).

HTTP Method: You can define whether the request will use the GET or the POST HTTP method.

Path: 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 webhook.

Response Code: Here you can specify the HTTP response code to return. You’ll probably want to keep it set at 200.

Response Mode: This defines when and how to respond to the webhook. Here we have two options:

  1. On Received: This option sends the defined response code back as soon as it receives data from the webhook.
  2. Last Node: 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.

Response Data: This option becomes visible if you selected the Last Node for the Response Mode. Here you have three configuration options:

  1. All Entries: This returns all the entries of the last executed node and always returns an array.
  2. First Entry JSON: This returns the JSON data of the first entry of the last executed node. This option always returns a JSON object.
  3. First Entry Binary: This returns the Binary data of the first entry of the last executed node. This option always returns a binary file.

Cocktail suggestion workflow

1. Webhook Node

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 video of me following the steps mentioned above. I have also shown how you can save and activate the workflow.

Creating and configuring a Webhook node in n8n

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 cocktail as the Command Trigger Word and I added the Test webhook URL that I copied from the node.

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 /cocktail command.

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 video of me following the steps above.

Adding a slash command in Mattermost

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!

Response from the slash command in the Webhook node

2. HTTP Request Node

We’ll use TheCocktailDB 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:

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 video of me following the steps mentioned above.

Creating and configuring the HTTP Request node

3. Mattermost Node

You’ll need to add the credentials from your Mattermost instance to get the node to work. Here’s some detailed information 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.

Note: 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.

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:

Current Node > Input Data > JSON > drinks > [Item: 0]

This is what I ended up selecting for the Message field:

Why not try {{$json["drinks"][0]["strDrink"]}}?{{$json["drinks"][0]["strInstructions"]}} Serve in {{$json["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:

Current Node > Input Data > JSON > drinks > [Item: 0] > strDrinkThumb

Here’s a video of me following the steps mentioned above.

Creating and configuring the Mattermost node

Now if you click on Execute Node, this should send a message to your Mattermost channel where you issued the /cocktail command.

Note: Make sure to click on the Execute Workflow button before trying out the complete workflow.

Here’s a video of me issuing the command on Mattermost and getting a lovely cocktail suggestion 🍹

End result of the ‘Cocktail Suggestion Workflow’

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.

Note: 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.

Don’t forget to tell your colleagues about the new slash command 🙂

Next Steps

Did you decide to use different services, APIs, or used other nodes? Don’t forget to submit your workflow here. You can find the workflow that I created for this tutorial here.

Summary

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 Twitter or ask for help on our forum 💙

This post originally appeared on n8n.io blog.

n8n.io

Turn ideas into reality

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store