How to automatically give kudos to contributors with GitHub, Slack, and n8n 👏
Tags: community, slack, github, automation
Published: 2020-09-29 09:14:04

---
title: How to automatically give kudos to contributors with GitHub, Slack, and n8n 👏
published: true
date: 2020-08-14 08:01:15 UTC
tags: community,slack,github,automation
canonical_url: https://n8n.io/blog/how-to-automatically-give-kudos-to-contributors-with-github-slack-and-n8n/
---

People are the heart of a community. Celebrating their contributions is a way to show them that we value them and appreciate all their hard work. We can give them a shoutout in our community’s [Slack](https://slack.com) workspace and also in our newsletters. And what could be a better way to appreciate their work by sending them some cool swag! Motivated by this idea, I created a workflow with [n8n](http://n8n.io), which gives us the contributors’ [GitHub](https://github.com) information in the Slack workspace.

![](https://cdn-images-1.medium.com/max/1024/1*vspl20vxlYWE0PWLqepi_w.png)<figcaption>Giving kudos to contributors with GitHub, Slack, and n8n</figcaption>

We will accomplish this through these four nodes:

1. [**_Webhook_** node](https://docs.n8n.io/nodes/n8n-nodes-base.webhook) — Triggers the workflow when the slash command is issued
2. [**_GraphQL_** node](https://docs.n8n.io/nodes/n8n-nodes-base.graphql) — Gets information using GitHub’s GraphQL API
3. [**_Function_** node](https://docs.n8n.io/nodes/n8n-nodes-base.function) — Filters and extracts the contributor’s email address
4. [**_Slack_** node](https://docs.n8n.io/nodes/n8n-nodes-base.slack/) — Posts the information back in Slack

When we issue a slash command in the Slack channel, the _Webhook_ node gets triggered, and our workflow starts. The _GraphQL_ node then executes a query to get the contributor’s information. The _Function_ node extracts the email address of the contributor and the _Slack_ node posts this information in the Slack channel from where the information was requested.

### **Prerequisites**

To get started with the workflow in n8n, you will need:

- [Node.js](https://nodejs.org/en/) or [Docker](https://www.docker.com/) installed on your machine to run n8n. You can also sign-up for [n8n.cloud](https://n8n.io/cloud) to get access to our hosted service (in beta)
- A [Slack app](https://api.slack.com/apps) for your workspace
- GitHub [Personal Access Token](https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token) for the GraphQL API

### **Install n8n**

> **Note:** If you’re using n8n.cloud, you can skip this section.

In case, you don’t already have n8n installed, you can do so with [npm](https://www.npmjs.com/get-npm) by issuing the following command:

```
npm install n8n -g
```

You can also run n8n using [Docker](https://github.com/n8n-io/n8n/blob/master/docker/images/n8n/README.md?ref=hackernoon.com#start-n8n-in-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](https://github.com/localtunnel/localtunnel)).

Typing “o” in the terminal will open the Editor UI for us.

Let’s get started with the workflow. I have also submitted this [workflow](https://n8n.io/workflows/563) on n8n.io, in case you’d like to skim through it. Please note that you will still need to configure credentials for Slack and GitHub.

### **1. Webhook node**

n8n has a _Webhook_ trigger node which will get triggered when we issue the `/github` slash command in a Slack channel.

**1. Adding the Webhook node**

To add the _Webhook_ node in the workflow, click on the '**_+_**' button. Under the **_Trigger_** section, select the _Webhook_ node. This creates the _Webhook_ node with the default parameters.

Leave the default parameters as they are, we will only change the HTTP Method. Select the ‘POST’ option from the **_HTTP Method_** dropdown list.

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

{% youtube jxnzqf0ocnM %}

**2. Adding slash command to the Slack app**

If you haven’t created a Slack app, go to the [Applications](https://api.slack.com/apps) page, click on ‘Create New App’ and give your app a name.

Under the _Add Features and Functionality_ section, select _Slash Commands_ and click on _Create New Command_. Enter ‘github’ as the command for the Command field. Get the test webhook URL from the Webhook node and paste it in the **_Request URL_** field. Since we are building the workflow, make sure to use the test webhook URL.

The data that is sent to the test webhook URL is displayed in the Editor UI. The test webhook stays active for 120 seconds and then gets deactivated. The Production URL is only registered when the workflow has been activated, but the data that is sent is not displayed in the Editor UI.

To give our app permission to post messages, select _OAuth & Permissions_ under the _Features_ section. In _Scopes_, under the _Bot Token Scopes_, click on _Add an OAuth Scope_ and select the ‘chat:write’ scope from the menu. Similarly, add the ‘chat:write.public’ scope.

Install the app in your workspace. Click on **_Execute Workflow_** button at the bottom of the n8n workflow editor, and issue the `/github harshil1712` (here ‘harshil1712’ is my GitHub username) command to trigger the _Webhook_ node.

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

{% youtube mTLvtPdtqCI %}

Go back to the n8n workflow editor and check the _Webhook_ node. You’ll see the response from our newly created slash command. Congratulations, your first n8n node is up and running!

### **2. GraphQL Node**

n8n has a _GraphQL_ node which can be used to execute GraphQL queries. We will use GitHub’s [GraphQL API](https://docs.github.com/en/graphql) in this node to get the contributor’s information.

**1. Creating a GraphQL node to get contributors information**

In the n8n workflow editor, click on **_+_** and select the _GraphQL_ node. We will have to specify the endpoint for the GraphQL API. We will also have to change the Request and Response Formats and add headers.

Enter the following link in the **_Endpoint_** field: [https://api.github.com/graphql](https://api.github.com/graphql). This is the link to GitHub’s GraphQL API. Select JSON from the dropdown menu, for the **_Request Format_** field.

The GitHub GraphQL API requires two headers for running any queries. The first header we will add is the User-Agent header. Click on **_Add Header_** in the **_Header_** section. Enter User-Agent in the **_Name_** field, and n8n in the **_Value_** field. Add another header for Authorization. Enter Authorization in the **_Name_** field. The value for this header will be in the following format: `bearer <GitHub-Personal-Access-Token>`

Replace `<GitHub-Personal-Access-Token>` with your GitHub Personal Access Token. The Headers should look like in the following image.

![Headers for the GraphQL node](https://cdn-images-1.medium.com/max/720/0*CtNk1c7jRBhhMGOY)<figcaption>Headers for the GraphQL node</figcaption>

> **Note:** While generating the GitHub Personal Access token, make sure to select repo and user under the Select scopes section.

![Selecting repo and user scope for GitHub Access Token](https://cdn-images-1.medium.com/max/1024/0*QZ0Nh9dQ-XgqiMtM)<figcaption>Selecting repo and user scope for GitHub Access Token</figcaption>

Copy and paste the following query in the Edit Query editor and click on the **_Execute Node_** button to execute the node. On successful execution, it returns the name of the contributor whose username you have passed.

```
query {
    user(login:"harshil1712") {
        name
    }
}
```

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

{% youtube mAVD70bUR18 %}

**2. Getting more contributor’s information like company, email, and location**

In the query above, we are passing the username statically, which will give us the information about only that contributor, for every slash command we issue. To make the query dynamic, we will fetch the username returned by the _Webhook_ node.

Connect the _Webhook_ node with the _GraphQL_ node. Open the Edit Expression editor for the **_Query_** field, and replace the username with `{{$node[“Webhook”].json[“body”][“text”]}}`.

You can also do this by selecting:

`Current Node> Input Data > JSON > body > text`

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

{% youtube 9Fxn00v7VoY %}

We are now getting the name of the contributor we want. Let’s get more information about them. We will update our query to get additional information like their email address, location, the company they work for, and their profile picture.

Copy and paste the below query in the Edit Query editor.

```
query {
    user(login:"{{$node["Webhook"].json["body"]["text"]}}") {
        name
        company
        location
        avatarUrl
        email
    }
}
```

On executing the workflow, you will get output similar to the following image.

![Output from the GraphQL node](https://cdn-images-1.medium.com/max/1024/0*AP3H-du_wwvKnG7q)<figcaption>Output from the GraphQL node</figcaption>

### **3. Function Node**

Some of the contributors on GitHub might have their email addresses private, and so we don’t get this information. But what if we want to get in touch with them, and thank them personally?

To get their email address, we will query their commits. The commit object contains information about the author like their name and email address. Let’s go ahead and update our GraphQL query so that we get at least 25 of their commits.

**1. Update the GraphQL query**

In the _GraphQL_ node, open the Edit Expression editor for the **_Query_** field. Copy and paste the query below in the editor.

```
query {
    user(login:"{{$node["Webhook"].json["body"]["text"]}}"){
        name
        company
        location
        avatarUrl
        email
        pullRequests(last: 25) {
            edges {
                node {
                    commits(last:25) {
                        nodes {
                            commit {
                                author {
                                    email
                                    name
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

```

Execute the node to see the changes in effect. The output now contains the email addresses and names of the authors who made the commits as well.

![](https://cdn-images-1.medium.com/max/1024/0*Dzum3DAdRIQjDNkz)<figcaption>Output from the updated GraphQL node</figcaption>

**2. Using Function node to filter the information**

One can observe from the output that we are getting a lot of repeated values for the email addresses. Also, some email addresses belong to different users. We will write a function to solve this and get the email address of our contributor.

n8n has a _Function_ node where we can add custom snippets to JavaScript code to transform data from the other nodes or if you want to implement some custom functionality. Click on the '**+**' button and select the _Function_ node. Replace the code in the _Function_ node, with the following code.

```js
let emails = [];
let tempEmails = [];

const name = $node["GraphQL"].json["data"]["data"]["user"]["name"];
const publicEmail = $node["GraphQL"].json["data"]["data"]["user"]["email"];

const username = $node["Webhook"].json["body"]["text"];
const nameRegex = new RegExp(name,"g");

if(publicEmail){
    // if public email address exists, push it to the tempEmails array
    tempEmails.push(publicEmail)
}

// looping through the pull requests
for(const edge of items[0].json.data.data.user.pullRequests.edges){
    // looping through the commits
    for(node of edge.node.commits.nodes){
        // Checks the name associated with the email address
        if(nameRegex.test(node.commit.author.name)|| node.commit.author.name == username) {
            // if name equals to contributors name or username, push the email address in tempEmails
           tempEmails.push(node.commit.author.email)
         }
    }
}

// Remove duplicates
emails = […new Set(tempEmails)]

// RegEx Pattern for email address generated by GitHub
let re = /^\w+(.)\*@users.noreply.github.com/

// Remove the email addresses Generated by GitHub
emails = emails.filter(email => !re.test(email))

return [{json:{emails,}}]
```

The above code takes the name and the public email address of the contributor from the _GraphQL_ node. It also gets the username from the _Webhook_ node. The code then verifies if the email address belongs to the contributor, and if it does, it pushes it to a temporary array. It then removes any duplicate values for the email addresses and stores them in the emails array. And lastly, it removes email addresses generated by GitHub and returns the emails array.

An important thing to keep in mind while using the _Function_ node is that it returns an array. So make sure you’re returning an array, rather than an object.

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

{% youtube kVymFzAErhE %}

We are now getting the email address of the contributor along with all the other information. Let’s post this in Slack.

### **4. Slack Node**

In n8n, you can perform a lot of operations with the _Slack_ node. You can create or archive channels, upload or get files from the workspace, add or delete stars from an item, and post or update messages in the Slack channels.

To add the _Slack_ node in the workflow, click on the '**_+_**' button, and select Slack. Select “OAuth2” from the **_Authentication_** dropdown menu. Add your Slack app credentials to the node by selecting “Create New” from the dropdown menu in the **_Credentials_** section.

Head back to the Slack App dashboard, and copy the Client ID and Client Secret from the App Credentials section. Paste them in the **_Create Credentials: “Slack OAuth2 API”_** editor in the n8n workflow editor. Copy the OAuth Callback URL from the editor. In the Slack App dashboard, select “OAuth and Permissions” and click on “Add New Redirect URL” under the “Redirect URLs” section. Paste the URL and click on “Add”. The last step is to connect the OAuth Credentials. Click on the **_OAuth_** button to connect the credentials and select “Allow”.

![Adding Redirect URL to Slack App](https://cdn-images-1.medium.com/max/1024/0*zJjp7JqnUPC7feMB)<figcaption>Adding Redirect URL to Slack App</figcaption>

By default, the _Slack_ node has Message as the Resource and Post as the Operation. If the setting is different for you, make sure to change them. To post a message on the Slack channel where the slash command was issued, we will add the channel id to the Channel field, which is returned by the Webhook node.

Copy and paste `{{$node[“Webhook”].json[“body”][“channel_id”]}}` in the **_Channel_** field. Alternatively you can use the Variable Selector to get this information. Open the Editor Expression editor, and under **_Variable Selector_** select: `Nodes > Webhook > Output Data > JSON > body > channel_id`.

Let us now add some styling and formatting to our message. Our message will contain a title, some text, and a thumbnail.

In the **_Attachment_** section, click on **_Add Attachment_** , and select **_Title_** from the Add Attachment Item dropdown menu. Open the Expression editor, and type “GitHub Details for:” in the editor and from the **_Variable Selector_** select Nodes > Webhook > Output Data > JSON > body > text.

From the **_Add Attachment Item_** , select **_Text_** , to add the Text attachment. Open the Expression editor, and copy and paste the following text:

```
*Name:* {{$node[“GraphQL”].json[“data”][“data”][“user”][“name”]}}

*Email:* {{$node[“Function”].json[“emails”].join(‘,‘)}}

*Company:* {{$node[“GraphQL”].json[“data”][“data”][“user”][“company”]}}

*Location:* {{$node[“GraphQL”].json[“data”][“data”][“user”][“location”]}}
```

To display the profile picture of the contributor, create Thumbnail attachment, by selecting the **_Thumbnail_** option from the **_Add Attachment Item_** menu. Open the Edit Expression editor and from the Variable Selector select `Nodes > GraphQL > Output Data > JSON > data > data > user > avatarURL`.

Here’s a video showing how to create the _Slack_ node, and get information from the Webhook node, the GraphQL node, and the Function node.

{% youtube SkW-E9iCNaU %}

> **Note:** Since the _Function_ node gives an array of email addresses, we will select **_Values_** from the menu, while adding the email from the node.

Execute the node, and your app will post a message to the Slack channel.

![](https://cdn-images-1.medium.com/max/1024/0*pEqmP2LcXICP_ssv)<figcaption>Output from the Slack node</figcaption>

The following video shows our workflow in action.

{% youtube pyxHqNsOA8M %}

To use the workflow in production, follow the instructions provided in the [documentation](https://docs.n8n.io/reference/server-setup.html). Make sure to use the production webhook URL for the slash command.

### **Conclusion**

Congratulations! You built a workflow that gives you the information of a contributor. You learned how to get started with n8n and how to add nodes to your workflow. You learned how to use the _Webhook_ node for capturing event triggers, the _GraphQL_ node to query information, the _Function_ node to write custom functions, and the _Slack_ node to post a message on Slack.

You can use this workflow to gather the information about your contributors, celebrate their successes, and appreciate them for their contributions! Using the GitHub API, you can also get their Twitter username. You can use the [_IF_](https://docs.n8n.io/nodes/n8n-nodes-base.if/) node to check for that, and use the [_Twitter_](https://docs.n8n.io/nodes/n8n-nodes-base.twitter/) node to tweet about them. You can even use the [_Mailgun_](https://docs.n8n.io/nodes/n8n-nodes-base.mailgun/) node to send them a personalized thank you message.

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](https://twitter.com/harshil1712) or ask for help on our [forum](https://community.n8n.io/) 💙

> This [post](https://n8n.io/blog/how-to-automatically-give-kudos-to-contributors-with-github-slack-and-n8n/) originally appeared on the [n8n.io](https://n8n.io) [blog](https://n8n.io/blog).