Populate dropdown options with a webhook
Fillout supports dropdowns with dynamically populated options, populated from a REST API endpoint of your choice.
What is a webhook
A webhook is a way for one system (like Fillout) to send real-time data to another system (like the 3rd party tools you use) as soon as an event occurs. Under the hood, a webhook is an HTTP callback and can be a GET, PUT, POST or DELETE request.
Β
How to use the webhook integration
1. Add a Webhook
Go to the Integrations tab and click
Webhook
.![notion image](/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F2a7ed980-5add-4b51-82ab-889415f57134%252Fc582f798-5bce-4f5f-89b4-44ce92162af2%252FScreen_Shot_2023-11-15_at_12.27.46_PM.png%3Ftable%3Dblock%26id%3D6ca3a654-d4a6-46db-98f2-79278f9c0c38%26cache%3Dv2&w=3840&q=75)
2. Add a Pre-fetch step to the Webhook integration
Toggle the
Advanced view
switch, then scroll down to Pre-fetch. Click + Add new
, then choose a recognizable name for your pre-fetch (the name is used only for your reference).![notion image](/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F2a7ed980-5add-4b51-82ab-889415f57134%252F6888fde1-4561-4c69-be10-f643239b8a8e%252FScreen_Shot_2023-11-15_at_12.36.38_PM.png%3Ftable%3Dblock%26id%3Dc4f9e691-06d6-4f3a-b994-2da18cd1174d%26cache%3Dv2&w=3840&q=75)
You can learn more about pre-fetch steps here.
3. Setup your Pre-fetch step
Enter the base URL of your API and any parameters you would like to pass.
Your API endpoint must return an array of objects, with each object containing a "value" property. For example:
![notion image](/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fdownloads.intercomcdn.com%252Fi%252Fo%252F638073985%252F9b1b725f86aa4c261c3412af%252Fimage.png%3Ftable%3Dblock%26id%3D4b3f2d2b-b35a-4f91-bcc8-c7d3b3d94acf%26cache%3Dv2&w=3840&q=75)
4. Choose a dropdown field to pre-populate
If your API endpoint successfully returns an array of object as described above, you'll see an option to choose a dropdown to pre-populate. You can choose from any existing dropdown in your form.
![notion image](/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F2a7ed980-5add-4b51-82ab-889415f57134%252Ffe5de51f-73cf-4efc-8ccb-a0978cb30945%252Fimage.png%3Ftable%3Dblock%26id%3Daf5d5eef-07bd-4b45-b855-49ec87ae679d%26cache%3Dv2&w=3840&q=75)
That's it! Your dropdown will now populate its options from your Webhook.
Β
Related article
Send form submissions to a webhookΒ