This tutorial will take you through the process of setting up an implementation of the Thanked webhook on Glitch. All you need is a URL on the public web that can receive HTTP POST requests, and if you don’t have one, this tutorial walks you through the process of getting one.
Thanks is an important feature of Glitch that allows viewers to express their gratitude to both project and playlist creators, and that’s why we chose it to begin experimentation with webhooks.
Note: Are you not yet a part of our community testers group? Let us know in the signup thread so you can get access to a testers-only section of our community forum where we announce testing and tutorials like this one.
What you’ll need to start:
- A Glitch account (you do not need to subscribe to Pro)
- A public URL that can receive HTTP POST requests (a Glitch project would work great for this, but some other popular webhooks receivers include Discord, Slack, Zapier, etc.)
Part One: How to set up a Thanked webhook on Glitch:
- Go to https://preview.glitch.com and log in.
- Hover over your avatar in the top right corner and go to “Account Settings”. It should take you to the webhooks page by default for now.
- Put the URL of an app that can receive webhook data in the URL box. If you don’t already have a destination for your webhook data, check out Part Two: How to set up a webhook receiver below.
- At this point, you’ll see information about the webhook you created on your Account Settings’ Webhooks tab. The green indicator at the top will tell you that our backend systems are ready and waiting to fire webhooks whenever you get thanked!
- When another user clicks on the “Thanks” button on your profile, projects, or playlists (not just on preview.glitch.com—on glitch.com too!), your webhook receiver should get a POST request.
- If the URL you’ve set for your webhook returns a status code in the 400s or 500s, we will retry a certain number of times, but if the error persists, we will automatically “deactivate” that webhook. The information we have about what happened will be displayed, the green indicator will turn red and no further webhooks will be triggered when your account is thanked on Glitch.
- Take a look at the webhook destination’s code and correct whatever error is causing the HTTP errors to be returned to Glitch’s webhooks processing. If you made a mistake with the configured URL, delete the webhook and create a new one with the correct URL.
- Once you think you’ve got everything set up properly, click the “Reactivate” button in the webhook’s settings. The next time someone thanks you on Glitch, we’ll try sending webhook data again.
Part Two: How to set up a webhook receiver
To receive webhook data, all you need is ownership of a URL on the public web that can receive HTTP POST requests! Thankfully, you’re already on glitch.com, a fantastic way to set that up. And of course we’ve got an app you can remix, if you’re looking to get started quickly.
- Open https://glitch.com/~fastify-webhook-receiver and remix the project.
- Follow the project’s instructions to update the public/client.js to make sure that the new WebSocket constructor is given the wss:// URL to your project’s glitch.me subdomain. This will make sure that whenever you receive webhook data, it makes the page on your Glitch project’s frontend do exciting things!
- If you came to these instructions via the Part One: How to set up a Thanked webhook on Glitch above, pop back to your account settings page and put the full URL to the webhook endpoint (by default, the link will look like https://[YOUR-PROJECT].glitch.me/webhook) into the URL box and hit “Create.”
A note about Webhooks: If you send an HTTP response code in the 400-599 range, Glitch will send repeat requests to your endpoint. If your webhook receiver performs some operation where repeated runs would cause problems, make sure it returns a response with a status code in the 200-299 range so we know that the message was received and handled.
Feedback
Here are some questions we are very interested in getting some answers for!
- The webhook data should comply with the CloudEvents 1.x specification— do you notice any issues with that? Does the resulting JSON schema seem easy to work with?
- What things that happen on Glitch would you like to see us support sending webhooks for next?
Bonus missions (in terms of increasing difficulty)
Your mission, should you choose to accept it, involves webhooks…
- Make a friend on the forum who will help you test your “Thanks” by clicking the button on your profile for you, and vice-versa!
- Set up a webhook receiver on another provider (Fastly Compute? Some other “serverless” function host? Your own server with a decade-old nginx config?)
- Set up a webhook receiver that better communicates the spirit of Thanking on Glitch!
- Make a webhook receiver that displays a web frontend with chromakey background, then set it up as a Browser Source in OBS and display live Thanks reactions on your Youtube/Twitch stream!