Shutterstock API

Open shutterstock.com/developers in your browser and sign in (or create a free account). Click 'Create new app' in your dashboard. Give the app a name that reflects your project — for example, 'My Bubble Media Picker'. Leave the callback URL blank for now; it is only needed for user-level OAuth flows, not client credentials. Once the app is created, Shutterstock shows you a client_id and a client_secret on the app detail page. Copy both values and keep them somewhere safe — you will need to combine them in the next step. Note: Shutterstock grants instant access to the search and preview endpoints as soon as you create a developer app. There is no approval wait like Getty Images. You can make your first API call within minutes of registration. If you plan to build licensing and download features later, you will need to apply for a paid Shutterstock API subscription separately. For now, the free developer app is all you need.

Shutterstock's Basic Auth header requires the exact string `client_id:client_secret` (colon separator, no spaces) encoded as Base64. Go to any online Base64 encoder (search 'base64 encode online'), paste `YOUR_CLIENT_ID:YOUR_CLIENT_SECRET` into the input field, and copy the encoded output. The output will look like a long string of letters, numbers, plus signs, and equal signs — for example: `dGVzdGlkOnRlc3RzZWNyZXQ=`. Make sure the encoded string has no line breaks or extra whitespace. Now open your Bubble app and go to the Plugins tab in the left sidebar. Click 'Add plugins', search for 'API Connector', find the plugin by Bubble, and click Install. Once installed, click 'API Connector' in the Plugins tab to open its configuration panel. Click 'Add another API'. In the API Name field, type 'Shutterstock'. Set the Authentication dropdown to 'No authentication' — you will handle auth through a manual header rather than Bubble's built-in auth scheme, which gives you more control. Expand the Shared headers section and click 'Add a shared header'. Set the key to `Authorization` and the value to `Basic YOUR_BASE64_STRING` (replace with your actual encoded string). Tick the **Private** checkbox next to this header — this is critical and ensures the header value is never sent to or exposed in the browser, even though Bubble proxies the call server-side. Set the base URL for this API to `https://api.shutterstock.com/v2`.

1{
2  "api_name": "Shutterstock",
3  "base_url": "https://api.shutterstock.com/v2",
4  "authentication": "No authentication",
5  "shared_headers": [
6    {
7      "key": "Authorization",
8      "value": "Basic dGVzdGlkOnRlc3RzZWNyZXQ=",
9      "private": true,
10      "note": "Replace value with your own Base64-encoded client_id:client_secret"
11    }
12  ]
13}

Inside the Shutterstock API Connector group, click 'Add another call'. Name the call 'Search Images'. Set the method to GET and the endpoint path to `/images/search` (Bubble appends this to the base URL automatically, resulting in `https://api.shutterstock.com/v2/images/search`). Set the 'Use as' dropdown to 'Data' — this tells Bubble to treat the response as a list of records that can be bound to a Repeating Group or searched using Bubble's data expressions. Now add the following URL parameters (click 'Add a parameter' for each): - `query` — leave the default value as something meaningful like `nature`; mark it as a dynamic parameter so you can bind it to a search input later - `image_type` — set a default value of `photo` (other values: `illustration`, `vector`) - `orientation` — default `horizontal` (other values: `vertical`, `square`) - `per_page` — default `30` - `page` — default `1`; mark as dynamic for pagination - `safe` — default `true` Do NOT mark the `page` parameter as Private — it is a pagination control that Bubble needs to pass dynamically from a custom state.

1{
2  "call_name": "Search Images",
3  "method": "GET",
4  "path": "/images/search",
5  "use_as": "Data",
6  "url_parameters": [
7    { "key": "query", "default": "nature", "dynamic": true },
8    { "key": "image_type", "default": "photo", "dynamic": true },
9    { "key": "orientation", "default": "horizontal", "dynamic": true },
10    { "key": "per_page", "default": "30" },
11    { "key": "page", "default": "1", "dynamic": true },
12    { "key": "safe", "default": "true" }
13  ]
14}

This step is critical and one of the most common sources of problems in Bubble API Connector setups. Bubble cannot know the shape of an API response until it sees one — you must click 'Initialize call' and let Bubble receive an actual JSON response from Shutterstock, then use that response to auto-detect field names and types. With `query=nature` and `per_page=30` already set as defaults, click 'Initialize call' at the bottom of the call configuration panel. Bubble sends a live GET request to Shutterstock's API and shows you the raw JSON response. If you see a list of image objects with nested fields, the initialization succeeded. After initialization, Bubble shows you the detected fields. Look for the nested path `assets.preview_1500.url` — this is the URL of a 1500px-wide watermarked preview image. You should also see `assets.huge_thumb.url` (smaller, loads faster in Repeating Groups), `id`, `description`, and `contributor.id`. In the 'Data path' field below the call configuration, type `data` — this tells Bubble that the actual list of results lives inside the `data` key of the root response object, rather than at the root level. Without this, Bubble treats the entire response as a single record and your Repeating Group shows one row instead of thirty. If the initialization fails with a 401 error, your Base64 string is malformed — re-encode the `client_id:client_secret` string carefully and update the shared header value.

1{
2  "note": "Sample Shutterstock image search response structure",
3  "total_count": 45231890,
4  "page": 1,
5  "per_page": 30,
6  "search_id": "abc123",
7  "data": [
8    {
9      "id": "1234567890",
10      "description": "Beautiful nature landscape",
11      "contributor": { "id": "987654" },
12      "assets": {
13        "huge_thumb": {
14          "height": 260,
15          "url": "https://thumb7.shutterstock.com/display_pic.../1234567890/huge_thumb-1234567890.jpg",
16          "width": 390
17        },
18        "preview_1500": {
19          "height": 1000,
20          "url": "https://thumb7.shutterstock.com/display_pic.../1234567890/1500w_1234567890.jpg",
21          "width": 1500
22        }
23      },
24      "media_type": "image"
25    }
26  ]
27}

Now wire the search call to your Bubble UI. Go to the page where you want the image picker — either a full page or a popup element. Add the following elements: 1. A text Input element for the search query. Set its placeholder to 'Search for images…'. Give it an ID of 'search-input'. 2. A Dropdown for image type with options: photo, illustration, vector. Default to 'photo'. 3. A Repeating Group. Set its Type of content to 'Shutterstock Search Images' (the Data type Bubble created when you initialized the call). Set its Data source to 'Get data from an external API → Shutterstock - Search Images'. In the data source popup, bind the `query` parameter to 'search-input's value' and the `image_type` parameter to the dropdown's value. 4. Inside the Repeating Group, add an Image element. Set its Dynamic image to 'Current cell's Shutterstock Search Images's assets huge_thumb url' — this uses the smaller thumbnail for fast loading in the grid. 5. Add a 'Save' or 'Select' button inside the Repeating Group cell. In its workflow, add a 'Make changes to a Thing' or 'Create a new Thing' action that stores `Current cell's Shutterstock Search Images's id` and `Current cell's Shutterstock Search Images's assets preview_1500 url` in your database. For pagination, add 'Previous page' and 'Next page' buttons that modify a custom state (type: number, initial value: 1) and bind the `page` URL parameter to that state's value. If you want a full-size preview popup when a user clicks a thumbnail, add a Popup element with a larger Image element and bind its Dynamic image to a custom state that stores the `assets.preview_1500.url` of the clicked result. Set the 'When image is clicked' workflow to 'Set state → preview URL' and 'Show popup'.

If your Bubble app needs to let users license and download images — not just view previews — you must first obtain a paid Shutterstock API subscription from shutterstock.com/developers. Once you have it, you need to add a token exchange call to your API Connector. Create a second API Connector group named 'Shutterstock OAuth'. In this group, add a new call named 'Get Access Token'. Set the method to POST and the URL to `https://accounts.shutterstock.com/oauth/token`. Set the body type to 'Form-urlencoded'. Add three body parameters: `grant_type=client_credentials`, `client_id=[your client_id, marked Private]`, and `client_secret=[your client_secret, marked Private]`. Set 'Use as' to Action (not Data, since this call modifies state). Initialize the call with your real credentials to confirm it returns an `access_token` field. Create a Backend Workflow (Settings → API → enable Workflow API → Backend Workflows section) named 'Refresh Shutterstock Token'. In this workflow, run the 'Get Access Token' Action call, then create or modify an App Data row (a special 'AppSettings' data type works well) storing the `access_token` value. Add a Bubble condition to re-run this workflow before any licensing call by checking if the stored token is empty or if its creation time is older than 30 minutes. Note: Backend Workflows are a paid Bubble plan feature. If you are on the Free plan, you cannot schedule automatic token refresh. You can still refresh the token on page load using a front-end workflow, but tokens will expire during inactive sessions. For the actual licensing call, add a third call in the Shutterstock API Connector group named 'License Image'. Set the method to POST, URL to `/images/licenses`. Add a shared header `Authorization: Bearer [App Data access_token field]` marked Private. The body should be JSON with the structure `{ "images": [{ "image_id": "<dynamic>", "subscription_id": "<your subscription ID>", "format": "jpg", "size": "huge" }] }`. RapidDev's team has set up this exact token refresh and licensing architecture for Bubble clients — if you need help structuring the Backend Workflow logic, a free scoping call is available at rapidevelopers.com/contact.

1{
2  "token_exchange_call": {
3    "name": "Get Access Token",
4    "method": "POST",
5    "url": "https://accounts.shutterstock.com/oauth/token",
6    "body_type": "Form-urlencoded",
7    "use_as": "Action",
8    "body_params": [
9      { "key": "grant_type", "value": "client_credentials" },
10      { "key": "client_id", "value": "<your_client_id>", "private": true },
11      { "key": "client_secret", "value": "<your_client_secret>", "private": true }
12    ]
13  },
14  "licensing_call": {
15    "name": "License Image",
16    "method": "POST",
17    "path": "/images/licenses",
18    "use_as": "Action",
19    "shared_header_from_group": "Authorization: Bearer [App Data token field] — Private",
20    "body": {
21      "images": [
22        {
23          "image_id": "<dynamic>",
24          "subscription_id": "<your_subscription_id>",
25          "format": "jpg",
26          "size": "huge"
27        }
28      ]
29    }
30  }
31}