Netlify to Discord Webhooks

I bridged Netlify webhooks to Discord using IFTTT

Published:

This site is run using Netlify currently. While Netlify is great and all, I was having a hard time getting webhooks (essentially a more complex notification sent to another server, in this case Discord) working. At first I thought it was my Discord server having issues, but my GitHub webhooks were working fine. So I knew it was a Netlify issue.

Upon doing some research, I discovered that you have to send your POST through the Slack option in Netlify, and just add /slack to the end of the webhook URL. I learned this from phalcon.io. The issue with this is that you need to have a Pro account with Netlify in order to use the Slack menu. So I decided to try to bridge the webhook using Webhook Relay, which seems like a nice service. It was just too complex for me to use sadly.

Then I remembered IFTTT exists. In order to get the notifications I wanted, I would have to make three applets there. One for Netlify starting a build, one for it succeeding at building, and one for a build failure (most important notification).

My webhooks ended up looking like this:

Webhooks 6


Instructions to add your own:

  1. To create the first of these applets, go into IFTTT and do If Webhooks.

    Webhooks 1

  2. The only option for a webhook is to “Receive a web request”, so choose that.

    Webhooks 2

  3. Now name your webhook. This is where you have some freedom, but keep it descriptive of what the action happening with Netlify is. I put netlify_build_start for this example.

    Webhooks 3

  4. Create the trigger, then put do Webhooks for “That”.

  5. Select “Make a web request”. You’ll be greated by a lot of options. To get what goes in URL, go into the server settings for the server you are adding the webhooks on. Go to the webhooks menu, then click “Create Webhook”.

    Webhooks 4

  6. In the menu that appears, you can customize a lot. I customized it as below, setting the picture as the Netlify Logo.

    Webhooks 5

  7. Copy the “WEBHOOK URL” from Discord, press Save, then go back to IFTTT. Paste it into URL. Change “Method” to POST. Change “Content Type” to application/json.

  8. For Body, I designed my embed with DiscoHook. But you can just copy the following code in, using the code corresponding with what notification this applet is for.

    netlify_build_start.json (click to expand/collapse)
    {
      "embeds": [
        {
          "title": "Netlify Build Started",
          "color": 57599,
          "author": {
            "name": "Netlify",
            "url": "https://app.netlify.com/",
            "icon_url": "https://www.netlify.com/v3/static/favicon/favicon-32x32.png"
          },
          "footer": {
            "text": "{{OccurredAt}}"
          }
        }
      ]
    }
    


    netlify_build_success.json (click to expand/collapse)
    {
      "embeds": [
        {
          "title": "Netlify Build Success",
          "color": 9305088,
          "author": {
            "name": "Netlify",
            "url": "https://app.netlify.com/",
            "icon_url": "https://www.netlify.com/v3/static/favicon/favicon-32x32.png"
          },
          "footer": {
            "text": "{{OccurredAt}}"
          }
        }
      ]
    }
    


    netlify_build_failure.json (click to expand/collapse)
    {
      "embeds": [
        {
          "title": "Netlify Build Failed",
          "color": 16515072,
          "author": {
            "name": "Netlify",
            "url": "https://app.netlify.com/",
            "icon_url": "https://www.netlify.com/v3/static/favicon/favicon-32x32.png"
          },
          "footer": {
            "text": "{{OccurredAt}}"
          }
        }
      ]
    }
    
  9. Now you need to setup the initial POSTs to these from Netlify. First, go here, then click documentation in the top right. Put in the name of the applet that you set in step 3, then copy the link.

  10. Now you can go back to Netlify and put this link in as your Outgoing Webhook. Make sure to put the correct action with the right webhook.

  11. Repeat steps 1-10 for as many Netlify actions as you want, and you’re done!