Setup a Custom Webhook URL in 30 Seconds

This App lets you easily setup a fully customizable webhook url to handle events from external services. It can be forked, extended and tested with different payloads within the Autocode editor, and when ready, deployed with just a click of a button.

$ curl --request POST \
    --url "https://YOUR_USERNAME.api.stdlib.com/my-webhook/" \
    --header 'content-type: application/json' \
    --data '{
  "some_data": "This is sample data",
  "more_data": "More sample data"
}'

# OR

$ curl --request GET \
  --url 'https://YOUR_USERNAME.api.stdlib.com/my-webhook/?some_data=%22This%20is%20sample%20data%22&more_data=%22More%20sample%20data%22'

TLDR (30s)

To quickly get your own webhook url, install the app to your Autocode account by pressing the green button above. You can change the name of the project if you'd like as it's reflected in the webhook url that's generated. Once you've installed the App, click Continue to Manage Apps. From there you can view your live webhook url. You can click on the Logs button to see live payloads/headers logged as requests come in.

How It Works

When your webhook is deployed on Autocode, the endpoint listens to incoming requests. It accepts both GET and POST requests. The parameters passed in from either the request body or querystrings are parsed out and included in the context.params object. context is a magic parameter that we populate automatically. It must be the last parameter in the list of parameters you define in your function signature. You can access the headers or the actual request body and other useful data from within the context object:

/**
* An HTTP endpoint that acts as a webhook for HTTP(S) request event
* @returns {object} result Your return value
*/
module.exports = async (context) => {
  let result = {};

  console.log('params:', context.params);
  console.log('headers:', context.http.headers);
  console.log('body:', context.http.body);

  return result;
};

You can also pass in named parameters with type checking included out of the box based on the FunctionScript specification. Simply include the named parameter as an argument in the function and update the comment above the function defining the name and type of that parameter it should expect:

/**
* An HTTP endpoint that acts as a webhook for HTTP(S) request event
* @param {string} name
* @param {number} age 
* @returns {object} result Your return value
*/
module.exports = async (name = "Bob", age, context) => {
  let result = {};

  console.log('params:', context.params);
  console.log('headers:', context.http.headers);
  console.log('body:', context.http.body);

  return result;
};

Forking and Customizing your Webhook

To add custom logic to your webhook, fork it to a sandbox, then click on the newly created sandbox (in this case the new sandbox is called dev). You'll be brought into the Autocode editor. Open the functions/__main__.js file to view and add any custom logic for your webhook. You can add whatever custom handling logic you'd like to the webhook at anytime.

When you're ready to deploy your webhook url and start listening to incoming events, all you need to do is press on the blue Deploy button at the bottom left corner of the editor:

Once it's deployed, the url displayed is now ready to handle events from any external service. You can also view real time logs by clicking on the View Logs button in the same corner of the editor.

The webhook url follows the structure below, and allows you to make requests to different versions of your deployed webhook:

https://YOUR_USERNAME.api.stdlib.com/my-webhook@SANDBOX_NAME_OR_RELEASE_VERSION/

For example to make a request to a deployed sandbox called dev the webhook url is:

https://YOUR_USERNAME.api.stdlib.com/my-webhook@dev/

And to make a request to a deployed release version 1.0.0:

https://YOUR_USERNAME.api.stdlib.com/my-webhook@1.0.0/

If no version or sandbox is supplied in the url, it will default to the latest released version of the webhook:

https://YOUR_USERNAME.api.stdlib.com/my-webhook/

Note: Make sure you include the / at the end of the url otherwise it will be redirected and the payload will be dropped.

Testing with Payloads

You can test your webhook url before deploying it from within the Autocode editor.

Press on the Edit Test Event Payload at the top of the endpoint file:

That will open up the payload editor where you can enter a JSON formatted payload for testing:

Once you've finished setting a test payload and saved it, click on the green Run Test Event button at the bottom right corner of the editor. That will then open up a console displaying any logs or errors you may have:

That's it!

Thanks for checking out this App! Hope it helped, if you have any questions please feel free to join our community Slack channel from the Community Tab in the top bar of the page. You can also follow the Autocode team on Twitter for updates @AutocodeHQ.