Custom Pages in Client Portal

Overview

Custom pages allow you to create fully customized pages for your client portal using the visual content builder. These pages can include dynamic content using merge tags, and can be linked from the portal menu.

Creating a Custom Page

Step 1: Access Page Builder

1. Navigate to Settings → Client Portal
2. Click the "Page Builder" tab
3. Click "Create New Page"

Step 2: Basic Information

1. Title: Enter a descriptive title for your page
2. Slug: Auto-generated from title (or customize it)
3. Description: Optional description for the page
4. Page Type: Choose from:

• Custom Page: Full control with content builder
• Invoices List: Pre-built template for listing invoices
• Invoice Detail: Template for single invoice view
• Proposals List: Template for listing proposals
• (And more...)

Step 3: Build Content

Use the visual content builder to design your page:

1. Drag Elements: Drag and drop content blocks onto the page
2. Add Text: Click text areas to edit
3. Add Images: Upload or select images
4. Add Merge Tags: Use the merge tag picker to insert dynamic variables
5. Style Elements: Use the styling panel to customize appearance

Step 4: Add Merge Tags

Merge tags allow you to display dynamic client data:

Example in Content:

<h1>Welcome {{contact.name}}!</h1>
<p>You have {{invoices.count}} invoices</p>
<p>Total outstanding: ${{invoices.total_due}}</p>

Available Merge Tags:

• Contact: {{contact.name}}, {{contact.email}}, etc.
• Company: {{company.name}}, {{company.address}}, etc.
• Invoices: {{invoice.number}}, {{invoice.total}}, etc.
• Projects: {{project.name}}, {{project.status}}, etc.
• Tasks: {{task.title}}, {{task.due_date}}, etc.
• System: {{system.current_date}}, {{system.company_name}}, etc.

See the Merge Tags Reference for complete list.

Step 5: SEO Settings

1. Meta Title: Title for search engines
2. Meta Description: Description for search engines

Step 6: Publish

1. Click "Save" to save as draft
2. Click "Publish" to make the page visible in the portal
3. Add the page to your portal menu (see Menu Manager)

Page Templates

Custom Page

Full control with the content builder. Use this for:

• Welcome pages
• Custom information pages
• Branded content
• Special announcements

Invoices List Template

Pre-built template for displaying a list of invoices:

• Automatically shows client's invoices
• Includes filtering and search
• Responsive table layout

Invoice Detail Template

Template for viewing a single invoice:

• Full invoice details
• Line items
• Payment information
• Download option

Proposals/Contracts Templates

Similar templates available for:

• Proposals list
• Proposal detail
• Contracts list
• Contract detail

Linking Custom Pages

Once a page is published, you can add it to your portal menu:

1. Go to Settings → Client Portal → Menu Items
2. Click "Add Menu Item"
3. Select Type: Custom Page
4. Choose your page from the dropdown
5. Set label and icon
6. Save

The page will now appear in the portal sidebar menu.

Merge Tags in Custom Pages

Displaying Client Information

<div class="welcome-section">
    <h1>Welcome, {{contact.first_name}}!</h1>
    <p>Email: {{contact.email}}</p>
    <p>Phone: {{contact.phone}}</p>
    @if(contact.company)
        <p>Company: {{company.name}}</p>
    @endif
</div>

Displaying Invoices

<div class="invoices-section">
    <h2>Your Invoices</h2>
    {{#each invoices}}
        <div class="invoice-item">
            <h3>Invoice {{invoice.number}}</h3>
            <p>Amount: ${{invoice.total}}</p>
            <p>Status: {{invoice.status}}</p>
            <p>Due: {{invoice.due_date}}</p>
        </div>
    {{/each}}
</div>

Displaying Projects

<div class="projects-section">
    <h2>Active Projects</h2>
    {{#each projects}}
        <div class="project-item">
            <h3>{{project.name}}</h3>
            <p>Status: {{project.status}}</p>
            <p>Progress: {{project.progress}}%</p>
        </div>
    {{/each}}
</div>

Tips for Custom Pages

1. Keep It Simple: Don't overwhelm clients with too much information
2. Use Clear Headings: Organize content with clear section headings
3. Include Action Items: Make it easy for clients to find what they need
4. Test Merge Tags: Preview pages to ensure merge tags work correctly
5. Mobile Responsive: Content builder creates responsive pages automatically
6. Brand Consistency: Match your portal branding colors and styles

Editing Published Pages

1. Go to Settings → Client Portal → Page Builder
2. Find the page you want to edit
3. Click "Edit"
4. Make your changes
5. Click "Save" or "Publish"

Changes are reflected immediately in the portal.

Unpublishing Pages

To temporarily hide a page without deleting it:

1. Edit the page
2. Uncheck "Published"
3. Save

The page will remain in your page list but won't be visible to clients. You can republish it anytime.

Deleting Pages

1. Go to Settings → Client Portal → Page Builder
2. Find the page you want to delete
3. Click "Delete"
4. Confirm deletion

Note: If the page is linked in your menu, remove it from the menu first.

Troubleshooting

Merge Tags Not Working

• Ensure merge tags use correct syntax: {{variable.name}}
• Check that the page type supports the variables you're using
• Preview the page to test merge tag replacement

Page Not Showing in Menu

• Verify the page is published
• Check that the menu item is enabled
• Verify the menu item type is set to "Custom Page"

Page Looks Incorrect

• Check custom CSS for conflicts
• Verify content builder saved correctly
• Clear browser cache
• Test in different browsers

Next Steps

• Learn about Merge Tags Reference
• See Portal Configuration
• Review API Documentation

Updated on: 13/03/2026