{"id":212404,"date":"2022-09-30T01:04:16","date_gmt":"2022-09-30T01:04:16","guid":{"rendered":"https:\/\/wpmudev.com\/blog\/?p=212404"},"modified":"2022-09-30T01:04:16","modified_gmt":"2022-09-30T01:04:16","slug":"customize-client-portal","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/customize-client-portal\/","title":{"rendered":"How To Create A Fully-Branded, Customized Client Portal With WPMU DEV"},"content":{"rendered":"<p>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.<\/p>\n<p>Imagine having your own unique portal where your clients can login, access their billing accounts, even make payments \u2013 all hosted on your own site, with your own branding.<\/p>\n<p>Well, good news, with WPMU DEV it\u2019s possible and simple! And in this article we\u2019re showing you how to create the client portal of your dreams.<\/p>\n<p>You\u2019ll learn:<\/p>\n<ul>\n<li><strong>How to create custom login pages for clients, <\/strong><\/li>\n<li><strong>How to invite clients to your portal using branded emails<\/strong>,<\/li>\n<li><strong>How clients can make payments to you quickly and easily<\/strong>.<\/li>\n<\/ul>\n<p>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.<\/p>\n<p>Here are the section breakouts:<\/p>\n<ul>\n<li><a href=\"#what-you-need\">What You Will Need To Create Your Portal<\/a>\n<ul>\n<li><a href=\"#how-to-create\">How To Create and Brand Your Client Portal<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#config-menu-nav\">Configuring Menu Navigation Items<\/a>\n<ul>\n<li><a href=\"#help-button\">Setting Up a Help Button<\/a><\/li>\n<li><a href=\"#live-chat\">Integrating Live Chat<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#invite-clients\">Inviting Clients To Your Custom Portal<\/a><\/li>\n<li><a href=\"#what-clients-see\">What Your Clients Will See Inside Their Portal<\/a>\n<ul>\n<li><a href=\"#client-dashboard\">The Client Dashboard<\/a><\/li>\n<li><a href=\"#client-profile\">Client Profile<\/a><\/li>\n<li><a href=\"#clients-pay\">Clients Can Pay Invoices via The Client Portal<\/a><\/li>\n<li><a href=\"#client-invoices\">Clients Can Access Invoices Directly in The Billing Modal<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#summary\">Giving Your Clients a More Customized Experience with The Hub Client<\/a><\/li>\n<\/ul>\n<p>And we\u2019re off!<\/p>\n<h2 id=\"what-you-need\">What You Will Need To Create Your Portal<\/h2>\n<p>Before we get started, here\u2019s what you\u2019re gonna need if you want to follow along, or eventually create your own portal:<\/p>\n<h3>1. The Hub, to establish the base of your portal and integrate billing tools<\/h3>\n<p><a href=\"https:\/\/wpmudev.com\/hub-welcome\/\" target=\"_blank\">The Hub<\/a> is your central interface as a WPMU DEV user, and it\u2019s where our web developer members manage every aspect of their client sites.<\/p>\n<p>You can learn more about how it works in our <a href=\"https:\/\/wpmudev.com\/blog\/get-the-most-from-hub\/\" target=\"_blank\">how to get the most out of The Hub article.<\/a><\/p>\n<p>This all-in-one site interface also includes a built-in client management and billing dashboard \u2013 where you can invoice clients, set up subscriptions, track monthly recurring revenue (MRR), and more.<\/p>\n<p><strong>And most importantly and relevant to this article\u2026<\/strong> 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 <a href=\"https:\/\/wpmudev.com\/blog\/integrate-stripe-client-billing\/\" target=\"_blank\">Stripe checkout<\/a>.<\/p>\n<p>All of the above lays the groundwork for your white label client portal. But it\u2019s still all under WPMU DEV\u2019s branding up until this point.<\/p>\n<p>That\u2019s where this next tool comes into the equation\u2026<\/p>\n<h3>2. The Hub Client, to brand your portal as your own<\/h3>\n<p><a href=\"https:\/\/wpmudev.com\/project\/the-hub-client\/\" target=\"_blank\">The Hub Client<\/a> allows you to take your Hub interface, including billing tools and checkout, and white label the entire thing with your own branding, logos, etc.<\/p>\n<p>This instance will be on your own site at your own domain, so when your clients login they see <em>your <\/em>brand, not ours.<\/p>\n<h3>3. A Hosted Site For Your Portal<\/h3>\n<p>Finally, you\u2019ll also need a hosted site to host your client portal\u2026<\/p>\n<p>This can be either a 3rd-party hosted site, or there\u2019s always our own <a href=\"https:\/\/wpmudev.com\/hosting\/\" target=\"_blank\" rel=\"noopener\">dedicated WordPress hosting<\/a>, which you can also manage right from your Hub dashboard.<\/p>\n<p><strong>All of the above tools are included with the WPMU DEV <a href=\"https:\/\/wpmudev.com\/premium\/\" rel=\"noopener\" target=\"_blank\">Premium plan<\/a><\/strong>.<\/p>\n<p>Okay, now that you know what\u2019s needed, we\u2019ll get down to it!<\/p>\n<h2 id=\"how-to-create\">How To Create and Brand Your Client Portal<\/h2>\n<p>Okay, first things first\u2026 since the white label client experience comes courtesy of The Hub Client, we want to install and configure that straight away.<\/p>\n<p>Once you\u2019ve 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).<\/p>\n<figure id=\"attachment_212771\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-212771\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/01-hub-client-wpmudev-dashboard-install.png\" alt=\"hub client wpmudev dashboard install\" width=\"1163\" height=\"476\" \/><figcaption class=\"wp-caption-text\">Installing The Hub Client from the WPMU DEV WordPress dashboard.<\/figcaption><\/figure>\n<p>Once activated, click on it to see the Welcome screen, then click on <strong>Get Started<\/strong>. This puts you directly into <strong>Settings<\/strong>.<\/p>\n<p>By default, your<em> Hub Client<\/em> will inherit the Brand Name and Logo you have set in your own Hub, but you can customize it to be whatever you like.<\/p>\n<figure id=\"attachment_212772\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-212772\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/02-hub-client-branding-page-preview-1050x887.png\" alt=\"hub client branding page &amp; preview\" width=\"1050\" height=\"887\" \/><figcaption class=\"wp-caption-text\">The Hub Client settings in WordPress, default view.<\/figcaption><\/figure>\n<p>We\u2019ll quickly set up our first three brand customizations under <strong>Site Profile<\/strong>.<\/p>\n<ol>\n<li>Click the arrow icon for <strong>Brand name<\/strong>, type what you\u2019d like to call it, and <strong>Save Changes<\/strong>.<\/li>\n<li>Next, click the arrow icon for <strong>Your Logo<\/strong>, upload your graphic, and <strong>Save Changes<\/strong>.<\/li>\n<li>Under <em>Color Scheme<\/em>, click the arrow icon for <strong>Navigation Background<\/strong>, select desired shade from the color picker, then <strong>Save Changes<\/strong>. You can also select your <strong>Navigation text<\/strong> and <strong>Navigation text selected &amp; hover<\/strong> colors here, to match your fully branded color scheme.<\/li>\n<\/ol>\n<p>You can see all of your changes in real-time via the <strong>Preview <\/strong>strip at the top of the Settings page.<\/p>\n<figure id=\"attachment_212773\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-212773\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/03-the-hub-client-settings-wp-dashboard-1050x721.png\" alt=\"the hub client settings wp dashboard\" width=\"1050\" height=\"721\" \/><figcaption class=\"wp-caption-text\">The Hub Client Settings main screen, customized to your brand.<\/figcaption><\/figure>\n<h2 id=\"config-menu-nav\">Configuring Menu Navigation Items<\/h2>\n<p>We want to make getting around in our branded portal a satisfying, sensible experience for our clients.<\/p>\n<p>We can easily accomplish this through the Hub Client\u2019s settings.<\/p>\n<p>Let\u2019s look at personalizing the rest of the branded portal for your clients.<\/p>\n<p>First up, we\u2019re going to set up what will be displayed as the main menu of your branded portal.<\/p>\n<p>From the main screen in <strong>The Hub Client; <\/strong>scroll down to <em>Configuration<\/em>\u00a0and click the chevron arrow to the right of <strong>Navigation<\/strong>.<\/p>\n<p>Select from the dropdown options or create a site-specific menu in WordPress\u2019 <strong>Appearance &gt; Menus<\/strong>, then come back to this page and select it.<\/p>\n<figure id=\"attachment_212774\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-212774\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/04-select-the-Navigation-menu-in-client-portal.png\" alt=\"select the Navigation menu in client portal\" width=\"987\" height=\"477\" \/><figcaption class=\"wp-caption-text\">Selecting the Navigation menu in your client portal.<\/figcaption><\/figure>\n<p>Now we\u2019ll set the client page as the hub.<\/p>\n<p>Click the chevron arrow to the right of <strong>Client Page<\/strong>\u00a0and from the resultant popup, select as desired from the dropdown options, then <strong>Save<\/strong>.<\/p>\n<figure id=\"attachment_212775\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-212775\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/05-select-Client-Page-to-be-replaced-with-your-client-hub.png\" alt=\"select Client Page to be replaced with your client hub\" width=\"897\" height=\"730\" \/><figcaption class=\"wp-caption-text\">Selecting the Client Page to be replaced with your client hub.<\/figcaption><\/figure>\n<p>Now you\u2019ll see this additional linked text \u2013 <strong>View Page<\/strong>, next to <strong>Client Page<\/strong>, along with the name of the page you selected to the right. In this case, \u201chub\u201d.<\/p>\n<figure id=\"attachment_212776\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-212776\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/06-config-nav-client-page-view-page-text-in-menu.png\" alt=\"config nav client page view page text in menu\" width=\"892\" height=\"138\" \/><figcaption class=\"wp-caption-text\">We\u2019ve set the client page as the hub.<\/figcaption><\/figure>\n<p>Click on <strong>View Page<\/strong> and it will open this instance of the Hub in a new webpage, where you\u2019ll see the page you selected, with the menu you selected at the top of the site.<\/p>\n<figure id=\"attachment_212777\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-212777\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/07-branded-hub-client-view-1050x513.png\" alt=\"branded hub client view\" width=\"1050\" height=\"513\" \/><figcaption class=\"wp-caption-text\">The Client\u2019s view of your branded hub.<\/figcaption><\/figure>\n<p>You can also customize the link used for the <strong>Back <\/strong>text on your Client Login page. We\u2019ll knock that out right now.<\/p>\n<p>From the <strong>WP Dashboard &gt; The Hub Client &gt; Settings<\/strong> <strong>&gt; Configurations &gt; Home Site URL<\/strong>, click <strong>Add <\/strong>to open the configuration module.<\/p>\n<p>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.)<\/p>\n<figure id=\"attachment_212874\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-212874\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/08-customizing-site-home-URL-for-back-button.png\" alt=\"customizing site home URL for back button\" width=\"834\" height=\"1140\" \/><figcaption class=\"wp-caption-text\">Customizing the site home URL for the back button in the Hub Client.<\/figcaption><\/figure>\n<p>Note: if no customizations are made here, the back button will direct to the default home page for that site.<\/p>\n<p>If you ever want to revert to the default state, simply click the <strong>Reset <\/strong>button.<\/p>\n<h3 id=\"help-button\">Setting Up a Help Button<\/h3>\n<p>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.<\/p>\n<blockquote><p>\u201cProvide 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.\u201d \u2013 <strong>Julian<\/strong> (WPMU DEV member)<\/p><\/blockquote>\n<p>Getting the Help Button in The Hub Client is a cinch. I\u2019ll walk you through how to do that now.<\/p>\n<p>From the <strong>WP Dashboard &gt; The Hub Client &gt;<\/strong> <strong>Settings &gt; Configuration<\/strong>; to the right of the <strong>Help Button<\/strong>, click <strong>Add<\/strong>.<\/p>\n<p>Enter the URL for your Help page, then <strong>Save Changes<\/strong>.<\/p>\n<p>Tada! You\u2019ll 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.<\/p>\n<p>Once you\u2019ve set up your Help Button, it will display in the lower right corner of The Hub main page, ready for action.<\/p>\n<figure id=\"attachment_212779\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-212779\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/09-help-button-client-portal-view-1050x425.png\" alt=\"help button client portal view\" width=\"1050\" height=\"425\" \/><figcaption class=\"wp-caption-text\">Adding a Help button to your sites in The Hub.<\/figcaption><\/figure>\n<h3 id=\"live-chat\">Integrating Live Chat<\/h3>\n<p>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.<\/p>\n<p>If you head over to the WordPress dashboard, <strong>The Hub Client &gt; Settings &gt; Integrations<\/strong>, you can configure a Live Chat widget on your Hub Client.<\/p>\n<p>Three of the most popular third-party services are available: <a href=\"https:\/\/wordpress.org\/plugins\/wp-live-chat-software-for-wordpress\/\" target=\"_blank\"><strong>LiveChat<\/strong><\/a><strong>,<\/strong><a href=\"https:\/\/wordpress.org\/plugins\/tawkto-live-chat\/\" target=\"_blank\"><strong> Tawk.To<\/strong><\/a><strong>, <\/strong>and<a href=\"https:\/\/wordpress.org\/plugins\/leadin\/\" target=\"_blank\"> <strong>HubSpot<\/strong><\/a>.<\/p>\n<figure id=\"attachment_212780\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-212780\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/10-Live-Chat-logging-in-for-Tawk.to_-1050x663.png\" alt=\"Live Chat logging in for Tawk.to\" width=\"1050\" height=\"663\" \/><figcaption class=\"wp-caption-text\">Live Chat in the Hub Client, logging in for Tawk.to.<\/figcaption><\/figure>\n<figure id=\"attachment_212781\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-212781\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/11-tawk.to-customized-live-chat-preview-1050x790.png\" alt=\"tawk.to customized live chat preview\" width=\"1050\" height=\"790\" \/><figcaption class=\"wp-caption-text\">Tawk.to\u2019s live chat appearance settings and preview.<\/figcaption><\/figure>\n<p>Depending on which live chat service you choose, the setup will vary.<\/p>\n<p>If you\u2019d like a basic walkthrough on setting these up in The Hub Client, read <a href=\"https:\/\/wpmudev.com\/blog\/live-chat-for-wordpress\/\" target=\"_blank\">How to Set Up Live Chat on WordPress<\/a>. Or get the full rundown in our <a href=\"https:\/\/wpmudev.com\/docs\/wpmu-dev-plugins\/the-hub-client-wpmu-dev\/#integrations\" target=\"_blank\">Integrations help docs<\/a>.<\/p>\n<h2 id=\"invite-clients\">Inviting Clients To Your Custom Portal<\/h2>\n<p>Time to roll out the red carpet! With customizations set, we\u2019re ready to bring our clients inside.<\/p>\n<p>Let\u2019s start by manually adding a new client.<\/p>\n<p>Navigate to <strong>The Hub &gt; Clients &amp; Billing<\/strong>\u00a0and click <strong>+ New Client<\/strong>.<\/p>\n<figure id=\"attachment_212782\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-212782\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/12-adding-a-new-client-1050x604.png\" alt=\"adding a new client\" width=\"1050\" height=\"604\" \/><figcaption class=\"wp-caption-text\">Getting a client set up takes only a few clicks.<\/figcaption><\/figure>\n<p>Enter all the client\u2019s required (and optional, as desired) information in the form fields.<\/p>\n<p><strong>User Roles<\/strong> 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.<\/p>\n<p>We take a deep dive into <strong>User Roles<\/strong> in this <a href=\"https:\/\/wpmudev.com\/blog\/client-billing-management\/\" target=\"_blank\">Clients &amp; Billing<\/a> article. For now, click on the dropdown arrow under <strong>User Role<\/strong>\u00a0and select <em>View All &amp; Access billing<\/em>.<\/p>\n<figure id=\"attachment_212783\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-212783\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/13-add-client-user-role-dropdown-1050x913.png\" alt=\"add client user role dropdown\" width=\"1050\" height=\"913\" \/><figcaption class=\"wp-caption-text\">You decide what your client has access to by applying a user role.<\/figcaption><\/figure>\n<p>If you opt for a <strong>Custom Role<\/strong> \u2013 you can make one on the spot by clicking on <strong>+ Create custom user role<\/strong>.<\/p>\n<p>This will bring up the screen where you can select options from the main and nested menus. Name your new role, and save it.<\/p>\n<p>Now if you go back to that client, you can assign this custom role to them.<\/p>\n<p>While adding a client, you will also determine what <strong>Primary Hub <\/strong>they\u2019re associated with.<\/p>\n<p>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 <strong>Confirm Invitation<\/strong>\u00a0or <strong>Pay Invoice<\/strong> link from your Client &amp; Billing automated email, they\u2019ll be taken to your white labeled Hub site instead of <em>wpmudev.com<\/em>.<\/p>\n<figure id=\"attachment_212875\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-212875\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/13.5-add-client-select-primary-hub-1-1050x429.png\" alt=\"add client select primary hub\" width=\"1050\" height=\"429\" \/><figcaption class=\"wp-caption-text\">Whatever Primary Hub you choose will sync the communication preferences that will occur from that Hub (e.g. emails, invoices, etc.).<\/figcaption><\/figure>\n<p>At the bottom, switch the <strong>Invite Client <\/strong>toggle to on, then click <strong>Add<\/strong>.<\/p>\n<figure id=\"attachment_212784\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-212784\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/14-invite-client-from-add-client-window-1050x963.png\" alt=\"invite client from add client window\" width=\"1050\" height=\"963\" \/><figcaption class=\"wp-caption-text\">Invite a client from the <strong>Add client<\/strong> window.<\/figcaption><\/figure>\n<p>Boom! Client has been added, and sent a white-labeled invitation to your client portal, which will look like this:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-212845\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/15-email-confirm-invitation.png\" alt=\"email confirm invitation\" \/><\/p>\n<p>Once the client confirms by clicking the <strong>Confirm Invitation<\/strong> link in your email, they\u2019ll have access to your branded portal.<\/p>\n<p>If they already had an existing Hub account with you, it will take them directly to the login page of the Hub they were invited from.<\/p>\n<p>If they\u2019re new to your account, they\u2019ll be taken to the account creation page of that Hub instance.<\/p>\n<p>From the account creation page, they\u2019ll get a popup modal with their email address already in the form field. They\u2019ll just need to create a password, then click the <strong>Create Account<\/strong> button.<\/p>\n<figure id=\"attachment_212786\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-212786\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/16-create-account-from-email-invite.png\" alt=\"create account (from email invite)\" width=\"600\" height=\"371\" \/><figcaption class=\"wp-caption-text\">Client account creation in your Hub.<\/figcaption><\/figure>\n<h2 id=\"what-clients-see\">What Your Clients Will See Inside Their Portal<\/h2>\n<p>Every client experience in your portal will be unique to them.<\/p>\n<p>Your branding will be prevalent throughout, and what your clients will be able to view and access is dependent on the permissions you\u2019ve granted them through User Roles.<\/p>\n<p>It\u2019s a fantastic way to custom serve each client a perfect fit for your combined business interests and needs.<\/p>\n<h3 id=\"client-dashboard\">The Client Dashboard<\/h3>\n<p>Once your clients have logged into your client portal, they\u2019ll be greeted by a dashboard with access to any content you\u2019ve given them permissions for.<\/p>\n<figure id=\"attachment_212787\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-212787\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/17-portal-initial-view-1050x449.png\" alt=\"portal initial view\" width=\"1050\" height=\"449\" \/><figcaption class=\"wp-caption-text\">A client&#8217;s-eye view of your custom branded portal.<\/figcaption><\/figure>\n<p>Clients can organize single or multiple sites in your portal and organize them in their dashboard area as they see fit.<\/p>\n<figure id=\"attachment_212788\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-212788\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/18-portal-multi-sites-1050x593.png\" alt=\"portal multi sites\" width=\"1050\" height=\"593\" \/><figcaption class=\"wp-caption-text\">Clients can favorite sites, color labels, and more in your branded Hub.<\/figcaption><\/figure>\n<p>The roles you&#8217;ve assigned to a client are editable by you and can be changed at any time in the management and billing platform.<\/p>\n<p>For example, if we assign Billing permissions to a client, he\/she will have the ability to view and edit anything in that section, but they\u2019ll be cut off from any other pages\/screens in Client Billing.<\/p>\n<figure id=\"attachment_212789\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-212789\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/19-plugins-manage-existing-1050x777.png\" alt=\"plugins, manage existing\" width=\"1050\" height=\"777\" \/><figcaption class=\"wp-caption-text\">Clients can be given access to modify and view, or view only, making it possible to hide screens like Plugins entirely.<\/figcaption><\/figure>\n<p>Read this post for a closer look at User Roles and Permissions.<\/p>\n<p>Letting your clients view and manage their own billing details saves you the time and effort you would otherwise spend on their admin activities and allows them to feel connected to their account.<\/p>\n<p>There is a lot your clients can accomplish here. For example, managing their billing info and account details, viewing their services and subscriptions, filtering on payment status (due or paid), assessing what their average spend is, and much more.<\/p>\n<figure id=\"attachment_212865\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-212865\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/20-billing-details-client-view-1-1050x742.png\" alt=\"billing details client view\" width=\"1050\" height=\"742\" \/><figcaption class=\"wp-caption-text\">The Billing Overview section gives clients a quick but informative top-level view of their account(s).<\/figcaption><\/figure>\n<p>In the billing section, clients can see all of their details by drilling down through the various menu options.<\/p>\n<figure id=\"attachment_212883\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-212883\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/21-subscriptions-current-1-1050x478.png\" alt=\"current subscriptions\" width=\"1050\" height=\"478\" \/><figcaption class=\"wp-caption-text\">The Products &amp; Services page allows views by breakout sections for subscriptions, both active &amp; inactive, and one-time services as well.<\/figcaption><\/figure>\n<p>Any line item here can be clicked on for full details, and\/or to take certain actions. For example, canceling a subscription.<\/p>\n<figure id=\"attachment_212792\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-212792\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/22-view-subscription-details-1050x984.png\" alt=\"view subscription details\" width=\"1050\" height=\"984\" \/><figcaption class=\"wp-caption-text\">Details on a particular client subscription, with an option to cancel it.<\/figcaption><\/figure>\n<p>Invoices can also be examined in full detail.<\/p>\n<figure id=\"attachment_212884\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-212884\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/23-invoices-summary-list-mixed-pay-status-2-1050x411.png\" alt=\"invoices summary list mixed pay status\" width=\"1050\" height=\"411\" \/><figcaption class=\"wp-caption-text\">The client invoice summary list, with easily visible status and amounts for each.<\/figcaption><\/figure>\n<p>The built-in filter functionality is great, offering distillation options for date, payment status, and website.<\/p>\n<figure id=\"attachment_212794\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-212794\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/24-filter-on-invoices.png\" alt=\"filter on invoices\" width=\"824\" height=\"818\" \/><figcaption class=\"wp-caption-text\">Even archived invoices can be located fast using the robust filter.<\/figcaption><\/figure>\n<p>If you\u2019ve given them permissions to do so, clients can view details and take action on services and bills, such as making payments or downloading PDF versions of invoices.<\/p>\n<figure id=\"attachment_212795\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-212795\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/25-filter-on-invoice-menu-options-1050x407.png\" alt=\"filter on invoice menu options\" width=\"1050\" height=\"407\" \/><figcaption class=\"wp-caption-text\">Every line item has quick actions via the popup menu, such as making a payment or viewing a subscription.<\/figcaption><\/figure>\n<h3 id=\"client-profile\">Client Profile<\/h3>\n<p>Clients can freely edit their personal content \u2013 profile info (including their profile pic, if they have one set in Gravatar), make a password change, setup 2FA (requires an authenticator app), or sign out, all through the cog icon menu in the upper right corner.<\/p>\n<figure id=\"attachment_212796\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-212796\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/26-client-profile-edit.png\" alt=\"client profile edit\" width=\"978\" height=\"1125\" \/><figcaption class=\"wp-caption-text\">Clients can easily edit their own profile information.<\/figcaption><\/figure>\n<p>Everything updates in real time. For example, if the client changes the email addy in their profile, it will also update in their billing profile, since the Hub and Clients &amp; Billing profiles are synced. Easy peasy!<\/p>\n<h3 id=\"clients-pay\">Clients Can Pay Invoices via The Client Portal<\/h3>\n<p>With the Clients &amp; Billing modal, your client will have the convenience of paying you directly through your branded client portal (with secure Stripe checkout fully integrated)!<\/p>\n<p>As mentioned earlier, all client management activities including payments take place securely inside your own domain and fully custom-branded screens.<\/p>\n<figure id=\"attachment_212797\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-212797\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/27-hub-URL-1050x339.png\" alt=\"hub URL\" width=\"1050\" height=\"339\" \/><figcaption class=\"wp-caption-text\">Everything happens at your chosen domain URL.<\/figcaption><\/figure>\n<p>Throughout the course of their business journey with you, clients are kept in the loop with automated emails, which reflect your custom brand and company details.<\/p>\n<figure id=\"attachment_212885\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-212885\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/28-email-pay-invoice-1.png\" alt=\"email pay invoice\" width=\"1017\" height=\"1397\" \/><figcaption class=\"wp-caption-text\">Email communications and invoices are triggered automatically and remain on-brand, taking that task off your plate.<\/figcaption><\/figure>\n<p>Clients can readily make payments by clicking on the invoiced email link, taking them to the payment portal.<\/p>\n<figure id=\"attachment_212886\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-212886\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/29-client-invoice-payment-in-portal-1-1-1050x610.png\" alt=\"client invoice payment in portal 1\" width=\"1050\" height=\"610\" \/><figcaption class=\"wp-caption-text\">Clients give a final check to their invoice details, then click the Make Payment button.<\/figcaption><\/figure>\n<p>The client can enter their payment information, then click the <strong>Pay <\/strong>button, which will have specific information on it regarding the amount of money and service they are approving.<\/p>\n<p>Note, if they previously added a payment method, it will auto populate here, with an option to change it if desired.<\/p>\n<figure id=\"attachment_212887\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-212887\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/30-client-invoice-payment-in-portal-2-1-1050x735.png\" alt=\"client invoice payment in portal 2\" width=\"1050\" height=\"735\" \/><figcaption class=\"wp-caption-text\">Client payment process in The Hub, continued.<\/figcaption><\/figure>\n<p>The client can check all of their info on the next page, then click to pay.<\/p>\n<figure id=\"attachment_212888\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-212888\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/31-client-invoice-paymt-in-portal-3.png\" alt=\"client invoice payment in portal 3\" width=\"600\" height=\"471\" \/><figcaption class=\"wp-caption-text\">Client payment process in The Hub; one last visual check, pre-pay.<\/figcaption><\/figure>\n<p>With the payment made, the invoice will load up, reflecting the details and paid status.<\/p>\n<figure id=\"attachment_212889\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-212889\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/32-client-invoice-post-payment-details-1-1050x1266.png\" alt=\"client invoice post payment details\" width=\"1050\" height=\"1266\" \/><figcaption class=\"wp-caption-text\">Client invoice details; status: paid.<\/figcaption><\/figure>\n<p>Now if you go to the Invoices tab, you\u2019ll see all current and outstanding invoices.<\/p>\n<figure id=\"attachment_212916\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-212916\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/33-invoice-summary-list-status-1050x410.png\" alt=\"invoice summary list status\" width=\"1050\" height=\"410\" \/><figcaption class=\"wp-caption-text\">Client invoice summary list in the Hub.<\/figcaption><\/figure>\n<p>In the <strong>Status <\/strong>column, red indicates payment is due, and green indicates payment has been made.<\/p>\n<p>The top-level <strong>Invoices <\/strong>menu has a notifier icon (a number in a red circle), indicating the quantity of outstanding invoices \u2013 for quick visual reference.<\/p>\n<p>The client can download a copy of any paid invoice by clicking the <strong>PDF Invoice <\/strong>button at the top-right of the invoice screen.<\/p>\n<h3 id=\"client-invoices\">Clients Can Access Invoices Directly in The Billing Modal of The Hub<\/h3>\n<p>Your clients can easily view and manage billing activities from any sites in their Hub, related to specific billing. It will be nearly identical to what you see in your Hub Billing area, of course specific only to their site(s).<\/p>\n<p>Clients can use the left sidebar menu to navigate to their billing section.<\/p>\n<p>Clients need only click the <strong>Billing <\/strong>link in the sidebar menu of any site they\u2019re viewing to get started. Any invoices you\u2019ve sent to them will be accessible to them here.<\/p>\n<figure id=\"attachment_212804\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-212804\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/09\/34-client-billing-overview-with-sidebar-1050x794.png\" alt=\"client billing overview with sidebar\" width=\"1050\" height=\"794\" \/><figcaption class=\"wp-caption-text\">Client overview screen in your branded Hub.<\/figcaption><\/figure>\n<p>Clients who you\u2019ve added a website for but haven\u2019t yet sent an invoice to will still see the site, it just won\u2019t have any specific billing info.<\/p>\n<p>Once the first site-specific invoice has been paid, data will immediately populate in the <strong>Summary <\/strong>section, along with the <em>Products &amp; Services<\/em> and <em>Invoices <\/em>sections\u2019 <strong>Status<\/strong>, which will reflect as <strong>Active <\/strong>and <strong>Paid<\/strong>.<\/p>\n<p>If you\u2019ve stuck with us through the full breakdown, congrats! You\u2019re now very well versed in many of the great features in the Client Portal \u2013 ie your branded Hub. We have no doubt you\u2019re going to do amazing things.<\/p>\n<p>If you do ever need an assist, reach out to our highly trained (and top-rated) support team. They\u2019re always on, 24\/7\/365.<\/p>\n<p>For a complete guide to everything on the client portal, see <a href=\"https:\/\/wpmudev.com\/docs\/wpmu-dev-plugins\/the-hub-client-wpmu-dev\/\" target=\"_blank\">The Hub Client documentation<\/a>.<\/p>\n<h2 id=\"summary\">Giving Your Clients a More Customized Experience with The Hub Client from WPMU DEV<\/h2>\n<p>The Hub Client lets you run WPMU DEV on your own domain as a 100% white label experience for your clients.<\/p>\n<p>You can fully customize your branding, colors, links, logins, emails, and users access&#8230;even allow clients to edit certain areas at your discretion.<\/p>\n<blockquote><p>\u201cIt\u2019s like giving your clients backstage access, but as a VIP experience.\u201d \u2013 <strong>Josh Hall<\/strong> (<a href=\"https:\/\/joshhall.co\/156-the-future-of-managing-wordpress-sites-with-james-farmer-ceo-of-wpmu-dev\/\" target=\"_blank\">JoshHall.co<\/a>)<\/p><\/blockquote>\n<p>Check out our Hub Client plugin with one of our <a href=\"https:\/\/wpmudev.com\/pricing\/\" target=\"_blank\">paid plans<\/a>, or our <a href=\"https:\/\/wpmudev.com\/hosting\/\" target=\"_blank\">Hosting<\/a> \u2013 fully dedicated and optimized for WordPress. We offer a 100% satisfaction guarantee, and our support team helps with all things WordPress, not just our products and services.<\/p>\n<p>See you on the inside!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 \u2013 all hosted on your own site, [&hellip;]<\/p>\n","protected":false},"author":915455,"featured_media":215348,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"16","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263,11260],"tags":[],"tutorials_categories":[],"class_list":["post-212404","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-wpmu-dev-products"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/212404","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/915455"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=212404"}],"version-history":[{"count":81,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/212404\/revisions"}],"predecessor-version":[{"id":223271,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/212404\/revisions\/223271"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/215348"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=212404"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=212404"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=212404"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=212404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}