Getty Images API

Getty Images API access is not instant — it requires an application review. Go to **developers.gettyimages.com** and click **Get API Key** or **Apply for API Access**. Log in with your Getty Images account (create one at gettyimages.com if needed — a basic account is free). Fill out the application form: - **Application name**: what you are building (e.g., 'Editorial Asset Curation Tool') - **Application type**: most Bubble apps should select 'Internal' or 'Enterprise' — do not select 'Developer Demo' for production use - **Use case description**: explain specifically how you intend to use the API. Be accurate — vague descriptions are more likely to be rejected or delayed - **Website URL**: your Bubble app's domain or your organization's website Submit the application. Getty typically responds within 1-3 business days with either approval (credentials emailed) or a request for more information. Once approved, the developer portal gives you: - **Client ID**: a string identifying your application - **Client Secret**: a confidential string — treat this like a password Copy both values and store them in a secure location (password manager). You will need them for the Bubble API Connector configuration. **While waiting for approval**: use this time to set up your Bubble data types (App Settings with token fields), install the API Connector plugin, and design your image search UI layout. The integration setup can be completed before you have real credentials, using placeholder values — you will only be blocked at the Initialize call step until approval arrives.

Before configuring the API, create the data infrastructure to store the OAuth token. In your Bubble editor, go to the **Data tab** (database icon in the left sidebar). Click **Add a new type** and name it `App Settings`. Add two fields: - Field: `getty_access_token`, Type: **text** — stores the current Bearer token - Field: `getty_token_expires_at`, Type: **date** — stores when the current token expires Click **All App Settings** (the data view) and manually create one empty App Settings record. This single row will hold the current token and be updated by the refresh workflow. (One row is all you need — you will update it in place.) Now install the API Connector: **Plugins tab** → **Add plugins** → search **API Connector** → install the plugin by Bubble (first result, free). Open the API Connector configuration panel by clicking **API Connector** in the Plugins list. Click **Add another API** and name it `Getty Token`. Set **Authentication** to **No authentication** (you will handle auth in the request body).

In the **Getty Token** API Connector group, click **Add a call** to configure the token exchange. Set: - **Name**: `Get Access Token` - **Use as**: **Action** (this call modifies data and should be triggered by a workflow, not used as a data source in a Repeating Group) - **Method**: **POST** - **URL**: `https://authentication.gettyimages.com/oauth2/token` - **Body type**: **Form-urlencoded** In the **Body** section, add these parameters (ALL marked **Private**): - `grant_type` = `client_credentials` (this is fixed — not sensitive, but marking body params Private is consistent) - `client_id` = YOUR_GETTY_CLIENT_ID (mark **Private**) - `client_secret` = YOUR_GETTY_CLIENT_SECRET (mark **Private**) ```json { "method": "POST", "url": "https://authentication.gettyimages.com/oauth2/token", "body_type": "form-urlencoded", "body": { "grant_type": "client_credentials", "client_id": "<private: YOUR_CLIENT_ID>", "client_secret": "<private: YOUR_CLIENT_SECRET>" } } ``` Click **Initialize call**. If your credentials are approved and correct, Getty returns: ```json { "access_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9...", "token_type": "Bearer", "expires_in": 1800 } ``` Bubble detects the `access_token`, `token_type`, and `expires_in` fields. Now build the **token storage workflow**: go to your Bubble Workflow editor. Create an API workflow or a page-load workflow that: 1. Calls the **Get Access Token** action 2. After the call succeeds, uses **Make changes to a Thing** targeting the App Settings record to: - Set `getty_access_token` = result of Step 1's `access_token` - Set `getty_token_expires_at` = Current date/time + 1800 seconds (use Bubble's date arithmetic: Current date/time + 0 hours 30 minutes) This workflow must run before any image search calls. Build it now so you can trigger it manually in the next step.

1{
2  "method": "POST",
3  "url": "https://authentication.gettyimages.com/oauth2/token",
4  "headers": {
5    "Content-Type": "application/x-www-form-urlencoded"
6  },
7  "body_form_urlencoded": {
8    "grant_type": "client_credentials",
9    "client_id": "<private: YOUR_CLIENT_ID>",
10    "client_secret": "<private: YOUR_CLIENT_SECRET>"
11  }
12}

Create a second API Connector group for the actual image search calls. In the API Connector panel, click **Add another API** and name it `Getty Images API`. Set **Authentication** to **No authentication**. Under **Shared headers**, click **Add a shared header**: - **Name**: `Authorization` - **Value**: `Bearer ` followed by the dynamic token from App Settings - Use Bubble's **Insert dynamic data** to bind the value: `Bearer [App Settings's getty_access_token]` - **Tick the Private checkbox** — this ensures the Bearer token is never sent to the browser Also add a header: - **Name**: `Api-Key` - **Value**: your Getty client_id (mark **Private**) — some Getty API endpoints require this alongside the Bearer token Now add the image search call: - **Name**: `Search Images` - **Use as**: **Data** - **Method**: GET - **URL**: `https://api.gettyimages.com/v3/images/search` URL parameters: - `phrase` — the search keyword (bind to a Bubble Input element) - `fields` = `id,title,caption,display_sizes,asset_family,artist,collection_name` (comma-separated list of fields to return) - `asset_family` = `creative` (or `editorial`, or omit for both) - `page_size` = `25` - `page` = `1` (bind to a Custom State for pagination) - `sort_order` = `best_match` - `orientations` = `horizontal` (optional) ```json { "method": "GET", "url": "https://api.gettyimages.com/v3/images/search", "shared_headers": { "Authorization": "Bearer <dynamic: App Settings getty_access_token>", "Api-Key": "<private: YOUR_CLIENT_ID>" }, "params": { "phrase": "<dynamic:search_phrase>", "fields": "id,title,display_sizes,asset_family,artist", "asset_family": "creative", "page_size": "25", "page": "<dynamic:page_number>" } } ``` First, **manually trigger the token storage workflow** from Step 3 to populate the App Settings record with a real token. Then click **Initialize call** on the Search Images call. Getty returns a response with an `images` array. Set the **Data path** to `images`. Bubble detects image fields including `id`, `title`, `caption`, `artist`, `asset_family`, `collection_name`, and the nested `display_sizes` array.

1{
2  "method": "GET",
3  "url": "https://api.gettyimages.com/v3/images/search",
4  "shared_headers": {
5    "Authorization": "Bearer <dynamic: App Settings getty_access_token>",
6    "Api-Key": "<private: YOUR_CLIENT_ID>"
7  },
8  "call_params": {
9    "phrase": "<dynamic:search_phrase>",
10    "fields": "id,title,display_sizes,asset_family,artist,collection_name",
11    "asset_family": "creative",
12    "page_size": "25",
13    "page": "<dynamic:page_number>",
14    "sort_order": "best_match"
15  }
16}

**Token Refresh Backend Workflow (paid Bubble plan):** Go to **Backend Workflows** in your Bubble editor (left menu). Create a new API Workflow named `Refresh Getty Token`. In this workflow: 1. Add the **Getty Token - Get Access Token** API action call 2. After success, **Make changes to a Thing** on the App Settings record: - `getty_access_token` = Step 1's `access_token` - `getty_token_expires_at` = Current date/time + 29 minutes (slightly less than 30 to add buffer) 3. Finally, add a **Schedule API Workflow** action that schedules another run of `Refresh Getty Token` 25 minutes in the future — this creates a self-recurring refresh loop To start the loop: on your app's admin page or on the first page load (conditionally when `App Settings's getty_token_expires_at` is before `Current date/time`), trigger `Refresh Getty Token` once. It will then continue refreshing itself every 25 minutes. RapidDev's team has implemented this exact OAuth token refresh loop in Bubble for many external API integrations — if your Getty integration is part of a larger editorial platform, book a free scoping call at rapidevelopers.com/contact. **Image Search UI:** Create a new Bubble page (e.g., `getty-picker`). Add: 1. **Search Input**: placeholder 'Search Getty Images...' bound to a Custom State `search_phrase` 2. **Asset Family Dropdown**: static choices `creative` and `editorial` 3. **Repeating Group**: - Type of content: `Getty Images API - Search Images` - Data source: `Get data from external API` → `Getty Images API - Search Images` - Bind `phrase` to the `search_phrase` Custom State (with 500ms debounce) - Bind `asset_family` to the Dropdown value - Set Data path to `images` (already configured in the call) 4. **Inside the Repeating Group cell**: - **Image element**: to show the Getty watermarked preview, navigate to `Current cell's display_sizes:filtered by name = thumb:first item's uri` - **Text label**: 'WATERMARKED PREVIEW — FOR SELECTION ONLY' (important legal label) - **Text element**: `Current cell's title` - **Text element**: `Current cell's artist` - **Button 'Save to Board'**: stores `current cell's id`, `current cell's title`, and the thumb URI to a database record 5. **Privacy rules**: set privacy rules on any data type that stores Getty image IDs and URIs — restrict access to logged-in users with the appropriate role.

Getty's `display_sizes` field is a list of objects — not a flat URL string. Each element in the list has a `name` (identifying the size) and a `uri` (the URL). The available names include: `thumb` (small thumbnail), `comp` (full-size watermarked), `preview` (medium watermarked), and `highres` (licensed full-resolution, only accessible with an active commercial license). In Bubble, navigating to a specific size variant from a Repeating Group cell uses the **:filtered** constraint: `Current cell's Search Images's display_sizes:filtered by name = thumb :first item's uri` Add an Image element inside the Repeating Group and set its Source to this filtered expression. If Bubble's field picker does not show `display_sizes` as a list of items, the Initialize call may have detected it as a single object rather than a list — re-initialize the search call against a result that includes multiple display_sizes entries. **Adding a detail call for individual assets:** For a click-through detail view, add a second call in the Getty Images API group: - **Name**: `Get Image` - **Method**: GET - **URL**: `https://api.gettyimages.com/v3/images/{id}` (with `{id}` as a dynamic URL segment) - **URL param**: `fields=id,title,caption,display_sizes,artist,asset_family,keywords,collection_name` - **Use as**: Action (or Data for a preview popup) When the user clicks a Repeating Group item, pass `current cell's id` to a popup or detail page. That page calls `Get Image` with the passed ID to fetch full metadata including all available display_sizes variants. ```json { "method": "GET", "url": "https://api.gettyimages.com/v3/images/<dynamic:image_id>", "headers": { "Authorization": "Bearer <dynamic: App Settings getty_access_token>", "Api-Key": "<private: YOUR_CLIENT_ID>" }, "params": { "fields": "id,title,caption,display_sizes,artist,asset_family,keywords" } } ``` The detail call returns a single image object (not wrapped in an array) — do not set a Data path. Use as an Action and read the response fields in the next workflow step.

1{
2  "method": "GET",
3  "url": "https://api.gettyimages.com/v3/images/<dynamic:image_id>",
4  "shared_headers": {
5    "Authorization": "Bearer <dynamic: App Settings getty_access_token>",
6    "Api-Key": "<private: YOUR_CLIENT_ID>"
7  },
8  "call_params": {
9    "fields": "id,title,caption,display_sizes,artist,asset_family,keywords,collection_name"
10  }
11}