> ## Documentation Index
> Fetch the complete documentation index at: https://docs.refold.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Display Apps on the Client-side

> To diplay the apps to your end-users in the frontend, you can develop your own custom UI or redirect your users to Hosted Portal.

By using the response that you will receive from either the Applications API or the SDK method, you can now render and display your apps on the frontend.

See a sample implementation of how we displayed the apps using the response.

<img height="200" src="https://mintcdn.com/cobalt-55/rCTCKBbhiwGPdeWb/images/implementation/display.png?fit=max&auto=format&n=rCTCKBbhiwGPdeWb&q=85&s=aeb8cddb57dba24b215b94beefe71a94" alt="Display Apps on the Frontend" data-path="images/implementation/display.png" />

Refold connect lets your users connect their integration accounts. It stores the credentials securely and lets you make authorized API calls on your users’ behalf (linked account in Refold).

<img height="200" src="https://mintcdn.com/cobalt-55/rCTCKBbhiwGPdeWb/images/implementation/display_apps_sequence.png?fit=max&auto=format&n=rCTCKBbhiwGPdeWb&q=85&s=e1b2d88a3276449bb23ed020c5a1690a" alt="Sequence Diagram for Displaying Apps on Frontend" data-path="images/implementation/display_apps_sequence.png" />

## Building Custom UI

To build a custom UI for your integrations, you can do so by using the [Refold SDKs](/sdks/client-side-sdks/js-sdk#getapp) or the [List Applications API](https://docs.gocobalt.io/api-reference/integration-meta/list-applications).

If you want to create your own frontend for the integration and want to fetch information about the various integrations that will be available to the end-users, you can do so by using the

<Steps>
  <Step title="Request">
    Call the **.getapp()** method provided in the SDK or the [List Applications API](https://docs.gocobalt.io/api-reference/integration-meta/list-applications) to get a list of enabled apps.

    <CodeGroup>
      ```JavaScript JS SDK theme={null}
      cobalt.getApp()  // to get a list of all apps
      cobalt.getApp("slack")  // to get details of a single app, e.g. slack
      ```

      ```JavaScript cURL theme={null}
      curl --request GET \
        --url https://api.gocobalt.io/api/v2/public/application \
        --header 'linked_account_id: <linked_account_id>' \
        --header 'x-api-key: <api-key>'
      ```
    </CodeGroup>

    <Tip>
      You can also fetch information about a single application by providing the app slug in the [Get Application API](https://docs.gocobalt.io/api-reference/integration-meta/get-application).
    </Tip>
  </Step>

  <Step title="Handle Response">
    In the response, you will receive an array containing the List of Applications that were enabled for the end-user. You can find information about the applications like name, slug, icon URL, the app was connected by user or not etc which can be used to build the Custom UI of your app.

    ```JavaScript Response theme={null}
    [
    	{
    	"name": "Salesforce",
    	"icon": "https://cobalt-app-logos.s3.ap-south-1.amazonaws.com/salesforce/logo.png",
    	"description": "Salesforce is a leading enterprise customer relationship manager (CRM) applications.",
    	"auth_type": "oauth2",
    	"type": "salesforce",
    	"app_id": "669e0767d6c828b822c4f650",
    	"tags": [
    		"CRM"
    	        ],
    	"version": {
    		"_v": "1.0.0",
    		"description": "Salesforce is a leading enterprise customer relationship manager (CRM) applications."
    	            },
    	"slug": "salesforce",
        "reauth_required": false
        },
        {
            "name": "Copper",
            "icon": "https://cobalt-app-logos.s3.ap-south-1.amazonaws.com/copper/logo.png",
            "description": "Copper is a customer relationship management (CRM) platform focused on automation and simplicity. It is built for businesses that use Google Workspace.",
            "auth_type": "keybased",
            "tags": [
                "CRM"
            ],
            "auth_input_map": [
                {
                    "name": "api_token",
                    "label": "API Key",
                    "placeholder": "Please enter the API key",
                    "required": true,
                    "type": "text"
                },
                {
                    "name": "email",
                    "label": "Email Address",
                    "placeholder": "Please enter the email of the token owner",
                    "required": true,
                    "type": "text"
                }
            ],
            "version": {
                "_v": "1.0.0",
                "description": "Copper is a customer relationship management (CRM) platform focused on automation and simplicity. It is built for businesses that use Google Workspace."
            },
            "slug": "copper",
            "reauth_required": false
        }
    ]
    ```

    <Note>
      Learn more about the Embedded and Seamless flow of Hosted Portal [here](https://docs.gocobalt.io/ship/auth_flows/flows).
    </Note>
  </Step>
</Steps>

You have successfully received the response and can now render the applications on your frontend using it.

## Checkpoint + Next Step

<Check>
  You have now successfully built a Custom UI for your end users which displays all the integrations enabled for them. Next step is to [Manage Connections](https://docs.gocobalt.io/implementation/integrate/manage-connection) for your customers.
</Check>