Example: Using your Webhook with IFTTT to integrate with Dropbox with Booth.Events

In this article we will show you how to connect your Dropbox account to Booth.Events using the Webhook feature with If This Then That (IFTTT).

What this does: each time your iPads upload a photo or video to one of your galleries, it will also get saved to your Dropbox.

You can connect many different services like Google Drive, Box, OneDrive etc - but we'll focus on Dropbox in this article.

IFTTT is a third-party service: we cannot make any guarantee about the accuracy of the content of this article with respect to third-parties.

Please note we do not offer support for third-party services like IFTTT.

See also

First please make sure you've read our main webhook article.

As mentioned in that article, in order to use your Booth.Events webhook you need a Booth.Events Pro+ subscription. You can start a free 14-day trial today to get started.

IFTTT Subscription / Plan levels

At the time of writing there are three plan levels available on IFTTT: free, Pro, and Pro+.

This article has two options for creating the IFTTT Applet:

• Easier: IFTTT "Receive a web request" Applet
  • this easier option requires a IFTTT Pro subscription which is cheaper than the IFTTT Pro+ subscription
  • you have less control, for example you cannot choose how files are named
• Advanced: IFTTT "Receive a web request with a JSON payload" Applet with Filter Code
  • this advanced option requires a IFTTT Pro+ subscription
  • you have full control; for example you can change how files are named and name them differently if they are templates/collages versus originals; this assumes you are able to understand & update the JavaScript code we give you in the article below

So, pick ONE of the following two sections. Not sure which? Then definitely pick the easier one!

Easier: IFTTT "Receive a web request" Applet

This option requires a Booth.Events Pro+ subscription and an IFTTT Pro subscription.

First you need to get your webhook URL from IFTTT and paste it into Booth.Events:

1. Open this IFTTT page: https://ifttt.com/maker_webhooks
2. Hit the "Documentation" button:

3. On the resulting page scroll down to the section titled "To trigger an Event with 3 JSON values", type in an event name like boothevents_upload into the placeholder as shown in the screenshot below, and then copy the whole URL to your clipboard. The URL will look like this: https://maker.ifttt.com/trigger/boothevents_upload/with/key/kvub0DQfNV0RjOuGFmd7MwwoJsfiwoAaF89VRQJzzzz

Keep note of this event name (boothevents_upload in our example above), as you will use it later below. You can use any event name you want (it's not related to events on Booth.Events)

4. On the Booth.Events account page, open the webhook block, paste the URL in, and hit Save Changes:

Next we need to create the actual Applet on IFTTT.

1. Create a new Applet on IFTTT and hit the "Add" button:

2. Search for "webhook" and hit the "Webhooks" service:

3. Choose the service called "Receive a web request":

4. In "Event Name" enter the event name from the previous section, then hit "Create trigger". In our example we used boothevents_upload :

5. In the "Then That" box hit "Add":

6. In the list of available connections choose Dropbox (you can search for it or scroll down to it):

7. Choose "Add file form URL":

8. On the action settings screen you need to set all 4 values:

   Dropbox account: connect your Dropbox account first

   File URL: hit Add Ingredient and then choose Value1

   File name: erase what's there, hit Add Ingredient, and then choose Value2

   Dropbox folder path: erase what's there, type in a path like IFTTT/Booth.Events/ , then hit Add Ingredient and choose Value3

   Then hit Create Action.

   If you've done this correctly you'll see something like this:

9. On the next screen hit Continue
10. Give the Applet a title you like (doesn't matter what it is), and hit Finish

That's it! Now try shooting some photos on the iOS App and then reload the IFTTT page: you should see that the Applet runs. Then check your Dropbox and you should see the files have been saved at the folder path you entered.

Advanced: IFTTT "Receive a web request with a JSON payload" Applet with Filter Code

This option requires a Booth.Events Pro+ subscription and an IFTTT Pro+ subscription.

First we need to get our webhook URL from IFTTT and paste it into Booth.Events. Note that this is not the same URL as the Eaiser path above.

Follow these steps:

1. Open this IFTTT page: https://ifttt.com/maker_webhooks
2. Hit the "Documentation" button:

3. On the resulting page scroll down to the section titled "To trigger an Event with an arbitrary JSON payload", type in an event name like boothevents_upload into the placeholder as shown in the screenshot below, and then copy the whole URL to your clipboard. The URL will look like this: https://maker.ifttt.com/trigger/boothevents_upload/json/with/key/kvub0DQfNV0RjOuGFmd7MwwoJsfiwoAaF89VRQJzzzz

Keep note of this event name (boothevents_upload in our example above), as you will use it later below. You can use any event name you want (it's not related to events on Booth.Events)

4. On the Booth.Events account page, open the webhook block, paste the URL in, and hit Save Changes:

Next we need to create the actual Applet on IFTTT.

1. Create a new Applet on IFTTT and hit the "Add" button:

2. Search for "webhook" and hit the "Webhooks" service:

3. Choose the service called "Receive a web request with a JSON payload":

4. In "Event Name" enter the event name from the previous section, then hit "Create trigger". In our example we used boothevents_upload :

5. In the "Then That" box hit "Add":

6. In the list of available connections choose Dropbox (you can search for it or scroll down to it):

7. Choose "Add file form URL":

8. On the action settings screen you need to set the values like this:

   Dropbox account: connect your Dropbox account first

   File URL: the value you enter here is not going to be used (it will be replaced by Filter Code), but you must enter a value. So enter "temp"

   File name: this value is also not going to be used. Luckily there's already a default value for you, so you can just use that.

   Dropbox folder path: this value is also not going to be used. Luckily there's already a default value for you, so you can just use that.

   Then hit Create Action.

   
   
9. Hit the "+" between "If" and "Then":

10. Hit the "+" next to Filter Code
11. On the left side, paste in this TypeScript (JavaScript) code:

const payload = JSON.parse(MakerWebhooks.jsonEvent.JsonPayload)

// Here we set the filename differently if it is a collage or not
const isVideo = payload.contentType !== 'image/jpeg'
const filename = `${Meta.triggerTime}${payload.isCollage || isVideo ? `-template` : `-original`}`

Dropbox.addFileFromUrl.setFilename(filename)
Dropbox.addFileFromUrl.setUrl(payload.url)
Dropbox.addFileFromUrl.setPath(`IFTTT/Booth.Events/${payload.galleryName}`)

... and then hit Add filter:

12. On the next screen hit Continue
13. Give the Applet a title you like (doesn't matter what it is), and hit Finish

That's it! Now try shooting some photos on the iOS App and then reload the IFTTT page: you should see that the Applet runs. Then check your Dropbox and you should see the files have been saved.

You can modify the Filter Code of course, to change where the files are saved or to change the filenames.