Client Portal

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.

There are two portals:

Portal	Shortcode	Who uses it
Admin Portal	[wpsigner_admin_portal]	Your team (admins, managers, senders, viewers)
Signer Portal	[wpsigner_client_portal]	External signers who need to check their documents

---

Enabling the Portal

1. Go to WPsigner → Client Personalization 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 Client Personalization.

---

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 → Client Personalization → Portal Status, 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:

[wpsigner_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	Only their own contracts
Sender	Only their own contracts
Viewer	Only their own contracts (read-only)

[!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.

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:

[wpsigner_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 a dedicated page: WPsigner → Client Personalization.

Portal Logo

Upload a specific logo for the portal, separate from your main company logo in General Settings.

• 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 General Settings 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.

/* 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

[!WARNING] 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
[wpsigner_admin_portal]	Admin / Manager dashboard	Any WPsigner role
[wpsigner_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.

[!WARNING] 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 — Users only see their own data (unless they’re an admin)
• 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 Client Personalization
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, or they don’t have permission to see other users’ documents (only admins see all).

---

Next Steps

• Creating Documents — Learn how to create and send documents
• Signer Workflows — Understand sequential vs parallel signing
• Email Templates — Customize the emails signers receive