> This page is for Docs.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://zuora.ferndocs.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://zuora.ferndocs.com/_mcp/server.

# Set up an external API integration

> Learn how to create a reusable integration that connects Experience Builder to a third-party API, then use that integration in Studio data queries or with the AI agent to retrieve and bind external data to your pages and components.

Learn how to create a reusable integration that connects Experience Builder to a third-party API, then use that integration in Studio data queries or with the AI agent to retrieve and bind external data to your pages and components.

Make sure you have the API information required by the external service, such as:

* Base URL
* Authentication method
* Required headers
* Query parameters or request body values, if applicable

Create an integration when you want Experience Builder to connect to a third-party API and reuse that connection across your workspace.

After you create and save the integration, you can use it in Studio component data queries or ask the AI agent to use the named integration when wiring data into an experience.

Perform these steps to set up an external API integration:

1. Navigate to **Extension Studio** > **Experience Builder** > **Integrations** tab.
2. Click **New Integration**.
3. In the **Source** type list, select the connector that matches the API that you want to connect to. For most third-party REST APIs, select Generic HTTP. If a more specific source type is available and matches your API, use that option instead.
4. Enter the connection details for the API. Depending on the external service, this can include:

   | Field                      | Description                                                                                                                                                                                                                                                                  |
   | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
   | Name                       | Enter a unique, descriptive name for the integration. This name is used when referencing the integration from Component data or when instructing the agent to use the integration.                                                                                           |
   | Default headers            | Specify HTTP headers that are sent with every request made through this integration. Use this section to configure values such as API keys, authentication tokens, content types, or other headers required by the target API. Select **Add New** to add additional headers. |
   | Base URL                   | Enter the base endpoint URL of the target API. Data queries specify only the resource path, which is appended to this base URL when requests are sent.                                                                                                                       |
   | API key or token           | The credential used to authenticate requests.                                                                                                                                                                                                                                |
   | Query parameters           | Values added to the request URL to filter, search, or control the response.                                                                                                                                                                                                  |
   | Other required credentials | Any additional authentication or connection details required by the external service.                                                                                                                                                                                        |
5. Save the integration.

   The saved integration becomes a reusable data source for the workspace.

Perform these steps to use the saved integration in Studio to retrieve data for pages and components.

1. Navigate to **Extension Studio** > **Experience Builder**.
2. Select an existing project or create a new one.
3. Create a new page or select an existing one.
4. Open **Component** data.

   ![component\_data](/_fern-img/da0fe149fd206e288de75b80e6e86d71b73ae9e8c3dea0111a9d92d44fc0cb65.webp)
5. Add a new data query with the integration you created.
6. Specify the request details, such as:

   * HTTP method
   * Path
   * Headers
   * Request body
7. Bind the returned data to the UI elements that need it.

   ![bind\_returned\_data](/_fern-img/c43dd068c389734861d97a86d12c98082b26ae10adfd1ef59bdab9fe0e6a0057.webp)

   Alternatively, you can also ask the AI agent to wire up the integration for you. When you prompt the agent, include:

   * The endpoint to call
   * The data you want returned
   * The name of the integration you want it to use

   For example, explicitly name the saved integration, for example, **ReqRes integration**, so the agent reuses the existing data source instead of creating a new one.