If you're using a third-party service to process data for your Bubble app and you need to be informed when that processing is complete, using webhooks is the way to go. In this video, we'll explore how to set up webhooks in Bubble.io and ensure they work in both the development and live versions of your app.
One example of a service that utilizes webhooks is Assembly AI, a speech-to-text API. When using Assembly AI with Bubble, you would upload an audio file through your app's API and provide a webhook URL. This URL allows Assembly AI to notify your app when the transcript is ready, as it can take some time to process audio into text, especially for larger files.
However, some users have reported that the webhook works in the development version of their app but not in the live version. This is likely because Assembly AI continues to send requests to the development version, which can be easily resolved.
To address this issue, you can build the webhook URL dynamically, ensuring it works seamlessly in both the development and live versions of your app. Here's how you can do it:
1. Create an API workflow in Bubble.io.
2. Retrieve the endpoint of this workflow.
3. Copy the endpoint URL for later use.
Next, create a new page in your app and name it something like "Webhook Example." This is where you'll rebuild the webhook URL dynamically. While the design of this page is not important, let's focus on the URL construction.
Building a webhook with dynamic data
Copy and paste the webhook URL into the page, but instead of using the static URL, make it dynamic using Bubble.io's built-in functions. Replace the static URL with the following: website home URL
This function retrieves the home URL of your app, including the current version (e.g., "version-test"). You can then add any additional text or parameters as needed.
To preview the dynamic URL, click "Preview." You'll see that the URL is rebuilt identically. However, if this URL is referenced in the live version of your app, it will reflect the live version rather than the test version.
Remember to remove the "initialize" function from your workflow once you're ready to go into production. Additionally, make sure to deploy your app to the live version to have the webhook URL and the dynamic URL creator available.
By utilizing webhooks effectively in Bubble.io, you can seamlessly integrate third-party services into your app and ensure smooth communication between different platforms and APIs.