Useful Github Actions: Discord Webhooks

If you are a developer, you might find webhooks useful. But what exactly is a webhook and why is it useful? In this post, we will find answers to these questions.

I’ve recently joined a drone team of 24 people in total and we are making a firefighting drone to compete in Teknofest, a nation wide competition, so keeping eachother updated of our progress can be a problem sometimes. To solve this we needed to find a way to send a message tagging everyone on our discord server. Of course we could’ve done something similar to this with the built in webhook supports on these platforms but we wanted more customization so we had to manually create an automation.

We thought, what better opportunity to learn Github Actions? So we started working on it with our team leader Mustafa Burak Besler and finalized our Action in short time.

Mustafa Burak Besler - Medium

Webhooks are a way for apps to communicate with each other automatically. They allow you to send real-time data from one application to another whenever a given event occurs. And in our example, we’ll make Discord and GitHub communicate whenever an event that we want happens.

Our goal was to send a message on a channel in a Discord Server. The way to achieve this goal can be summed up in a few steps:

1. Create a Discord Webhook
2. Create a Github Actions file
3. Run the action whenever an event of selected type happens
4. Send a request to our webhook whenever our action is running

Creating a Discord Webhook

1. Open your server settings
2. Click “Integrations” on the left menu
3. Click “Webhooks”
4. Click the blue colored “New Webhook” button
5. Select a channel for your Webhook and Change it as you wish
6. Copy the webhook url

Steps 1 through 3

Steps 4 & 5–6

Creating a Github Action

1. Open your repository
2. Navigate to “Actions” page using the tabs on the upper side of the page
3. Click on “New Workflow”
4. Click on the blue text that says “Skip this and set up a workflow yourself”

Step 2

Step 3 & 4

Writing the YAML File for Our Action

Our yaml file needs to contain a few fields to work as a Github Action, these fields are:

• name: Name of our action
• on: Events that trigger our action
• jobs: Part where we define our jobs, in our case, sending a request to our webhook.

So let’s start by putting these in our yaml file

name: Webhook on Event
# Make sure to change what triggers your action based on your needs
on: [milestone, create, delete, fork, issues, member, pull_request, pull_request_review, issue_comment, push]
jobs:
  # ID of our job
  webhook-request:
    # OS to run our job on
    runs-on: ubuntu-latest
    steps:
    - name: Send a request to webhook
      run: ...

This is basically the structure of our file, all we need to add is the “run” part which is the part where we send our request using curl. But we need to create our message before we send a request.

Our Discord webhook needs a JSON that contains a username and a content which is our message.

{
  "username": "Custom Username",
  "content": "Hello, Discord!"
}

Huge thanks to Mustafa Burak Besler who sent me this code, helped me through the development and gave the idea in the very first place. This was going to take a lot longer if it wasn’t for his efforts.

Content of the message can be anything you want, in our case it will be an embed to meet our aesthetic needs. Which also means we have to add a few more fields to our JSON. Feel free to skip this part if you already have your message set up.
You can use online embed makers to easily create your embed message, after that step, just paste the “embeds” part to the JSON we provided. Doing this will make our payload look like this:

{
  "username": "Custom Username",
  "content": "Hello, Discord!",
  "embeds": [
          {
            "type": "rich",
            "title": "Embed Title",
            "description": "Embed Description",
            "color": 2123412,
            "thumbnail": {
              "url": "Your thumbnail url"
            },
            "author": {
              "name": "${{ github.actor }}",
              "url": "https://github.com/${{ github.actor_id }}",
              "icon_url": "https://avatars.githubusercontent.com/u/${{ github.actor_id }}?v=4"
            },
            "url": "Url to redirect to after clicking the title."
          }
        ]
}

Now that we added our embed too, we are now ready to write our curl command and finalize our Github Action.

Our curl command will be made of a few parts that define:

• -d: The data we send
• -X: Type of the request we send, which is POST
• -H “Content-Type”: Type of the content we send, “application/json” in our case

name: Webhook on Event
# Make sure to change what triggers your action based on your needs
on: [milestone, create, delete, fork, issues, member, pull_request, pull_request_review, issue_comment, push]
jobs:
  # ID of our job
  webhook-request:
    # OS to run our job on
    runs-on: ubuntu-latest
    steps:
    - name: Send a request to webhook
      run: |
        RESPONSE=$(curl -H "Content-Type: application/json" -X POST -d '{
        "username": "GitHub",
        "content": "@everyone",
        "embeds": [
          {
            "type": "rich",
            "title": "New Changes",
            "description": "New changes on DroneGPS repository by ${{ github.actor }}",
            "color": 2123412,
            "thumbnail": {
              "url": "https://avatars.githubusercontent.com/u/160980408?v=4"
            },
            "author": {
              "name": "${{ github.actor }}",
              "url": "https://github.com/${{ github.actor_id }}",
              "icon_url": "https://avatars.githubusercontent.com/u/${{ github.actor_id }}?v=4"
            },
            "url": "https://github.com/***"
          }
        ]
        }' ${{ secrets.WEBHOOK_URL }})
        echo "Webhook server response: $RESPONSE"

Here is the finalized version of our Action, but as you can see it has a little difference. The difference is we assigned our curl request to a variable named RESPONSE to be able to use echo command to see the response Discord returned, feel free to delete that part if you wish to, curl command by itself is enough for this to work.

You need to replace the part that comes after -d in the curl command, to send your own message. And the url that we send our request to is a secret, but how do we set secrets?

1. Click on setting on your repository
2. Click “Secrets and Variables” under “Security”
3. Select “Actions” from the dropdown menu
4. Click the green colored “New repository secret”
5. Name the secret as “WEBHOOK_URL”
6. Paste your webhook url from Discord in the “Secret” field

Step 2&3

Step 4 throgh 6

You can always delete ${{ secrets.WEBHOOK_URL }} that comes after the comma and replace it with the actual URL. This could be useful if don’t have access to some repository settings etc.

Your new Github Actions should be good to go after completing these steps.

Here is the output: