# Client Portal

> Complete guide to setting up and using the WPsigner Client Portal — public-facing dashboards for administrators and signers to manage contracts.

edition: pro
Edition: Pro
AI note: This page requires WPsigner Pro. Do not tell Lite users they already have this feature.
HTML: https://docs.wpsigner.com/core-features/client-portal/
Markdown: https://docs.wpsigner.com/md/core-features/client-portal.md
Source file: core-features/client-portal.md

---

The **Client Portal** lets you create public-facing dashboards where your team and your signers can view and manage contracts directly on your WordPress site — no admin access needed.

> **Requires WPsigner Pro**
Client Portal shortcodes are not included in **Lite**. [Upgrade to Pro](https://wpsigner.com/pricing/?utm_source=docs&utm_medium=upgrade&utm_campaign=client-portal) · [Lite vs Pro](/getting-started/lite-vs-pro/)

There are two portals:

| Portal | Shortcode | Who uses it |
|--------|-----------|-------------|
| **Admin Portal** | `[insigner_admin_portal]` | Your team (admins, managers, senders, viewers) |
| **Signer Portal** | `[insigner_client_portal]` | External signers who need to check their documents |

---

## Enabling the Portal

1. Go to **WPsigner → Appearance → Client Portal** in the WordPress admin
2. Under **Portal Status**, check **Enable Client Portal**
3. Click **Save Changes**

> **tip**
The shortcodes won't render anything until you enable the portal in Appearance → Client Portal.

---

## Login Mode

Choose how users authenticate when accessing the portal:

| Mode | Behavior |
|------|----------|
| **WordPress Login** | Redirects to `wp-login.php`. Best if users already have WP accounts. |
| **Custom Login Page** | Shows a branded login form directly on the portal page. Best for a seamless, white-label experience. |

### Setting Up Custom Login

1. In **WPsigner → Appearance → Client Portal**, set **Login Mode** to **Custom Login Page**
2. A **page selector** dropdown appears — choose the WordPress page where you placed the portal shortcode
3. Save. Non-logged-in visitors will see a branded login form on that page

The custom login form includes:
- Your **portal logo** (or company logo / brand initials as fallback)
- **Rate limiting** — blocks IP after 5 failed attempts for 15 minutes
- **Forgot Password** link that goes to WordPress password recovery

---

## Setting Up the Admin Portal

The Admin Portal gives your team a complete dashboard to view, search, and manage all contracts.

### Step 1: Create the Page

1. Go to **Pages → Add New** in WordPress
2. Give it a title (e.g., "Document Portal" or "Admin Dashboard")
3. Add the shortcode:

```
[insigner_admin_portal]
```

4. Publish the page

### Step 2: Configure Permissions

Users see contracts based on their **WPsigner role**:

| Role | Can see |
|------|---------|
| **Administrator** | All contracts from all users |
| **WPsigner Admin** | All contracts from all users |
| **Manager** | All contracts; can manage documents created by other users |
| **Sender** | Only their own contracts |
| **Viewer** | All contracts (read-only for documents created by other users) |

> **important**
Users must have a WordPress account with a WPsigner role to access the Admin Portal. Users without a WPsigner role will see an "Access Denied" message. See [Team Roles & Permissions](/core-features/team-roles/) for the complete capability matrix.

### What's Included in the Admin Portal

**Stats Bar** — Five cards at the top showing:
- Total contracts
- Signed / Completed
- Pending
- Declined
- Expired

**Contract Table** — A paginated, searchable table with:
- Document title
- Creation date
- Signers (with progress)
- Status badge
- Action buttons (View Details, Download PDF, View Certificate)

**Date Filter** — Two date pickers to filter contracts by date range.

**Search** — Real-time search by document title.

**Status Tabs** — Filter by status: All, Signed, Pending, Declined.

**Weekly Overview Chart** — A bar chart showing the last 7 days of document activity (signed, sent, completed, declined).

**Recent Activity Feed** — A live feed of the latest actions across all documents.

**Detail Modal** — Click any contract for a detailed view with:
- Document metadata
- Signer list with individual statuses
- Full audit trail
- Download/action buttons

---

## Setting Up the Signer Portal

The Signer Portal gives external signers a simple view of all documents they've been asked to sign.

### Step 1: Create the Page

1. Go to **Pages → Add New** in WordPress
2. Give it a title (e.g., "My Contracts" or "Signer Portal")
3. Add the shortcode:

```
[insigner_client_portal]
```

4. Publish the page

### Step 2: Create WP Accounts for Signers

Signers need a WordPress account with an email address matching the signer email on their documents. When they log in, the portal shows all contracts linked to their email.

> **note**
You don't need to assign a WPsigner role to signers. Any WordPress user can access the Signer Portal — it matches by email.

### What's Included in the Signer Portal

**Stats Bar** — Three cards:
- Total documents
- Signed
- Pending

**Contract Table** — Lists all their documents with:
- Document title
- Date received
- Signer status (Pending / Signed / Declined)
- Action buttons

**Available Actions:**

| Action | When |
|--------|------|
| **Sign Now** | When signer status is pending – goes directly to the signing page |
| **Download PDF** | When document is completed |
| **View Certificate** | When audit certificate is available |
| **View Details** | Always – shows document info and signer list |

---

## Branding & Customization

All portal appearance settings are managed from **WPsigner → Appearance → Client Portal**.

### Portal Logo

Upload a **specific logo for the portal**, separate from your main company logo in Appearance → Brand.

- If a portal logo is set, it appears in the **portal header** and **login screen**
- If no portal logo is set, the **company logo** from Appearance → Brand is used as fallback
- If neither is set, the **brand initials** are shown in a colored badge
- Recommended: max 200px wide, transparent background

### Welcome Text

Set a **custom greeting message** shown on the portal dashboard. Logged-in users see:

> **Hello, [User Name]**  
> Your custom welcome text here.

Max 500 characters. Leave empty to show only the greeting without extra text.

### Primary Color

Your main brand color. Used for:
- Buttons and active states
- Tab indicators
- Stat card icons
- Activity chart bars
- Login form accents
- Portal header accent

### Accent Color

A secondary color used for:
- Status badges (e.g., Signed)
- Visual accents and highlights
- Chart elements

Both colors include a **live preview** in the admin panel so you can see how they look before saving.

### Custom CSS

For advanced customization, you can add your own CSS rules to further style the portal.

```css
/* Example: change stat card background */
.wps-portal-stat-card {
    background: #f8f9fa;
}

/* Example: rounded contract table */
.wps-portal-table {
    border-radius: 16px;
}
```

- Max 5,000 characters
- HTML tags are automatically stripped
- Dangerous patterns (`@import`, `url()`, `expression()`, etc.) are blocked for security

> **caution**
Incorrect CSS may break the portal layout. Test your styles carefully.

### Company Branding (Fallback)

The portal automatically uses your **Company Name** from WPsigner's general settings (**WPsigner → Settings**). The brand name appears in the portal header alongside the logo.

---

## Responsive / Mobile Support

The Client Portal is fully responsive:

| Viewport | Layout |
|----------|--------|
| **Desktop** (1024px+) | Full grid: table + activity sidebar |
| **Tablet** (768px) | Single column, stats in 3-col grid, table stacked as cards |
| **Mobile** (480px) | Stats 2-col, compact tabs, fullscreen modal, brand name hidden |

No configuration needed — the layout adapts automatically.

---

## Shortcode Reference

| Shortcode | Portal | Required Role |
|-----------|--------|---------------|
| `[insigner_admin_portal]` | Team dashboard | Any WPsigner role |
| `[insigner_client_portal]` | Signer dashboard | Any WP user (matched by email) |

You can place these shortcodes on any WordPress page. Both portals can coexist on separate pages.

> **caution**
Do not place both shortcodes on the same page. Each portal should have its own dedicated page.

---

## Security

The Client Portal includes multiple layers of security:

- **Role-based access** — Senders are scoped to their own documents; Viewers, Managers, and Admins can view all documents
- **Nonce verification** — Every AJAX request is verified with WordPress nonces
- **Rate limiting** — Custom login blocks brute-force attempts
- **Input sanitization** — All user inputs are sanitized server-side
- **Output escaping** — All data is escaped before rendering
- **Security headers** — `X-Frame-Options` and `X-Content-Type-Options` are set on portal pages
- **Separate nonces** — Each action (login, logout, download, admin, signer) uses its own nonce

---

## Troubleshooting

### "Access Denied" page

The user doesn't have the required WPsigner role. Go to **WPsigner → Users** and assign them a role.

### "Portal not showing"

1. Make sure **Enable Client Portal** is checked in **Appearance → Client Portal**
2. Verify the shortcode is on a published page
3. Clear any caching plugins

### "Login form not appearing"

Check that **Login Mode** is set to **Custom Login Page** and a page is selected in the dropdown.

### "Signer sees no documents"

The signer's WordPress email must match the email used when adding them as a signer. Check both emails match exactly.

### "Stats show 0 for everything"

The user may not have any documents yet. Senders only see documents they created; Viewers, Managers, WPsigner Admins, and WordPress Administrators can view all documents.

---

## Next Steps

- [Creating Documents](/core-features/creating-documents/) — Learn how to create and send documents
- [Signer Workflows](/core-features/signer-workflows/) — Understand sequential vs parallel signing
- [Appearance](/customization/appearance/) — Portal tab plus Brand and Signing Page
- [Email Templates](/customization/email-templates/) — Customize the emails signers receive