🛎 How to add webhook superpowers to your no-code SaaS app - Issue #19

Hey there,

This week’s topic is adding webhooks to your app.

Until a few years ago, I used to find using and interacting with APIs super intimidating.

If you’re not a coder, they can be a bit intimidating and technical when getting started.

Webhooks are an awesome way to get started, and they can help add some super powerful features to your application.

At the most basic level - they allow your application to send and receive payloads of data.

This is super powerful as it can allow your application to do things in the background even when a user isn’t directly interacting with it.

My own app UserLoop relies on webhooks extensively. Once a user has connected their Shopify account, my application receives a webhook whenever one of their customers completes an order on their Shopify store.

The webhook payload contains tons of useful data and allows my application to trigger things like sending an email, all automatically.

This is just one example of the kinds of things you can do with webhooks, but the sky is really the limit!

In this issue, I’m going to cover two key use cases…

• Receiving webhook data into your app and triggering actions.

• Adding webhooks to your own application so users can be notified of changes to their own endpoints.

Receiving Webhook Data

The first example we’re going to look at is receiving webhooks into your Bubble app which you can then use to trigger off workflow actions.

To do this, we need to head to the ‘API Workflow’ section in Bubble.

This is where we can set up an endpoint for our app to ‘listen’ for webhooks.

To get started, set up a new workflow.

In my example, I’m going to give my API endpoint the name ‘send-survey’

There’s a couple of options you might want to set up here…

• Expose this public API workflow - this means the webhook endpoint can be called from outside your application

• This workflow can be run without authentication. In my example, I’m not worried about authenticating calls as this is an open endpoint. If you want to add your own authentication I covered this in a previous newsletter.

• Ignore privacy rules when running the workflow. For the purposes of this demo I’m not worried about privacy rules.

Then to define what fields your webhook endpoint will accept, you have 2 options.

• Manual Definition. You can enter manually the fields your endpoint is expecting. Any calls your endpoint receives will need to match the scheme you define here.

• Detect Request Data. This option lets you make a test call to the webhook, which Bubble with then use to automatically set up the fields & data structure for you.

Example of a webhook endpoint in the Bubble API Workflow section

Then you can dictate what workflow actions should run when this webhook endpoint is called.

In my example, I want to trigger sending a survey to a user.

If you’re looking for a free tool to build and test your webhooks, I highly recommend 2 tools.

• Webhook.Site. This website lets you quickly and easily generate endpoints to test your Bubble config.

• Postman. This app and Chrome extension lets you build out structured API calls to test your API based workflows.

Adding webhooks to your own application.

This one is a bit more of an advanced feature, but can give your app superpowers for more advanced users.

This lets them add their own webhook endpoints in your app’s UI so that they can be notified when things happen in your application.

For example, I have added the option for users to be notified on their webhook endpoint whenever they get a new response to a survey.

Here’s how it looks in my app’s settings…

Let users add their own webhook endpoints to your app

As you can see, in my integrations section I have a section for ‘Webhooks’

Here users add their own webhook endpoints, and my app will send a post to those endpoints whenever they get a new response.

To do this we need to start with a few things…

• Create a new data type for ‘Webhook’ this is the database entity that will store our user’s endpoints.

• Link your webhook field to your user (either as a 1:1 relation or as a list if you want users to be able to add multiple webhooks.

• In your apps UI, make a webhooks section and let users add their own webhook endpoints there. When they add a webhook, create it in the database and store it against the current user in a workflow.

Here's my workflow for creating a new webhook endpoint in my database

Once we’ve got all that set up, users can create and store their custom endpoints in your app’s database.

The next thing we need to do is send a post request to those endpoints whenever something specific happens in our app.

This is where things get interesting!

To set up this part, we need to head to the API Connector plugin.

We’re going to use the API Connector to send the post request to the user’s endpoint via a workflow.

So first of all, let’s set up a new endpoint in the API Connector.

Custom webhooks using the API Connector

As you can see, I’ve called my endpoint ‘Customer API’.

The API call is set to make a POST request, and the endpoint is set as [endpoint] - which means the entire endpoint is dynamic.

We’re going to inject each customer’s Webhook URL into this field using our workflows!

As you can see, I’ve then set up a bunch of standard parameters which are going to contain the body of data for the webhook and contain all the data about the given survey response.

So - once we’ve got this all set up and initiated, we need to head to the API workflow which we want to trigger the customer’s webhook being sent.

In my example, this is my ‘send-webhook’ workflow.

This workflow will trigger a POST to the cutomer's webhook endpoint

The workflow makes a call to the API Connector and injects all the required data, including the customer’s webhook endpoint we have stored in our database.

Using the webhook.test site, we can test the entire workflow and see the data our app sends out…

Example webhook POST from Bubble to user's custom webhook endpoint

And that’s it! Just like that you’ve added an incredibly powerful feature to your app.

This will also help reduce your app’s user churn, as users who have gone to the trouble of integrating and using your custom webhook feature into their regular workflow are much more likely to be long term customers

That's it for this week!

Thanks again for all your feedback and topic suggestions - keep them coming!

Until next week, happy building!

James