--- schema_version: "1" id: 269250aa47c09e6edf85b4e57e984bfac3c40b1f505cc4ac2d1513dbd14dc4b8 title: API Console collection: mulesoft version: current locale: en-us portal_url: https://docs.salesforce.com/mulesoft/current/en-us/api-community-manager/api-console.md canonical_url: https://docs.mulesoft.com/api-community-manager/api-console source_site: docs.mulesoft.com content_type: documentation content_hash: 06ecc3999fd80bc5401089adcb55ab79b27be664aaa0e041a283b20a924a6ccf description: MuleSoft Documentation Site latest: true --- --- product: API Community Manager --- # API Console > For the full documentation index, see: https://docs.mulesoft.com/llms.txt The interactive API Console component shows information about your REST APIs and their methods, and enables users to test the methods by sending requests. Endpoints are displayed in alphabetical order. Console components include API Console, API Console Documentation, API Console Instances, API Console Navigation, and API Console Request Panel. In Site Builder, you can add multiple console components to the same page. Changes to a console component are visible in all other console components on that page that display the same API. For example, selecting the **Summary** tab in an API Console results in **Summary** tab selection in all API Consoles on the same page that display the same API. The component shows the public API instances and documentation from [Anypoint Exchange](https://docs.mulesoft.com/exchange/). If an API’s specification includes OAuth 2.0 security, users either select a client application in the **Credentials source** list to populate the client ID and client secret automatically, or they select **Custom credentials** in the list to enter the client ID and client secret manually. ![Credentials source](/mulesoft/current/en-us/api-community-manager/_images/credentials-source.png) By default, the API console sends requests of 2 megabytes or less from the browser through Salesforce Experience Cloud to an API. To send requests directly from the browser to an API instance, which allows requests with no size limit, open **Setup** > **Custom Metadata Type** > **ACM API Console Configuration Metadata** > **Manage ACM API Console Configuration Metadata** > **ACM API Console Configuration** > **Edit** and select **Browser Requests Enabled**. This setting applies to all API instances in the community and does not affect the mocking service. You can specify values for the following parameters of the API console: **API** Specifies the API to display. **Show Documentation Pages** Shows the API’s documentation pages. **Expand endpoints on start** Expands the documentation of the API endpoints when the page loads. **Enable resource filtering** Shows a search bar on the navigation panel so users can filter the API resources and show only the resources that match their search terms. **Show endpoints toggle button** Shows a button on the navigation panel to expand or collapse all endpoints. **Remove overview items from navigation** Removes the overview links and shows the overview when the user clicks the endpoint name. **Enable expandable request panel** Enables expanding and collapsing the request panel by clicking the arrows at the edge of the panel. **Link Hover Color** Specifies the hover link color. **Button Text Color (Optional)** Specifies the color of button text. **Button Hover Text Color (Optional)** Specifies the color of button hover text. Default is the button text color. **Headline Font Family (Optional)** Specifies the API console headline font family. **Error Color (Optional)** Specifies the color of error messages. **Method Label Get Background Color** Specifies the GET method label background color. **Method Label Get Color** Specifies the GET method label color. **Method Label Post Background Color** Specifies the POST method label background color. **Method Label Post Color** Specifies the POST method label color. **Method Label Put Background Color** Specifies the PUT method label background color. **Method Label Put Color** Specifies the PUT method label color. **Method Label Delete Background Color** Specifies the DELETE method label background color. **Method Label Delete Color** Specifies the DELETE method label color. **Method Label Patch Background Color** Specifies the PATCH method label background color. **Method Label Patch Color** Specifies the PATCH method label color. **Method Label Options Background Color** Specifies the OPTIONS method label background color. **Method Label Options Color** Specifies the OPTIONS method label color. **Method Label Head Background Color** Specifies the HEAD method label background color. **Method Label Head Color** Specifies the HEAD method label color. If an **API Console** navigation item such as an API endpoint or method has a long name, the name wraps around to a second line. By default, the line breaks at the end of a word, using the `word-break` CSS property set to the value `break-word`. If you wish to select different line break behavior: 1. In the API Community Manager control panel, click **Shortcuts to applications** and select **Site Builder**. Click **Settings** > **Advanced**. If you don’t see **API Community Manager** in **App Launcher**, follow [Enable API Community Manager Control Panel](https://docs.mulesoft.com/api-community-manager/manual-setup#enable-api-community-manager-control-panel). 2. In the section **Head Markup**, click **Edit Head Markup**. 3. Insert this code: ```html ``` 4. Optionally, replace `api-navigation` with any selector that contains the component `api-navigation`. 5. Optionally, replace `break-word` with any valid value for the `word-break` CSS property. To link directly to an endpoint or type in this component, set the URL query paramters `method`, `path`, or `type`. `method` must be in lower case. `type` is case sensitive. If `method` and `path` are defined and exist in the API definition, then navigation will open there regardless of the `type` parameter. If `method` or `path` is not defined and `type` is defined and exists in the API definition, then navigation will open at the specified `type`. Examples: - `communityapi/a003D000001pQpjQAE/basicapi?method=get&path=/users/{id}` - `communityapi/a003D000001pQpjQAE/basicapi?type=Users` ## API Console Documentation The API Console Documentation component shows the documentation about an API from [Anypoint Exchange](https://docs.mulesoft.com/exchange/). You can specify values for the following parameters of the API Console Documentation: **API** Specifies the API to display. **Show Documentation Pages** Shows the API documentation pages. **Method Label Get Background Color** Specifies the GET method label background color. **Method Label Get Color** Specifies the GET method label color. **Method Label Post Background Color** Specifies the POST method label background color. **Method Label Post Color** Specifies the POST method label color. **Method Label Put Background Color** Specifies the PUT method label background color. **Method Label Put Color** Specifies the PUT method label color. **Method Label Delete Background Color** Specifies the DELETE method label background color. **Method Label Delete Color** Specifies the DELETE method label color. **Method Label Patch Background Color** Specifies the PATCH method label background color. **Method Label Patch Color** Specifies the PATCH method label color. **Method Label Options Background Color** Specifies the OPTIONS method label background color. **Method Label Options Color** Specifies the OPTIONS method label color. **Method Label Head Background Color** Specifies the HEAD method label background color. **Method Label Head Color** Specifies the HEAD method label color. **Headline Font Family (Optional)** Specifies the API console headline font family. ## API Console Instances The API Console Instances component shows the list of public instances of an API, also known as endpoints. The component shows the public API instances from [Anypoint API Manager](https://docs.mulesoft.com/api-manager/latest/). You can specify values for the following parameters of the API Console Instances: **API** Specifies the API whose instances are displayed. ## API Console Navigation The API Console Navigation component shows the API console component’s navigation. The component shows the public API instances and documentation from [Anypoint Exchange](https://docs.mulesoft.com/exchange/). You can specify values for the following parameters of the API Console Navigation: **API** Specifies the API to display. **Show Documentation Pages** Shows the API’s documentation pages. **Method Label Get Background Color** Specifies the GET method label background color. **Method Label Get Color** Specifies the GET method label color. **Method Label Post Background Color** Specifies the POST method label background color. **Method Label Post Color** Specifies the POST method label color. **Method Label Put Background Color** Specifies the PUT method label background color. **Method Label Put Color** Specifies the PUT method label color. **Method Label Delete Background Color** Specifies the DELETE method label background color. **Method Label Delete Color** Specifies the DELETE method label color. **Method Label Patch Background Color** Specifies the PATCH method label background color. **Method Label Patch Color** Specifies the PATCH method label color. **Method Label Options Background Color** Specifies the OPTIONS method label background color. **Method Label Options Color** Specifies the OPTIONS method label color. **Method Label Head Background Color** Specifies the HEAD method label background color. **Method Label Head Color** Specifies the HEAD method label color. ## API Console Request Panel The API Console Request Panel component shows a panel where users can test an API by making requests to it. The component shows the public and managed API instances from [Anypoint API Manager](https://docs.mulesoft.com/api-manager/latest/). You can specify values for the following parameters of the API Console Request Panel: **API** Specifies the API to display. **Show Documentation Pages** Shows the API’s documentation pages. **Method Label Get Background Color** Specifies the GET method label background color. **Method Label Get Color** Specifies the GET method label color. **Method Label Post Background Color** Specifies the POST method label background color. **Method Label Post Color** Specifies the POST method label color. **Method Label Put Background Color** Specifies the PUT method label background color. **Method Label Put Color** Specifies the PUT method label color. **Method Label Delete Background Color** Specifies the DELETE method label background color. **Method Label Delete Color** Specifies the DELETE method label color. **Method Label Patch Background Color** Specifies the PATCH method label background color. **Method Label Patch Color** Specifies the PATCH method label color. **Method Label Options Background Color** Specifies the OPTIONS method label background color. **Method Label Options Color** Specifies the OPTIONS method label color. **Method Label Head Background Color** Specifies the HEAD method label background color. **Method Label Head Color** Specifies the HEAD method label color. **Link Hover Color** Specifies the color of links when the cursor hovers over them. **Button Text Color (Optional)** Specifies the color of button text. **Button Hover Text Color (Optional)** Specifies the color of button hover text. Default is the button text color. **Headline Font Family (Optional)** Specifies the headline font family. **Error Color (Optional)** Specifies the color of error messages. To enable users to select an application to populate the `clientId` and `clientSecret` credential values, add credential annotations to the application specification: ```text /all-query: get: queryParameters: query_id: type: string (credentialType): id query_secret: type: string (credentialType): secret /all-headers: get: headers: header_id: type: string (credentialType): id header_secret: type: string (credentialType): secret ``` If your site has a custom request access implementation, update the application selector by dispatching the following event. Without this event, each time a user adds an application, the user must refresh the page to show the application in the **Application** menu. ```text this.dispatchEvent(new Event('acm:application_created_success', {bubbles: true})) ```