Generating Dynamic Webhook URLs in Bubble
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 and you're using a webhook to do that, then this video is for you. An example being Assembly AI. Assembly AI is a speech-to-text API, fantastic really good, we've got previous videos on the topic. And so you would upload an audio file through your Bubble app through the API then to Assembly AI and you would provide a webhook URL and this is so Assembly AI can inform your Bubble app when the transcript is ready because it can take more than a few seconds to turn audio into a transcript particularly if you have a large audio file.
Solving Webhook Issues Between Development and Live Versions
We've received a question on one of our YouTube videos saying that the webhook is working in the dev version but not the live version and that is likely because Assembly AI is continuing to send even live requests to the dev version and this can be really easily solved. So I've got an API workflow here and I'm just going to put it into the detect request data and detect data so that I get the endpoint. I'm going to copy that because you need to be able to build this endpoint dynamically so that it works just as well in your live version as your test version or even any other branch that you've got going on in Bubble.
Creating a Dynamic Webhook URL
Let me just start a new page I'll just say webhook example because when you pass through your webhook URL which is your Bubble app's endpoint ready to detect when you get that notification through, yeah I'm going to show you how you can update that so this is not a lesson in design but let's say I want to rebuild that webhook URL but I want to make it dynamic well if I just double copy and paste it I can instead say this no it's not this URL it is website home URL and then I want to check that because I want to know whether it ends in a backslash and I can never or forward slash I can never remember if that's the case.
Testing the Dynamic URL
So there you go you can see it knows the home URL of the current version of my app so it puts version test onto the end so I could then add in arbitrary text take the remaining part copy that paste into here and then if I click preview you can see that I've rebuilt an identical URL but of course if this URL was referenced in the live version of my app it would either say version live or it wouldn't include most likely in this case it wouldn't include the version test part therefore making the webhook your live endpoint yeah you got it.
Important Considerations for Production
A couple of things to point out on this is that remember initialize you will need that for testing developing getting data into your webhooks but you need to remove initialize when you actually wanted to go into production and then the last thing I want to say is even if you put this in place remember to deploy your app to live so that you have the webhook in this case example ready on the live version and also you've got your dynamic webhook URL creator just like I've done on the page here you've got that in your workflow in your parameter just like you would be putting in the parameter for the webhook URL here for Assembly AI.
Conclusion and Further Learning
You got any questions on this please leave a comment down below like and subscribe and if you're learning Bubble then there's no better place to do it than planetnocode.com because we've got hundreds of Bubble's tutorial videos we release loads of tutorial videos each month in fact we release many videos each week so subscribe check out our website and become a member to access our whole catalog of videos.