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

# Customizing the Connect Portal

> Control your end-user integration experience by customizing Connect Portal.

The **Connect Portal** is a ready-made interface that lets your users connect their third-party app accounts to your application.

<Frame>
  <img src="https://mintcdn.com/paragon/VPMcg_H0p5RWAFJc/assets/image%20(59).png?fit=max&auto=format&n=VPMcg_H0p5RWAFJc&q=85&s=4d97f25e89251ff3b97cceee39dc79ee" alt="Paragon's out-of-the-box Connect Portal" width="1584" height="1366" data-path="assets/image (59).png" />
</Frame>

To customize the Connect Portal for a specific integration, go to the Integration Overview page and click **Customize Connect Portal**. This opens the **Connect Portal Editor**.

Within the Connect Portal Editor, you can tailor several aspects of the user experience:

* **[Overview](#overview):** Update the integration's description shown in the Overview tab.
* **[Configuration](#configuration):** Adjust how workflows and workflow settings appear in the Configuration tab.
* **[Appearance](#appearance):** Change the visual style of the Connect Portal.

## Overview

There are two options you can edit in the **Overview** tab:

* **Short description:** a one-line description of your integration that appears at the top of the Connect Portal.
* **Overview**: a long-form description of your integration. This description is the first thing your users see when opening the Connect Portal, so this is the best place to describe and showcase your integration's benefits in detail to your users.

<Info>
  You can use [Markdown formatting](https://commonmark.org/help/) in the Overview section.
</Info>

<Frame>
  <img src="https://mintcdn.com/paragon/HSp5hB8tE4Z6e44m/assets/Using%20Markdown%20in%20Paragon%20Connect%20Portal%20(1).png?fit=max&auto=format&n=HSp5hB8tE4Z6e44m&q=85&s=d5cb0b4f3c4306c7fb7f92359945ca55" alt="" width="2358" height="904" data-path="assets/Using Markdown in Paragon Connect Portal (1).png" />
</Frame>

## Configuration

### Settings

Under the **Settings** section of the Configuration tab, you'll be able to create user-facing settings that allow your users to configure parameters of their workflows from the Connect Portal.

Some example use cases of User Settings include:

* **Slack:** choosing which channel that messages should be sent in
* **Salesforce:** choosing a custom opportunity stage that new opportunities created in
* **Hubspot:** choosing a custom lead status that new leads should be created with
* **Jira:** choosing which Jira user that new issues should be assigned to

<Frame>
  <img src="https://mintcdn.com/paragon/VPMcg_H0p5RWAFJc/assets/image%20(76).png?fit=max&auto=format&n=VPMcg_H0p5RWAFJc&q=85&s=b30a0c948397a17365ccbd829f5ef557" alt="" width="2730" height="1312" data-path="assets/image (76).png" />
</Frame>

<Card title="User Settings" href="/connect-portal/workflow-user-settings" horizontal icon={<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#6747e7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right-icon lucide-arrow-right"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>}>
  Learn more about adding and configuring User Settings to let your users customize their integration and workflows.
</Card>

### Workflows

Under the **Workflows** section of the Configuration tab, you can control the visibility and customize the description of workflows that appear in the Connect Portal.

<Card title="Displaying Workflows" href="/connect-portal/displaying-workflows" horizontal icon={<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#6747e7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right-icon lucide-arrow-right"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>}>
  Learn more about controlling which workflows appear in the Connect Portal and how they are displayed to your users.
</Card>

## Appearance

### Theme

The Connect Portal supports both light and dark themes, allowing you to choose a theme that matches your application's overall theme. The Connect Portal can also detect and match your user's system theme settings by selecting "Match System Theme" from the theme dropdown.

#### Light

<Frame>
  <img src="https://mintcdn.com/paragon/cqJFSKyZXJDp3p3z/assets/Paragon%20Connect%20Portal%20in%20Light%20Mode.png?fit=max&auto=format&n=cqJFSKyZXJDp3p3z&q=85&s=d75f3aac3db5f4f15e0c1ed9366a43f9" alt="" width="3038" height="1454" data-path="assets/Paragon Connect Portal in Light Mode.png" />
</Frame>

#### Dark

<Frame>
  <img src="https://mintcdn.com/paragon/cqJFSKyZXJDp3p3z/assets/Paragon%20Connect%20Portal%20in%20Dark%20Mode.png?fit=max&auto=format&n=cqJFSKyZXJDp3p3z&q=85&s=82f9fcbad73101faaa1fae997669ed33" alt="" width="3074" height="1446" data-path="assets/Paragon Connect Portal in Dark Mode.png" />
</Frame>

### Paragon Branding

You can optionally turn off the Paragon-branded footer in your Connect Portal.

<Note>
  Whitelabeling the Connect Portal, which allows you to remove Paragon branding, is available on our **Pro plan** and above. Please [contact us](mailto:sales@useparagon.com) to enable this option on your account.
</Note>

<Frame>
  <img src="https://mintcdn.com/paragon/867oBBVpxd2C3zc4/assets/Whitelabelling%20the%20Connect%20Portal%20in%20Paragon%20Connect.gif?s=2f32273fe16eeb057995a80a729462bc" alt="" width="1510" height="754" data-path="assets/Whitelabelling the Connect Portal in Paragon Connect.gif" />
</Frame>