How to Receive and Replay External Webhooks in Bubble with Hookdeck

Webhooks introduce event-driven integrations between different applications or platforms. When it comes to building event-driven architectures, it is recommended to introduce an event gateway to manage webhooks for security, routing, log tracing, throttled delivery, and webhook event replay.

In this article, we will explore how to leverage Hookdeck, an event gateway, to receive and replay webhooks to your Bubble workflows.

Creating a Bubble workflow API

Before proceeding with receiving webhook events in Bubble, let's set up a Bubble workflow API to handle incoming webhook events. Bubble allows you to create APIs that external systems can trigger.

Follow these steps to create a Bubble workflow API:

• Log in to your Bubble account and create or select an existing project.
• On your Bubble editor, navigate to Settings > API and check the Enable Workflow API and Backend Workflow. This exposes your workflows and provides a public URL to use.

• Click the page navigator in the upper left corner of the Bubble editor and select the Backend workflows link at the bottom of the list. This provides an interface to create a new backend workflow.

• Follow this guide on Bubble’s docs to create an API workflow.
  • Name the workflow, for example demo-workflow.
  • Check Expose as a public API workflow and add any necessary authentication or security settings.
  • You can autodetect the parameters by sending a request to the /initialize URL to have Bubble automatically determine the data structure for the webhook.
  • Set the value of Trigger workflow with to POST.
  • Specify the parameter definition based on the payload structure you want to receive.

• Customize the workflow action to process the webhook payload and perform your desired action when the endpoint is triggered.

After creating the API workflow, you can use the provided URL in the API settings mentioned above. The URL is of the format https://<application domain>/<application-version>/api/1.1/wf/<workflow-name>. Replace the placeholders appropriately and note the URL as it is needed below.

Creating a Hookdeck connection

Now that we have our Bubble workflow API set up, let's integrate Hookdeck to handle webhook events and enable replay functionality. Follow these steps to create a webhook connection in Hookdeck:

• Sign up or log in to your Hookdeck dashboard.
• Click on Connections on the side panel, then Create + a new connection. This opens a right sidebar; fill in the required information and Save.
  • Source: Specify the source to be any platform or application you want to receive webhooks from.
  • Destination: Set the destination to your Bubble workflow API endpoint URL.

After creating the connection, copy the source URL from Hookdeck to use on the source platform where the webhook is to come from.

By creating this connection, Hookdeck acts as a middleware between the source of your webhooks and your Bubble application.

Receiving webhook events

You can utilize the Hookdeck Console to simulate example webhooks from popular webhook sources.

Say for example your webhook source is Stripe; when a Stripe webhook event is triggered, Hookdeck receives the webhook event and forwards it to your Bubble workflow API where any action defined in your Bubble application happens. You can monitor the events within the Hookdeck dashboard and track their delivery status.

From your Hookdeck dashboard, switch to the Events tab from the side panel and filter as per the connection created above. This shows the activities of events on that connection.

Replaying error or failed webhooks

In some cases, webhook events may fail to be processed correctly by your Bubble workflow API due to errors or issues within your application. Hookdeck offers the ability to replay error webhooks, ensuring the delivery of failed events. To replay a failed webhook:

• From the Hookdeck Event panel, locate and click on the kebab menu across from the failed event and Retry.
• This causes Hookdeck to attempt to send the webhook event to your Bubble workflow API, giving it another opportunity to process the event and trigger the necessary actions.

This replay functionality helps maintain the integrity of webhook event processing and ensures that no events are missed or lost.

You have seen how to replay webhooks from any external source to Bubble. By leveraging Hookdeck's powerful webhook management features, Bubble users can easily receive and replay external webhook events within their applications.

Hookdeck provides enhanced security, detailed log tracing, and the ability to replay error webhooks, offering Bubble developers a reliable and efficient solution for handling webhook events. With Hookdeck and Bubble, you can build robust and responsive applications that seamlessly integrate with external services and systems.