Skip to navigation
ExtensibilityExperience Builder

Set up an external API integration

View as Markdown

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.

1

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:

    FieldDescription
    NameEnter 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 headersSpecify 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 URLEnter 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 tokenThe credential used to authenticate requests.
    Query parametersValues added to the request URL to filter, search, or control the response.
    Other required credentialsAny 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.

2

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

  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

    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.