The Customer Portal helps customers stay connected with their projects. Customers can view project progress, access relevant tasks and documents, communicate with your team, receive notifications, and use self-serve resources such as FAQs and training content.

You can also customize the Customer Portal to match your brand and decide what pages, sections, widgets, and content should be shown to customers.

Create a Customer Portal template

You can create a Customer Portal template from the Templates section and customize its theme, colors, buttons, and fonts.

1. Go to Templates and open the Customer Portal Templates section.
2. Click New Customer Portal Template.
3. Add your website URL so Rocketlane can suggest a theme for your portal.
4. To edit colors, go to the Colors section, click the + icon, and add your preferred color to the palette.
5. To edit buttons, click Edit near the button style and customize the primary, secondary, and tertiary buttons.
6. To edit font styles, click Edit near the style option and customize the font name, size, and style for headings and paragraph text.

Button settings include:

• Shape: Choose the button shape.
• Text color: Choose the color of the button text.
• Button color: Choose the button background color.
• Outline: Choose the border color and thickness.
• Font: Choose the font and size used on the button.

Create a theme from Settings

1. Go to Settings and scroll to the Customer Portal section.
2. Open Customer Portal Theme, click New Customer Portal Theme, and follow the same theme setup steps.

Configure typography in a Customer Portal theme

Typography settings determine how text appears throughout Customer Portals that use the theme. Each setting represents a global typography role rather than a specific portal page, section, or widget.

When you update a role, Rocketlane applies the selected font family, weight, and size everywhere that role is used. For example, changing Heading 2 updates every Heading 2 element across Customer Portals using that theme.

To configure typography:

1. Open the relevant Customer Portal Theme.
2. Go to the typography or font styles section.
3. Click Edit next to the typography role you want to customize.
4. Select the font family, weight, and size.
5. Save your changes.
6. Preview the portal on desktop, tablet, and mobile to review the updated typography.

Typography roles

Supported typography roles

The following roles are currently used by Customer Portal components:

• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Paragraph Large
• Paragraph Medium
• Paragraph Small

Changes made to these roles are reflected wherever the corresponding typography role is used.

The following roles can be configured in the theme editor but are not currently used by live Customer Portal components:

• Heading 5
• Heading 6
• Heading 7
• Link
• Caption
• Quote

Changing an unused role will generally not produce a visible change in the Customer Portal.

Responsive typography behavior

On tablets and mobile devices, Rocketlane adjusts configured heading and paragraph font sizes to maintain a consistent responsive experience. The selected font family continues to apply across device sizes.

If you do not configure a font for a typography role, Rocketlane uses the following default font stack:

SF Pro Display, Segoe UI, Arial

Navigation bar

The navigation bar helps customers move between pages in the Customer Portal. Each page you add to the portal is represented by an icon in the navigation bar.

Default pages in the navigation bar

Rocketlane includes default pages that support customer visibility, communication, and collaboration. These pages cannot be disabled or deleted while customizing the portal.

Accounts Overview

The Accounts Overview page gives customers a complete view of account health, engagements, and projects. Customers can track project progress, review documents, and understand their overall relationship with your team.

Chat page

The Chat page lets customers communicate with team members and collaborate on project-related tasks.

Notifications

Notifications keep customers informed about project and account updates, such as task assignments, document mentions, and other activity. Customers can view notifications from the bell icon in the Customer Portal.

Action items

Action items help customers find items that need their attention, such as pending approvals and customer surveys triggered when milestone tasks are completed.

Project Switcher

If a customer is part of multiple projects, the Project Switcher lets them move between projects and work on project-specific tasks.

Build your portal

Before building a portal, decide what information customers need and how it should be organized. You can create pages for project plans, FAQs, training resources, account reviews, and more.

A good portal structure usually includes:

1. Required pages: Decide which pages the portal should include, such as a home page, project plan page, FAQ page, or training page.
2. Sections: Decide what each page should contain. For example, the home page can include a welcome message, task list, resources, and footer.
3. Widgets: Add widgets such as task lists, FAQs, team members, forms, or project updates to make each section useful.

Pages

Pages help organize the Customer Portal into clear areas, such as Home, Project Plan, FAQs, Training, or Account Review. Customers can navigate these pages like a website.

Sections

Sections help divide each page into focused blocks of content. For example, a page can include a hero section, project tasks, resources, training videos, FAQs, and a footer.

Create pages and add sections

Create the page

1. Go to Templates and select the Customer Portal template.
2. Click Create New Portal.
3. Name the portal.
4. Click the + icon on the left to create a new page.
5. Name the page, such as Home Page.
6. Click Add Sections to start building the page.

Add sections

1. Open the page you want to edit.
2. Click the + icon to create a new section.
3. Choose a widget from the list of available widgets.
4. Add a title and description for the section.
5. Use SmartFill where needed to personalize content, such as customer names.
6. Add conditions if the section should only show specific data.

Style sections

You can style sections to match your brand and make the portal easier to read.

• Customize background colors and spacing.
• Add dividers and adjust their height or style.
• Set dynamic conditions for Rocketlane sections to show relevant data.
• Continue adding more sections, such as Features, Resources, and Footer.

Available sections

Customer Portal sections are grouped into Rocketlane sections and static sections.

Rocketlane sections

Static sections

Configure a section

Each section includes configuration options based on the section type.

Embed videos with an Iframe section

Use the Iframe section to embed videos from YouTube, Vimeo, Loom, Wistia, or another video provider into the Customer Portal. Alternatively you can use the Videos widget to embed simple Youtube links

1. Open Customer Portal Templates, select the template you want to edit, and open the required page.
2. Hover over the boundary where you want the video to appear and click the + button.
3. Under Static sections, select Iframe and choose a layout.

4. In the Section: Iframe sidebar, open Details.
5. Enter a title and description.
6. Select an item tab and paste the video URL or HTML iframe embed snippet into Embed code.
7. Add tabs for additional embeds, switch between tabs, or delete unused tabs as needed.

8. Review the embedded video section in the portal editor.
9. Click Done to apply the section configuration.
10. Click Preview to verify how the embedded video appears to customers.

Image dimensions

Dynamically add pages to the Customer Portal

You can use conditional rules to decide when certain pages should appear in the Customer Portal.

For example, if you want the project chat page to appear only for projects with fees above a certain amount, you can add that condition. The page will then be excluded from portals that do not meet the condition.

Preview the Customer Portal

You can preview the Customer Portal while building the theme to see how it will appear to customers.

1. Go to Templates and select the Customer Portal Template.
2. Choose the template you want to preview.
3. Click Preview from the top-right corner.
4. Preview the portal in Mobile, Desktop, or Tablet mode.
5. Use the upward arrow to scroll through the portal in the selected view.
6. Click Edit Portal to return to editing mode.

Change the Customer Portal language

Customers can change the portal language from the language icon at the top-right corner of the Customer Portal. By default, the portal language is picked from the customer’s browser language preference.