I recently got IFTTT to connect to my Bubble app via webhooks. In the hopes this will be helpful to others wanting to receive Webhooks in their apps or integrate with IFTTT, here are details on how I did it. If anyone has additional info, please expand this tip!
This tip has two parts:
- Getting a Bubble app to receive a Webhook
- Getting IFTTT to Send to a Webhook
1. Getting a Bubble App to receive a Webhook
Bubble apps receive webhooks via APIs. So, first of all, I read the API section of the Bubble Reference
This explains what URL to use for your Bubble app. In my case, I wanted to create a new item in response to an IFTTT event so I needed a Data API and would use the POST method to create a new thing.
My development URL looked like this:
Where “message” is a custom data type in my app which has two text fields:
To make this accessible to the API I needed to:
- Turn on the data API for my custom data type “message” in my app Settings:
- Setup privacy rules for my custom data type “message” to allow “Create via API”
Now any properly formatted POST message to https://appname.bubbleapps.io/version-test/api/1.1/obj/message should create a new data item of type “message.”
As explained in the reference, the values for each field are defined in the payload of the call, which in this case is the BODY of the POST request in JSON format:
"myTextThing1":"this is the text I want to store",
"myTextThing2":"and this is more text for the other one"
I tested this using Insomnia to send a POST request to my app.
which shows how Bubble responds when the call is a success:
and what it does in case of an error:
2. Getting IFTTT to Send a Webhook
Here’s what it looks like setting up IFTTT’s webhook action to send the POST request built in the first section:
(click on above image to expand and see all of it)
with one addition… I used an “ingredient” in IFTT to get some data from the trigger, which in this case was IFTTT’s “location” service. The call grabs the time at which the location change occured which IFTTT provides as the ingredient “OccuredAt” and puts it into “myTextThing2.”
I originally tried to use a Bubble “date” data type to receive the time, but ran into trouble because of a mismatch in format:
IFTTT sends the date like this: “August 30, 2018 at 09:55AM” where Bubble expects something different as the reference explains:
2) **Dates:** Send a date as a string or timestamp. For example, 'Wed Jan 13 2016,' '01/13/2016,' 'Wed Jan 13 2016 16:45:09 GMT-0500 (EST),' or '1453398788637.'
When I tried to send it to a date field, I got this error:
Presumably this can be solved by doing some processing on the text string, which I wish was easier in Bubble
To discover what IFTTT was sending, I used Webhook Tester (which can also be used to see what your Bubble app is sending if you try to send a webhook.)
Webhook Tester also helped debug a problem and discover that it is necessary to wrap IFTTTs ingredients that return text in quotes, as shown in the IFTTT screenshot above.
I didn’t deal with authentication in this example, if anyone else feels so inclined to expand this tip with info on how to do that, please do!
Note: whenever dealing with APIs you need to be aware of Bubble’s “feature” in that it responds to an empty search by sending all possible data. For example, try just pasting your API URL used in the above steps in your web browser. When I do this I get a dump of my entire database for the exposed data type in JSON format. Presumably implementing authentication would prevent this behavior.
Update: I looked into authentication and I don’t think it can be done with IFTTT and Bubble because Bubble wants the API token in the POST header and IFTTT’s webhook service does not expose the header. Bummer. Perhaps it could be done by making an IFTTT service specific to your own Bubble app; or if Bubble would work with IFTTT to make a plug-in This means be careful using IFTTT because your data will be exposed (see note in previous paragraph.)