How To Create A FullyBranded, Customized Client Portal With WPMU DEV

How To Create A Fully-Branded, Customized Client Portal With WPMU DEV

Learn how to give your clients an easy and professional white label portal experience where they can access their account, sites, and pay you via a secure and self-hosted checkout.

Imagine having your own unique portal where your clients can login, access their billing accounts, even make payments – all hosted on your own site, with your own branding.

Well, good news, with WPMU DEV it’s possible and simple! And in this article we’re showing you how to create the client portal of your dreams.

You’ll learn:

  • How to create custom login pages for clients,
  • How to invite clients to your portal using branded emails,
  • How clients can make payments to you quickly and easily.

By the end of this article you will have set up a sleek portal under your own brand that clients can use to access information about their sites and make secure payments for your services.

Here are the section breakouts:

And we’re off!

What You Will Need To Create Your Portal

Before we get started, here’s what you’re gonna need if you want to follow along, or eventually create your own portal:

1. The Hub, to establish the base of your portal and integrate billing tools

The Hub is your central interface as a WPMU DEV user, and it’s where our web developer members manage every aspect of their client sites.

You can learn more about how it works in our how to get the most out of The Hub article.

This all-in-one site interface also includes a built-in client management and billing dashboard – where you can invoice clients, set up subscriptions, track monthly recurring revenue (MRR), and more.

And most importantly and relevant to this article… you can invite your clients to have customized access to your billing dashboard (and specific areas of your overall Hub), where they can view their account and subscription info, and even pay invoices directly via a built-in Stripe checkout.

All of the above lays the groundwork for your white label client portal. But it’s still all under WPMU DEV’s branding up until this point.

That’s where this next tool comes into the equation…

2. The Hub Client, to brand your portal as your own

The Hub Client allows you to take your Hub interface, including billing tools and checkout, and white label the entire thing with your own branding, logos, etc.

This instance will be on your own site at your own domain, so when your clients login they see your brand, not ours.

3. A Hosted Site For Your Portal

Finally, you’ll also need a hosted site to host your client portal…

This can be either a 3rd-party hosted site, or there’s always our own dedicated WordPress hosting, which you can also manage right from your Hub dashboard.

All of the above tools are included with the WPMU DEV Agency plan, which you can also trial for free right now.

Okay, now that you know what’s needed, we’ll get down to it!

How To Create and Brand Your Client Portal

Okay, first things first… since the white label client experience comes courtesy of The Hub Client, we want to install and configure that straight away.

Once you’ve signed up for a paid WPMU DEV membership, The Hub Client plugin will be available to install for free via the plugin landing page, The Hub plugin manager, or the WPMU DEV dashboard plugin (shown below).

Installing The Hub Client from the WPMU DEV WordPress dashboard.

Once activated, click on it to see the Welcome screen, then click on Get Started. This puts you directly into Settings.

By default, your Hub Client will inherit the Brand Name and Logo you have set in your own Hub, but you can customize it to be whatever you like.

hub client branding page & previewThe Hub Client settings in WordPress, default view.

We’ll quickly set up our first three brand customizations under Site Profile.

  1. Click the arrow icon for Brand name, type what you’d like to call it, and Save Changes.
  2. Next, click the arrow icon for Your Logo, upload your graphic, and Save Changes.
  3. Under Color Scheme, click the arrow icon for Navigation Background, select desired shade from the color picker, then Save Changes. You can also select your Navigation text and Navigation text selected & hover colors here, to match your fully branded color scheme.

You can see all of your changes in real-time via the Preview strip at the top of the Settings page.

the hub client settings wp dashboardThe Hub Client Settings main screen, customized to your brand.

We want to make getting around in our branded portal a satisfying, sensible experience for our clients.

We can easily accomplish this through the Hub Client’s settings.

Let’s look at personalizing the rest of the branded portal for your clients.

First up, we’re going to set up what will be displayed as the main menu of your branded portal.

From the main screen in The Hub Client; scroll down to Configuration, and click the chevron arrow to the right of Navigation.

Select from the dropdown options, or create a site specific menu in WordPressAppearance > Menus, then come back to this page and select it.

select the Navigation menu in client portalSelecting the Navigation menu in your client portal.

Now we’ll set the client page as the hub.

Click the chevron arrow to the right of Client Page, and from the resultant popup, select as desired from the dropdown options, then Save.

select Client Page to be replaced with your client hubSelecting the Client Page to be replaced with your client hub.

Now you’ll see this additional linked text – View Page, next to Client Page, along with the name of the page you selected to the right. In this case, “hub”.

config nav client page view page text in menuWe’ve set the client page as the hub.

Click on View Page and it will open this instance of the Hub in a new webpage, where you’ll see the page you selected, with the menu you selected at the top of the site.

branded hub client viewThe Client’s view of your branded hub.

You can also customize the link used for the Back text on your Client Login page. We’ll knock that out right now.

From the WP Dashboard > The Hub Client > Settings > Configurations > Home Site URL, click Add to open the configuration module.

Enter the site URL and site name (Title), and Save changes. (You can also click the checkbox to Open in a new tab prior to saving, if you prefer.)

customizing site home URL for back buttonCustomizing the site home URL for the back button in the Hub Client.

Note: if no customizations are made here, the back button will direct to the default home page for that site.

If you ever want to revert back to the default state, simply click the Reset button.

Setting Up a Help Button

Having help resources readily available for your clients is a big plus. It goes a long way to making them feel calm and collected, knowing answers are just a click away.

“Provide enough customization options so that we can tweak the look and feel of the interface to some degree. And the ability to put in our own info, such as contact info and links to our own help pages/customer support and things like that.” – Julian (WPMU DEV member)

Getting the Help Button in The Hub Client is a cinch. I’ll walk you through how to do that now.

From the WP Dashboard > The Hub Client > Settings > Configuration; to the right of the Help Button, click Add.

Enter the URL for your Help page, then Save Changes.

Tada! You’ll now have a floating help bubble on your Hub page that when clicked, will direct the user to your chosen URL. By default, the Help page will be opened in a new tab.

Once you’ve set up your Help Button, it will display in the lower right corner of The Hub main page, ready for action.

help button client portal viewAdding a Help button to your sites in The Hub.

Integrating Live Chat

Live Chat is a fantastic feature to provide to your clients. And The Hub Client offers three highly-rated chat platform integrations to choose from.

If you head over to the WordPress dashboard, The Hub Client > Settings > Integrations, you can configure a Live Chat widget on your Hub Client.

Three of the most popular third-party services are available: LiveChat, Tawk.To, and HubSpot.

Live Chat logging in for Tawk.toLive Chat in the Hub Client, logging in for customized live chat’s live chat appearance settings and preview.

Depending on which live chat service you choose, the setup will vary.

If you’d like a basic walkthrough on setting these up in The Hub Client, read How to Set Up Live Chat on WordPress. Or get the full rundown in our Integrations help docs.

Inviting Clients To Your Custom Portal

Time to roll out the red carpet! With customizations set, we’re ready to bring our clients inside.

Let’s start by manually adding a new client.

Navigate to The Hub > Clients & Billing, and click + New Client.

adding a new clientGetting a client set up takes only a few clicks.

Enter all the client’s required (and optional, as desired) information in the form fields.

User Roles play a very significant part in Client setup. Basically, these decide what each client will have access to in your hub, in terms of viewing and taking action. You have full control on these by selecting permissions.

We take a deep dive into User Roles in this Clients & Billing article. For now, click on the dropdown arrow under User Role, and select View All & Access billing.

add client user role dropdownYou decide what your client has access to by applying a user role.

If you opt for a Custom Role – you can make one on the spot by clicking on + Create custom user role.

This will bring up the screen where you can select options from the main and nested menus. Name your new role, and save it.

Now if you go back to that client, you can assign this custom role to them.

While adding a client, you will also determine what Primary Hub they’re associated with.

If you have more than one Hub, it will be available in the dropdown. If you are using The Hub Client on a site, and select it as the Primary Hub, when that client clicks on a Confirm Invitation or Pay Invoice link from your Client & Billing automated email, they’ll be taken to the your white labeled Hub site instead of

Our best pro WP tools in one bundle