Skip to navigation
ExtensibilityExperience BuilderZuora Workflows with Experience Builder

Trigger Zuora workflows from Experience Builder: Process flow

View as Markdown

Learn how to trigger a Zuora workflow from an Experience Builder button using a callout-triggered workflow and a Generic HTTP integration.

You can trigger Zuora workflows from a button in an Experience Builder page by using a callout-triggered Zuora workflow and a Generic HTTP integration.

Use a callout-triggered Zuora Workflow. For more information, see Workflow types and triggers.

  1. Get Workflow credentials from callout configuration.

    1. In Zuora Workflows, open the workflow that you want to trigger.
    2. Select Settings > Callout configuration.
    3. Copy the callout URL and API-Token from the Callout Configuration section. For more information on API-Token authentication and triggering workflows via callouts, see API endpoints and modes for triggering a workflow.

  2. Create a Generic HTTP integration in Experience Builder with the base URL and headers.

    1. In Experience Builder, click the + New Integration button.

    2. Configure the integration with the following settings:

      • Source: Generic HTTP
      • API-Token: value from the Workflow Callout Configuration
      • Content-Type: application/json
      • Base URL: https://workflow.test.zuora.com/api/v1/workflows/

      Use the Generic HTTP data source with the workflow base URL and the workflow-specific API token from the callout configuration. For example, https://workflow.test.zuora.com/api/v1/workflows/ + workflow-specific API-Token from Callout Configuration.

      Do not use the tenant OAuth integration.

      CORS ‘Failed to fetch’ error is displayed when the integration uses the Zuora integration data source instead of the Generic HTTP data source.

      HTTP 401 or 403 Unauthorized error is displayed when The API-Token header is missing or does not match the value configured in the workflow callout settings.

  3. Add a POST query with the workflow input parameters:

    1. In the Generic HTTP integration, add a new query.

    2. Configure the query:

      • Query Type: POST

      • Path: [WORKFLOW_ID]/run, where [WORKFLOW_ID] is the workflow ID that you copied in step 1

      • Request Body: Include any input parameters your workflow requires.

        Example request body format (update the fields based on your workflow input parameters):

        {{ ({ accountId: $queries.account?.data?.response?.id, userId:

        currentUser.properties.userId }) }}

        HTTP 404 error is displayed when an incorrect workflow ID is provided.

        If the workflow executes but produces unexpected results, verify that the request body in the query matches the workflow input parameters. Review the workflow input schema in Workflow Studio and adjust the request body accordingly.

    3. Save the query.

  4. Bind the query to a button on the Experience Builder page.

    1. Add a button component on your Experience Builder page.

    2. Configure button onClick action:

      1. Update state: $state.isLoading = true (optional, for visual feedback)
      2. Execute the POST query that you created in Step 3.
      3. Update state: $state.isLoading = false

    3. Add user feedback components:

      • Success snackbar: Displays when the workflow completes successfully
      • Error snackbar: Displays error message when the workflow call fails