lrs;1;[0]The customer portal is designed to keep your customers deeply connected with your projects. With the customer portal customers can easily communicate with you through integrated chat features, stay informed with real-time notifications, and access training through self-serve sections like FAQs. This not only boosts visibility and transparency but also ensures customers feel fully engaged throughout the project. 

Most importantly, the portal can be customized to match the look and feel of your website, making the experience smooth and consistent from onboarding to project completion.

Furthermore, this portal doesn’t need to function as a separate entity. It can be embedded within your existing product or webpage, creating a cohesive and seamless user experience. With this approach, you'll achieve higher levels of customer collaboration, allowing clients to be effortlessly invited to their projects with just a click.

In this article, we’ll provide a detailed guide on the steps required to build, design, and deploy a customer portal for your product or services.

In this article

• How to create a new customer portal template
• Create a new theme
• Navigation bar
• Build your portal
• How to build a page and add sections in Rocketlane
  • Create the page
  • Build the section
  • Styling the Section:
• Glossary
  • Rocketlane Sections
  • Other Sections
• Configure your section
• How to dynamically add Pages to your customer portal
• How to preview the customer portal

How to create a new customer portal template
1. Create a new customer portal template

• You can navigate to templates, and click on the ‘customer portal templates’ section

• Click the “new customer portal template”
• Add your website URL so that Rocketlane can automatically suggest a theme for your portal
• If you wish to make edits to the color, go to the colors section, click the ‘+’ icon on the right and add your desired color shade to the existing palette
• If you wish to make edits to the buttons, click edit near the button and design the button. The buttons available to you are primary, secondary, tertiary that you will be using in different areas of the portal

  • Shape - Choose the perfect shape for the button

  • Text color - Choose the color of the text that goes into the button

  • Button color - Choose the color of the button

  • Outline - Choose the border color and thickness

  • Font - Choose the font and size of the text on the button

• If you wish to make edits to the Font styles, click the edit near the style button and customize the font name, size and style for the headings and paragraph formats
  
  

2. Creating theme from settings

• You can navigate to Settings, and scroll to the Customer portal section

• Click the Customer portal theme section and click the “New customer portal theme” and follow the steps mentioned above.

Navigation bar

The navigation bar makes it easy to find what you're looking for on the customer portal. When you visit a website, you'll think about what you want to access and then figure out how to get there. The navigation bar simplifies your search and guides you to the right page. Each new page you add will be represented by a new icon on the navigation bar. 

Before we learn how to create a new page, let's explore the default pages first.

Default pages in the navigation bar 

Rocketlane has made certain pages readily available to you that are integral and essential for customer interaction. These pages cannot be disabled or deleted as they play a crucial role in providing visibility, facilitating communication, and relaying messages to your customers. Let's now delve into the significance of these pages and their functionalities. Note that you cannot remove these pages while customizing the portal.

Accounts Overview

The Accounts Overview section provides a detailed and comprehensive view of a customer's account. This page gives your customers a 360-degree view of their account health, engagements, and projects, ensuring complete transparency and visibility into their business interactions with you. Customers can easily track the progress and status of their projects, review important documents, and gain insights into the overall health of their account. This holistic view helps build trust and transparency in your relationship with customers.

Chat page

Customers can chat with team members and collaborate on everyday tasks from the chat page. 

Notifications
Whenever you make updates to a customer's account or project, such as assigning tasks or referencing them in a document, you have the ability to set up notifications to alert the customer. These notifications can be sent directly to the customer's email and will also be visible within the customer portal. In the portal, customers can easily access all their notifications by clicking on the bell icon. This ensures that customers are kept informed and engaged with their projects in real-time.

Action items
To segregate items that need the immediate attention of your customers, we have introduced ‘action items’ in the navigation bar, which they can click on and view the approvals waiting on them and also provide the customer ratings for the surveys, triggered whenever a milestone task is completed.

Project Switcher

If you are running multiple projects for a customer's company, the customer can use the project switcher to switch between the projects they are part of and work on the

Build your portal

To create an engaging customer portal, begin by identifying the key information your customers need and organize it into well-structured pages. Each page should be divided into sections featuring interactive widgets, making the experience dynamic and user-friendly. Start with a warm welcome note, then provide easy access to the project plan and a quick view of tasks. Include essential resources such as FAQs, training videos, and other support materials to empower your customers. Once you have mapped out the content and layout, customize the portal to fit your brand and create a cohesive, inviting experience that keeps customers coming back.

Here are the steps to consider for building your portal:

1. Identify the Required Pages: Determine which pages the customer portal should include, such as a home page, project plan page, FAQs, and training page.

2. Organize the sections: Decide what content each page should have. For example, the home page might include a welcome message, a task list, and a footer.

3. Add Widgets to the sections: Consider incorporating interactive widgets into each section of the portal like the task list, FAQs, and team members. These widgets can be customized to fit your business needs and enhance the user experience.

Customize your portal

Pages

The customer portal is made of multiple pages that are designed to be highly intuitive, allowing your customers to navigate through it just like they would navigate a website like sifting through a home page, project plan, and so on. In these pages, they can explore different sections like viewing the welcome note, working on the task lists, catching up on progress, that will enhance their interaction with your business, such as viewing detailed project plans, exploring educational guides, and getting a comprehensive overview of their business relationship with you. Additionally, the portal provides a dedicated space for tracking tasks, ensuring that customers stay on top of their responsibilities and deadlines. There is also a self-service area where customers can find answers to their questions about your services, reducing the need for direct support. But if they need to get in touch with you, they can use the chat section to spontaneously talk to you. This structured approach ensures that your customers have all the tools and information they need at their fingertips.

Sections

A page may consist of a lot of information and if it is scattered like a piecemeal it becomes difficult for users to consume the information. Hence it's important to organize a page into sections containing relevant information such as a Community forum, Product updates, Training and resources, and more. By breaking down the page into dedicated sections, will make it easier for users to navigate and consume the information they need. Now, let's delve into the process of building a page in the customer portal. 

How to build a page and add sections in Rocketlane

Creating a customized customer portal in Rocketlane is a straightforward process that allows you to tailor the experience for your users. By building a page and adding various sections, you can ensure your customers have easy access to all the information they need.

Follow these steps to create an engaging and organized customer portal:

Create the page

To create your customer portal, 

• Navigate to Templates and select the customer portal template.

• Click on "Create New Portal.

• Name the portal

• On the left-hand side, click the “+” icon to create a new page.

• Name the page, for example, “Home Page.”

• Add Sections by clicking on “Add Sections” to start building your page. 

• For example: Let's build a customer portal for Daily Planet's company. The portal should include four pages: “Account Review,” “Chat Page,” “Home Page,” and “Project Plan.” Below is an example of how you can create a page.
  
  

Add sections

Next, to add sections to your page,

• Navigate to the page you want to edit, such as the “Home Page.”

• Click the “+” icon to create a new section.

• Choose a widget from the list of available widgets.

• For Example: Let's add Sections to a Home Page

• After creating a “Home Page,” click the “+” icon to add sections.

• Select widgets you wish to add to the section, one by one.

• For example, Add a “Hero Section” to welcome your customers and give them a peek into your services.

• Add a title and use smart fills to auto-populate usernames for a personal, warm welcome.

• Include a description that explains the use and significance of the section, and add conditions to filter the data shown.
  
  

Styling the Section:

To style the page and make it aesthetically appealing,

• Customize the section with appropriate background colors and spacing.

• Add dividers, and adjust their height and flip style for aesthetic appeal.

• For Rocketlane sections, you can set dynamic conditions to display relevant information in the customer portal. For example, in the tasks section, you can add a condition to only show tasks that have reached a specific progress percentage, such as x%.
  
  
  

To add More Sections:

• Continue adding sections by clicking the “+” icon and repeating the steps.

• For example, add sections like “Features,” “Resources,” and “Footer.”
  
  

Note:You can add as many pages to your portal as needed to cater to your customers' needs.

This step-by-step guide ensures that you can build a comprehensive and visually appealing customer portal in Rocketlane.

To understand the different available sections that can be used to create a page, and the different details that can be added to the page you can view the glossary below:

Glossary

Rocketlane Sections
Project Plan	A roadmap for customers and team members to plan, organize, and manage daily tasks. This platform allows you to view your project in phases, with tasks clearly laid out. You can filter tasks to see all spotlight tasks, overdue tasks, and tasks due this week and next week.
Forms	All the forms attached to the project can be accessed and filled, submitted and edited from here. You can selectively show forms based on certain conditions.
Key information	Provide a summary of project essentials in this section by adding project fields as widgets to your section, you can summarize your project progress so far with ease.
All files	View all project-related files, such as contracts and agreements, in one section.
Spaces	A centralized hub for creating, managing, and accessing project documents like scope and SOW.
Team members	View all project team members in one place.
Project updates	All the updates on the projects’ progress is sent is accessible from here and sent via email to customers
Task list	Manage all project tasks. View spotlighted task views, deadlines, statuses, and assign responsibilities efficiently.
Project overview	Get an overview of all your project team members, progress, milestones, risks and updates
Project hours	You can track the hours allocated and tracked on the project from here
Static Sections
FAQ	A repository of frequently asked questions about your services for customers to self-serve before contacting your team.
Hero section	A visually striking area at the top of your website that highlights key business offerings.
Logos	Display customer logos or icons to indicate partnerships and collaborations.
Metrics	Display company statistics, e.g., “3x faster Time to Value with Rocketlane"
Feature	Highlight key features of your products or services.
Image gallery	Manage project-related images on your website.
Resources	Link to external resources like product websites, help centers, and landing pages.
Videos	Embed product and marketing video links for customers to watch.
CTA	Add call-to-action buttons to drive sales, generate leads, or promote newsletters.
Footer	Provides essential information such as contact details, important links, and legal disclaimers. It also reinforces brand identity and facilitates user engagement with social media links and newsletters.

Note that you can move these sections up or down and also duplicate and delete these sections.

Note that the Rocketlane sections are all dynamic and will populate data based on project

Configure your section

How to dynamically add Pages to your customer portal

Rocketlane enables you to create a dynamic customer portal tailored to different project needs by setting up conditional rules. While building your portal, you can define when certain pages should be included. For example, if you only want the project chat feature available for projects with fees over $1,000, you can set this condition. As a result, the project chat page will automatically be excluded from portals for projects with fees below $1,000.

How to preview the customer portal

To preview the customer portal while build the theme and understand how the portal looks like for your customers,

• Go to Templates and select the Customer portal template.
• Choose the template you want to preview.
• Click the Preview button in the top right corner.
• In preview mode, view the portal in Mobile, Desktop, or Tablet modes.
• Use the upward arrow to scroll through the entire portal in the selected view.
• Click Edit Portal to return to the editing mode.