Pixabay API

Go to **pixabay.com** and click **Sign Up** in the top-right corner. Create a free account with an email address — no credit card required. Once logged in, visit **pixabay.com/api/docs** (or hover over your username → API). At the top of the API documentation page, Pixabay displays your personal API key in a blue highlighted box labeled 'Your API Key'. It looks like a long number — for example, `39847215-a1b2c3d4e5f6g7h8i9j0k1l2m`. Copy this key and save it somewhere accessible (a password manager or secure notes). You will paste it into Bubble in the next step. **Note on high-resolution access**: The `webformatURL` field (up to ~1280px) is available immediately on all free API keys. The full-resolution `imageURL` field (original upload resolution) is restricted by default — Pixabay requires you to contact them to enable high-res access, which is granted for applications with genuine editorial or commercial use cases. For a stock image picker embedded in a Bubble app, `largeImageURL` (available by default) is sufficient for most UI and storage purposes.

In your Bubble editor, open the **Plugins tab** (puzzle piece icon in the left sidebar). Click **Add plugins**, search for **API Connector**, and install the plugin by Bubble (first result, free). Click **API Connector** in the plugins list to open the configuration panel. Click **Add another API** and name it `Pixabay`. Set **Authentication** to **No authentication** — Pixabay uses URL parameters, not OAuth or Bearer tokens. Under **Shared parameters**, click **Add a shared parameter**: - **Key**: `key` - **Value**: paste your Pixabay API key - **Tick the Private checkbox** — this tells Bubble to strip this parameter from any client-side representation of the request, keeping your API key server-side even though Pixabay would technically allow it to be exposed Your configuration at this point: ```json { "api_name": "Pixabay", "authentication": "none", "shared_params": { "key": "<private: YOUR_PIXABAY_API_KEY>" } } ``` Click **Save** on the API group (do not add a call yet — that is the next step).

1{
2  "api_name": "Pixabay",
3  "authentication": "none",
4  "shared_params": {
5    "key": "<private: YOUR_PIXABAY_API_KEY>"
6  }
7}

With the Pixabay group configured, click **Add a call** to create the image search call. Configure the call: - **Name**: `Search Images` - **Use as**: **Data** (this returns a list of items for a Repeating Group) - **Method**: GET - **URL**: `https://pixabay.com/api/` Under **URL parameters**, add the following parameters (these control search behavior and will be bound to Bubble UI inputs later): - `q` — the search query. Set a test value of `nature` for the Initialize step - `image_type` — values: `all`, `photo`, `illustration`, `vector`. Set test value: `photo` - `orientation` — values: `all`, `horizontal`, `vertical`. Set test value: `all` - `category` — optional (nature, people, fashion, science, etc.). Leave blank or `all` - `per_page` — number of results per page. Values 3–200. Set test value: `20` - `page` — current page number starting at 1. Set test value: `1` - `safesearch` — set to `true` for apps with mixed audiences - `lang` — set to `en` for English-tagged results ```json { "method": "GET", "url": "https://pixabay.com/api/", "params": { "q": "<dynamic:search_query>", "image_type": "<dynamic:image_type>", "orientation": "all", "per_page": "20", "page": "<dynamic:page_number>", "safesearch": "true", "lang": "en" } } ``` Now click **Initialize call**. Pixabay returns a response like: ```json { "total": 148592, "totalHits": 500, "hits": [ { "id": 12345, "webformatURL": "https://pixabay.com/get/..._640.jpg", "largeImageURL": "https://pixabay.com/get/..._1280.jpg", "imageWidth": 3840, "imageHeight": 2160, "tags": "nature, forest, trees", ... } ] } ``` **Critical step**: after the Initialize call succeeds, look for the **Data path** field in the call configuration. Set it to `hits`. This tells Bubble to treat the `hits` array — not the root object — as the list of items. Without this setting, a Repeating Group bound to this call shows one item (the root object with total, totalHits, and hits nested inside) instead of individual images. Click **Save**.

1{
2  "method": "GET",
3  "url": "https://pixabay.com/api/",
4  "shared_params": {
5    "key": "<private: YOUR_API_KEY>"
6  },
7  "call_params": {
8    "q": "<dynamic:search_query>",
9    "image_type": "photo",
10    "orientation": "all",
11    "per_page": "20",
12    "page": "1",
13    "safesearch": "true"
14  }
15}

Now bind the Pixabay API call to a Bubble UI. This step builds a practical image picker — a search box, image type dropdown, Repeating Group of results, and pagination controls. **Create a Custom State for debouncing** (prevents firing an API call on every keystroke): - Select any element on the page (or the page itself) - In the Inspector panel, go to **States** → **Add new state** - Name: `search_query_debounced`, Type: text - Also add state: `current_page`, Type: number, Default: 1 **Add UI elements:** 1. **Search Input**: add an Input element. Placeholder: 'Search Pixabay images...'. On its **Trigger a workflow on content change** event, add a 500ms delayed action that sets the `search_query_debounced` Custom State to `Input's value`. (Use Bubble's workflow 'Add a pause before next action' set to 500ms, then Set State.) This prevents an API call on every character typed. 2. **Image Type Dropdown**: add a Dropdown element with static choices: `photo`, `illustration`, `vector`, `all`. Default: `all`. 3. **Repeating Group**: add a Repeating Group. Set: - **Type of content**: `Pixabay - Search Images` (the API response type Bubble created during Initialize) - **Data source**: `Get data from an external API` → `Pixabay - Search Images` - In the API call parameters, bind: - `q` → `Page's search_query_debounced` Custom State - `image_type` → `Dropdown's value` - `page` → `Page's current_page` Custom State - Set **Layout** to a 4-column grid, fixed height rows of 180px 4. **Image Element** inside the Repeating Group cell: set **Source** to `Current cell's Pixabay - Search Images's webformatURL`. This is the web-size preview image (up to 1280px). 5. **Select Button** inside the cell: on click, add a workflow that: - Creates or updates a Thing (your app's content record) setting a field (e.g., `featured_image_url`) to `Current cell's largeImageURL` - Closes the popup or navigates forward 6. **Pagination Controls**: add Previous and Next buttons: - Previous: set `current_page` Custom State to `current_page - 1`. Disable when `current_page = 1`. - Next: set `current_page` Custom State to `current_page + 1`. RapidDev's team has built image picker flows like this as part of larger Bubble content platforms — reach out at rapidevelopers.com/contact for a free scoping call if you need help wiring this into a more complex workflow.

If your Bubble app needs video content (background clips, b-roll footage, intro videos), Pixabay's video API works almost identically to the image API with one URL change. In the Pixabay API Connector group, click **Add a call** again: - **Name**: `Search Videos` - **Use as**: **Data** - **Method**: GET - **URL**: `https://pixabay.com/api/videos/` (note the different endpoint from the image API) Add URL parameters: `q`, `video_type` (all/film/animation), `per_page=15` (fewer than images — video thumbnails are larger), `page=1`. ```json { "method": "GET", "url": "https://pixabay.com/api/videos/", "params": { "q": "<dynamic:search_query>", "video_type": "all", "per_page": "15", "page": "<dynamic:page>" } } ``` Click **Initialize call** (use `q=nature` as the test value again). The video response structure differs from images: the root object has a `hits` array, but each hit contains a `videos` object with size variants (`tiny`, `small`, `medium`, `large`) rather than a single URL. Set Data path to `hits`. To display video previews in Bubble, use a **Video** element inside the video Repeating Group cell. Bind the source to `Current cell's Search Videos' videos' medium's url` (navigate the nested videos object to the medium size variant). For mobile optimization, use `tiny` instead. The same rate limit (100 req/min) applies to video searches — use the same debounce Custom State pattern from Step 4.

1{
2  "method": "GET",
3  "url": "https://pixabay.com/api/videos/",
4  "shared_params": {
5    "key": "<private: YOUR_API_KEY>"
6  },
7  "call_params": {
8    "q": "<dynamic:search_query>",
9    "video_type": "all",
10    "per_page": "15",
11    "page": "<dynamic:page_number>",
12    "safesearch": "true"
13  }
14}