Learn easy methods to give your purchasers a straightforward {and professional} white label portal expertise the place they’ll entry their account, websites, and pay you by way of a safe and self-hosted checkout.
Imagine having your individual distinctive portal the place your purchasers can login, entry their billing accounts, even make funds – all hosted by yourself web site, with your individual branding.
Well, excellent news, with WPMU DEV it’s potential and easy! And on this article we’re displaying you easy methods to create the consumer portal of your goals.
You’ll study:
- How to create {custom} login pages for purchasers,
- How to ask purchasers to your portal utilizing branded emails,
- How purchasers could make funds to you shortly and simply.
By the top of this text you should have arrange a glossy portal underneath your individual model that purchasers can use to entry details about their websites and make safe funds on your companies.
Here are the part breakouts:
And we’re off!
What You Will Need To Create Your Portal
Before we get began, right here’s what you’re gonna want if you wish to comply with alongside, or finally create your individual portal:
1. The Hub, to ascertain the bottom of your portal and combine billing instruments
The Hub is your central interface as a WPMU DEV consumer, and it’s the place our internet developer members handle each side of their consumer websites.
You can study extra about the way it works in our how to get the most out of The Hub article.
This all-in-one web site interface additionally features a built-in consumer administration and billing dashboard – the place you may bill purchasers, arrange subscriptions, monitor month-to-month recurring income (MRR), and extra.
And most significantly and related to this text… you may invite your purchasers to have personalized entry to your billing dashboard (and particular areas of your general Hub), the place they’ll view their account and subscription information, and even pay invoices straight by way of a built-in Stripe checkout.
All of the above lays the groundwork on your white label consumer portal. But it’s nonetheless all underneath WPMU DEV’s branding up till this level.
That’s the place this subsequent instrument comes into the equation…
2. The Hub Client, to model your portal as your individual
The Hub Client means that you can take your Hub interface, together with billing instruments and checkout, and white label your complete factor with your individual branding, logos, and so forth.
This occasion shall be by yourself web site at your individual area, so when your purchasers login they see your model, not ours.
3. A Hosted Site For Your Portal
Finally, you’ll additionally want a hosted web site to host your consumer portal…
This may be both a Third-party hosted web site, or there’s all the time our personal dedicated WordPress hosting, which you may also handle proper out of your Hub dashboard.
All of the above instruments are included with the WPMU DEV Agency plan, which you may also trial for free right now.
Okay, now that you realize what’s wanted, we’ll get all the way down to it!
How To Create and Brand Your Client Portal
Okay, first issues first… because the white label consumer expertise comes courtesy of The Hub Client, we need to set up and configure that right away.
Once you’ve signed up for a paid WPMU DEV membership, The Hub Client plugin shall be obtainable to put in totally free by way of the plugin touchdown web page, The Hub plugin supervisor, or the WPMU DEV dashboard plugin (proven beneath).
Once activated, click on on it to see the Welcome display screen, then click on on Get Started. This places you straight into Settings.
By default, your Hub Client will inherit the Brand Name and Logo you’ve got set in your individual Hub, however you may customise it to be no matter you want.
We’ll shortly arrange our first three model customizations underneath Site Profile.
- Click the arrow icon for Brand title, sort what you’d wish to name it, and Save Changes.
- Next, click on the arrow icon for Your Logo, add your graphic, and Save Changes.
- Under Color Scheme, click on the arrow icon for Navigation Background, choose desired shade from the colour picker, then Save Changes. You can even choose your Navigation textual content and Navigation textual content chosen & hover colours right here, to match your totally branded colour scheme.
You can see all your modifications in real-time by way of the Preview strip on the high of the Settings web page.
We need to make getting round in our branded portal a satisfying, wise expertise for our purchasers.
We can simply accomplish this via the Hub Client’s settings.
Let’s take a look at personalizing the remainder of the branded portal on your purchasers.
First up, we’re going to arrange what shall be displayed as the primary menu of your branded portal.
From the primary display screen in The Hub Client; scroll all the way down to Configuration, and click on the chevron arrow to the appropriate of Navigation.
Select from the dropdown choices, or create a web site particular menu in WordPress’ Appearance > Menus, then come again to this web page and choose it.
Now we’ll set the consumer web page because the hub.
Click the chevron arrow to the appropriate of Client Page, and from the resultant popup, choose as desired from the dropdown choices, then Save.
Now you’ll see this extra linked textual content – View Page, subsequent to Client Page, together with the title of the web page you chose to the appropriate. In this case, “hub”.
Click on View Page and it’ll open this occasion of the Hub in a brand new webpage, the place you’ll see the web page you chose, with the menu you chose on the high of the positioning.
You can even customise the hyperlink used for the Back textual content in your Client Login web page. We’ll knock that out proper now.
From the WP Dashboard > The Hub Client > Settings > Configurations > Home Site URL, click on Add to open the configuration module.
Enter the positioning URL and web site title (Title), and Save modifications. (You can even click on the checkbox to Open in a brand new tab previous to saving, in case you choose.)
Note: if no customizations are made right here, the again button will direct to the default dwelling web page for that web site.
If you ever need to revert again to the default state, merely click on the Reset button.
Setting Up a Help Button
Having assist assets available on your purchasers is a giant plus. It goes a protracted strategy to making them really feel calm and picked up, figuring out solutions are only a click on 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 stroll you thru how to do this now.
From the WP Dashboard > The Hub Client > Settings > Configuration; to the appropriate of the Help Button, click on Add.
Enter the URL on your Help web page, then Save Changes.
Tada! You’ll now have a floating assist bubble in your Hub web page that when clicked, will direct the consumer to your chosen URL. By default, the Help web page shall be opened in a brand new tab.
Once you’ve arrange your Help Button, it’s going to show within the decrease proper nook of The Hub foremost web page, prepared for motion.
Integrating Live Chat
Live Chat is a improbable function to offer to your purchasers. And The Hub Client presents three highly-rated chat platform integrations to select from.
If you head over to the WordPress dashboard, The Hub Client > Settings > Integrations, you may configure a Live Chat widget in your Hub Client.
Three of the preferred third-party companies can be found: LiveChat, Tawk.To, and HubSpot.
Depending on which dwell chat service you select, the setup will fluctuate.
If you’d like a primary walkthrough on setting these up in The Hub Client, learn How to Set Up Live Chat on WordPress. Or get the total rundown in our Integrations help docs.
Inviting Clients To Your Custom Portal
Time to roll out the pink carpet! With customizations set, we’re able to deliver our purchasers inside.
Let’s begin by manually including a brand new consumer.
Navigate to The Hub > Clients & Billing, and click on + New Client.
Enter all of the consumer’s required (and non-obligatory, as desired) info within the type fields.
User Roles play a really vital half in Client setup. Basically, these determine what every consumer could have entry to in your hub, when it comes to viewing and taking motion. You have full management on these by choosing permissions.
We take a deep dive into User Roles on this Clients & Billing article. For now, click on on the dropdown arrow underneath User Role, and choose View All & Access billing.
If you go for a Custom Role – you can also make one on the spot by clicking on + Create {custom} consumer position.
This will deliver up the display screen the place you may choose choices from the primary and nested menus. Name your new position, and put it aside.
Now in case you return to that consumer, you may assign this tradition position to them.
While including a consumer, additionally, you will decide what Primary Hub they’re related to.
If you’ve got multiple Hub, will probably be obtainable within the dropdown. If you’re utilizing The Hub Client on a web site, and choose it because the Primary Hub, when that consumer clicks on a Confirm Invitation or Pay Invoice hyperlink out of your Client & Billing automated e-mail, they’ll be taken to the your white labeled Hub web site as an alternative of wpmudev.com.
Manage limitless WP websites totally free
Unlimited websites
No bank card required
At the underside, change the Invite Client toggle to on, then click on Add.
Boom! Client has been added, and despatched a white-labeled invitation to your consumer portal, which can seem like this:
Once the consumer confirms by clicking the Confirm Invitation hyperlink in your e-mail, they’ll have entry to your branded portal.
If they already had an present Hub account with you, it’s going to take them on to the login web page of the Hub they have been invited from.
If they’re new to your account, they’ll be taken to the account creation web page of that Hub occasion.
From the account creation web page, they’ll get a popup modal with their e-mail handle already within the type subject. They’ll simply have to create a password, then click on the Create Account button.
What Your Clients Will See Inside Their Portal
Every consumer expertise in your portal shall be distinctive to them.
Your branding shall be prevalent all through, and what your purchasers will be capable to view and entry relies on the permissions you’ve granted them via User Roles.
It’s a improbable strategy to {custom} serve every consumer an ideal match on your mixed enterprise pursuits and desires.
The Client Dashboard
Once your purchasers have logged into your consumer portal, they’ll be greeted by a dashboard with entry to any content material you’ve given them permissions for.
Clients can arrange single or a number of websites in your portal, and arrange them of their dashboard space as they see match.
The roles you’ve assigned to a consumer are editable by you and may be modified at any time within the administration and billing platform.
For instance, if we assign Billing permissions to a consumer, he/she could have the flexibility to view and edit something in that part, however they’ll be lower off from every other pages/screens in Client Billing.
Read this submit for a closer look at User Roles and Permissions.
Letting your purchasers view and handle their very own billing particulars saves you the effort and time you’d in any other case spend on their admin actions, and permits them to really feel related to their account.
There is rather a lot your purchasers can accomplish right here. For instance, managing their billing information and account particulars, viewing their companies and subscriptions, filtering on fee standing (due or paid), assessing what their common spend is, and way more.
In the billing part, purchasers can see all the particulars by drilling down via the assorted menu choices.
Any line merchandise right here may be clicked on for full particulars, and/or to take sure actions. For instance, canceling a subscription.
Invoices may also be examined in full element.
The built-in filter performance is nice, providing distillation choices for date, fee standing, and web site.
If you’ve given them permissions to take action, purchasers can view particulars and take motion on companies and payments, akin to making funds or downloading PDF variations of invoices.
Client Profile
Clients can freely edit their private content material – profile information (together with their profile pic, if they’ve one set in Gravatar), make a password change, setup 2FA (requires an authenticator app), or signal out, all via the cog icon menu within the higher proper nook.
Everything updates in actual time. For instance, if the consumer modifications the e-mail addy of their profile, it’s going to additionally replace of their billing profile, because the Hub and Clients & Billing profiles are synced. Easy peasy!
Clients Can Pay Invoices by way of The Client Portal
With the Clients & Billing modal, your consumer could have the comfort of paying you straight via your branded consumer portal (with safe Stripe checkout totally built-in)!
As talked about earlier, all consumer administration actions together with funds happen securely inside your individual area and totally custom-branded screens.
Throughout the course of their business trip with you, purchasers are saved within the loop with automated emails, which replicate your {custom} model and firm particulars.
Clients can readily make funds by clicking on the invoiced e-mail hyperlink, taking them to the fee portal.
The consumer can enter their fee info, then click on the Pay button, which could have particular info on it concerning the sum of money and repair they’re approving.
Note, in the event that they beforehand added a fee methodology, it’s going to auto populate right here, with an possibility to vary it if desired.
The consumer can verify all of their information on the subsequent web page, then click on to pay.
With the fee made, the bill will load up, reflecting the small print and paid standing.
Now in case you go to the Invoices tab, you’ll see all present and excellent invoices.
In the Status column, pink signifies fee is due, and inexperienced signifies fee has been made.
The top-level Invoices menu has a notifier icon (a quantity in a pink circle), indicating the amount of excellent invoices – for fast visible reference.
The consumer can obtain a replica of any paid bill by clicking the PDF Invoice button on the top-right of the bill display screen.
Clients Can Access Invoices Directly in The Billing Modal of The Hub
Your purchasers can simply view and handle billing actions from any websites of their Hub, associated to particular billing. It shall be almost equivalent to what you see in your Hub Billing space, in fact particular solely to their web site(s).
Clients can use the left sidebar menu to navigate to their billing part.
Clients want solely click on the Billing hyperlink within the sidebar menu of any web site they’re viewing to get began. Any invoices you’ve despatched to them shall be accessible to them right here.
Clients who you’ve added an internet site for however haven’t but despatched an bill to will nonetheless see the positioning, it simply received’t have any particular billing information.
Once the primary site-specific bill has been paid, information will instantly populate within the Summary part, together with the Products & Services and Invoices sections’ Status, which can replicate as Active and Paid.
If you’ve caught with us via the total breakdown, congrats! You’re now very properly versed in most of the nice options within the Client Portal – ie your branded Hub. We have little doubt you’re going to do wonderful issues.
If you do ever want an help, attain out to our highly-trained (and top-rated) assist workforce. They’re all the time on, 24/7/365.
For a whole information to every little thing on the consumer portal, see The Hub Client documentation.
Giving Your Clients a More Customized Experience with The Hub Client from WPMU DEV
The Hub Client permits you to run WPMU DEV by yourself area as a 100% white label expertise on your purchasers.
You can totally customise your branding, colours, hyperlinks, logins, emails, and customers entry…even permit purchasers to edit sure areas at your discretion.
“It’s like giving your clients backstage access, but as a VIP experience.” – Josh Hall (JoshHall.co)
Check out our Hub Client plugin via a trial of one in every of our paid plans, or our Hosting – totally devoted and optimized for WordPress. We supply a 100% satisfaction assure, and our assist workforce helps with all issues WordPress, not simply our services.
See you on the within!
