14. The Hub Client WPMU DEV
This guide explains how to use The Hub Client plugin to offer better site management to your clients by overseeing plugins, accessing hosting information, scheduling backups, and more from one convenient area.
To use The Hub Client plugin, your site needs to be connected to our Hub in order to access its API. We recommend reading Installing the WPMU DEV Dashboard Plugin for a guide to connecting your site. Already connected? You can now move onto the installation and configuring the plugin.
The Hub Client ties into our White Label services by allowing you to rebrand the Hub 2.0 as your own. You can fully customize the aesthetic to fit your taste and remove WPMU DEV branding, all through The Hub Client plugin.
14.1 InstallationCopy chapter anchor to clipboard
In order to add The Hub Client to your site, it needs to be downloaded from our WPMU DEV plugins page, installed via WPMU DEV Dashboard or you can navigate to The Hub Client page, and click on Find out more about The Hub Client under White label The Hub.
To download the plugin file, click Download.
When the file has finished downloading, the plugin can be installed and activated on your desired site. It can even be installed on a domain-mapped subsite in a multisite, so you can truly brand the experience. See Uploading a New Plugin for a detailed guide to adding a new plugin.
14.2 SetupCopy chapter anchor to clipboard
Once The Hub Client has been activated, you will be met with a welcome page, giving you an overview of the setup procedure and our exciting vision for the future.
Click Get Started to jump into the setup. You can also tick the Don’t show me this again box if you would like to skip the welcome page next time.
In The Hub Client, you can change the settings to suit your preferences. Before we get into the configuration, just a note that the live preview bar at the top will show you what the top-level menu will look like for your users on the front end.
You can also access the technical documents (these documents), for a complete guide to using The Hub Client, by clicking on View documentation.
Use the navigation options to the left of this document to jump straight to any particular feature you may need help with.
14.2.1 Site Brand Name and LogoLink to chapter 2
By default, your Hub Client will inherit the Brand Name and Logo you have set in your Hub here on the WPMU DEV site (if any), but you can customize that experience if you wish. And if you have the Hub Client installed on more than one site, you can brand the Hub Client differently for each one.
Allows you to display your brand name on your Hub login page. See how to select the Client Page here.
This feature allows you to choose a brand logo to display on the login page and on the top-level Hub menu. Ensure that the logo is less than 1MB and has either a transparent background or a background that matches the Navigation background color.
If you change your mind later and want to remove your logo, you can click Remove in the logo module.
Click Remove once again to confirm the removal of your logo or click Cancel to exit without making any changes.
14.2.3 Subsite (Multisite only)Link to chapter 2
If The Hub Client is installed on a multisite, you can select a subsite on which the Hub will appear.
Type in the subsite you want to select and click Save changes.
14.2.5 Client PageLink to chapter 2
The Client Page is the selected page on which you would like The Hub to be displayed. It is also the page that will be used for the login.
By default, a page called hub will be created and will be selected as the Client Page. If you already have a page called hub, the page will take the name hub1 and so forth, numerically increasing. This page will be removed if you deactivate The Hub Client plugin or if you Reset your configuration. If you don’t want to use the default page, you can easily change this by clicking on hub > and selecting a different page on your site.
14.2.6 Users & RolesLink to chapter 2
Users & Roles
You can jump to your Users & Roles settings in The Hub by clicking Manage under the User & Roles module within The Hub Client plugin settings.
Note that the access you grant to users in your Hub Client is restricted to Hub features only. It does not grant users access to your WPMU DEV account, or any of the other features of your account (like live-chat support).
In The Hub
The Hub is a central site director that allows for delegation to multiple users. These users can be added to the Hub with customized site access, allowing you to distribute site permissions to multiple colleagues or clients.
Looking for a comprehensive run-through of how to set up new users? Read our blog on how to Simply Set Up Users & Roles in The Hub for more information.
Depending on whether you are already a present user of the Hub or you are a user who has been added to the Hub under certain permissions, the experience will be different.
Already a present user? Great, the Hub will function as-is for you.
If you are a new user, the accessibility of all the features will be dependent on the permissions given to you by the admin. See Users for more information about Users & Roles in the Hub.
When you create a new user, they will be required to confirm your invitation and set up their user profile. You will receive a confirmation email if this process has been completed successfully, as a means to inform you that the new user has been added to your team.
The Hub Client Emails
Note that the email system for The Hub Client works slightly differently than the Hub 2.0. Typically, when a new user invite has been sent from the Hub 2.0, the email will be sent from [email protected] or [email protected] However, in The Hub Client, the email will be sent from your own WordPress email.
However, if the site where you have installed The Hub Client is hosted by WPMU DEV, The Hub Client emails will be sent from our default [email protected] address. If you wish, you can whitelabel that address using SMTP.
The DNS feature in the Hub will only be available to the team owner. This means that the DNS tab will not be visible to other users, regardless of which roles they are given. If you would like a refresh of exactly what other features a custom user can access, we recommend reading Create a custom user role.
If you are experiencing errors when sending out emails to invite your users, it may be due to our IPs not being allowlisted on your site. Specifically for this issue, we recommend adding the WPMU DEV Site IP, found in the WPMU DEV IP Addresses document, to your allowlist. However, in general, it is a good idea to add all of our IPs to your allowlist to ensure that all of our services can communicate with your site smoothly.
Users can also enable two-factor authentication for added security.
Two-factor authentication is a great way to create an extra layer of security but it is by no means the only way to improve your site’s safety. Our Defender plugin has been developed to take care of all of your security needs, and Two-factor authentication is just one of Defender’s powerful tools. Visit the Defender plugin page for more information on how you can take your site security to the next level with Defender.
After accepting the invitation, the new user can access the Hub with the permissions granted by the admin. Click on the Account icon in the top right-hand corner to access the dropdown menu. From there, click on Two Factor Authentication to open the authentication configuration module.
Two-factor authentication can now be set up by the user. For more information on this setup process, visit the Two-Factor Authentication documents.
If you’re wanting to manage your websites more efficiently without needing to constantly sign into your admin area, Single Sign-on is a gamechanger. This is supported on The Hub Client as well as The Hub. Simply enable Single Sign-on in your WPMU DEV Dashboard plugin Settings to allow Single Sign-on for yourself and the rest of your team.
Visibility for User-Created Sites
What happens if an added user creates a site and connects it to the Hub? If a new site is created by a user, it will not be visible under their My Sites list at first. This is because the user has been granted permissions based on the initial list of sites, which changes when a new site is created. The new site will be visible under the admin’s My Sites section and access to the new site can be given by managing the user’s permissions, as discussed in Managing Existing Users.
Once the user’s site permissions have been updated by the admin, the new site will be visible under the user’s My Sites section.
Remember to click Save Changes to save your new URL. To remove your URL and revert all changes back to their original state, click Reset.
14.2.8 Site Home URLLink to chapter 2
This feature allows you to customize the link used for the back button on your client login page.
To do this, simply click Add which will open the configuration module.
Enter your custom URL in the https://example.com field and provide a custom title in the Site home URL title field. The custom title that you choose is the text that will be used for the back button and the custom URL is the page to which users will be directed when they click the button.
If you want the back button to open the custom URL in a new tab, tick the Open in new tab box. Remember to click Save Changes to keep your configurations and if you ever want to revert your changes back to the default state, you can click Reset. If no customizations are made, the back button will direct visitors to the default home page of that site.
14.2.10 Reset configurationLink to chapter 2
To reset your settings to their default values, click Reset.
When asked to confirm the reset, click Reset to proceed with reverting your settings or click Cancel to exit.
14.3 Using The HubCopy chapter anchor to clipboard
The Hub offers several features to make your life easier and your site management more efficient. In order to make use of these features, a site needs to be added to the Hub. For a detailed description of how to connect a new site to the Hub, read Add a Site to Hub 2.0.
Each site can be controlled through the different modules available. If you would like more information on how to use these modules for a site, we recommend reading Managing a Website in Hub 2.0.
Among many effective site management tools, the Hub also allows you to control domains and DNS records. Detailed guides to managing domains and DNS records can be found at Domains and DNS from the WPMU DEV Technical Documents.
14.4 LoginCopy chapter anchor to clipboard
Once you have configured The Hub Client plugin settings, the Hub can be accessed by viewing the selected Client Page on the front end. To select a page where you want the Hub to appear, adjust the plugin settings as specified here.
Enter your WPMU DEV credentials to log into the Hub. Alternatively, you can use your Team user credentials if you are a user added to the Hub by the admin. Tick the Remember me box to skip the login process next time.
14.5 IntegrationsCopy chapter anchor to clipboard
This chapter provides guidance on setting up and connecting third-party products that are compatible with The Hub Client.
14.5.1 LiveChat ChatLink to chapter 5
This feature enables you to integrate a live chat support widget from LiveChat directly in the Hub Client on your site, branded with your Hub colors & logo. If you have also enabled the Help Button option in your Hub Client, that will appear beside the live chat trigger.
To get started with this integration, log into your account at LiveChat.com or create a free account there if you don’t already have one.
Once logged-in, click the Settings icon in the left-hand sidebar, then select the Website option.
In the right-hand pane, you’ll see a section where you can Install LiveChat code manually. Pop that section open and click the Copy code button to get the code shown there, and paste that into a simple text file.
Then copy only the numbers from the license ID in that block of code; that’s all you need for this integration.
Once you have copied your LiveChat license ID, go to The Hub Client > Settings in your site’s wp-admin and, in the Live Chat Widget configuration section, click the Add link.
In the modal that pops open, select LiveChat and paste the license ID that you copied from your LiveChat account into the License ID field, then click Save.
Now when you visit your Hub page on your site, you should see your new LiveChat chat widget on the bottom-right corner.
Managing Chat Messages
By default, you’re notified of all incoming chats, as well as new messages, tickets, visitors and visitors in the queue, with a bell sound or voice message. You can adjust your Notification preferences when you click on your Profile menu at the bottom-left corner of your LiveChat account.
All ongoing chats can be managed by clicking on the Chats icon at top-left in your LiveChat account.
You can access and manage your support tickets by clicking on the Tickets icon.
Editing chat widget options and appearance
You can edit and brand the appearance of your chat widget at any time by clicking the Chat Widget > Customization option in your LiveChat account Settings.
You can also set up and customize the pre and post-chat surveys, email capture, ticket form when you’re offline, and a whole lot more. From the Settings menu, select Chat surveys & forms to get that done.
For help with anything else related to your LiveChat chat widget or account, please see the LiveChat help documentation.
14.5.2 Tawk.to ChatLink to chapter 5
This feature enables you to integrate a live chat support widget from Tawk.to directly in the Hub Client on your site, branded with your Hub colors. If you have also enabled the Help Button option in your Hub Client, that will appear beside the live chat trigger.
To get started with this integration, log into your account at Tawk.to or create a free account there if you don’t already have one.
If you already have an active Tawk.to account with at least one widget already created, just click the + Add Widget button at top-right, and create a new one as detailed below.
If this is a new account, click the Administration icon in the left-hand sidebar once you’re logged-in. Enter any Widget Name you like for your new chat widget, and select either the Inline or the Embed option; both work fine for this integration. Then click the Create Widget button.
On the next screen, just click the Done button to create your chat widget.
The page will reload and you’ll now see all the info related to your new chat widget. What you want right now is the Widget code shown at the top-right of the screen.
Click to copy that code, and paste it into a simple text file. Then copy only the s1.src URL from that code. That’s all you need for this integration.
Once you have copied the s1.src URL, go to The Hub Client > Settings in your site’s wp-admin and, in the Live Chat Widget configuration section, click the Add link.
In the modal that pops open, select tawk.to and paste the s1.src URL into the s1.src URL field, then click Save.
Now when you visit your Hub page on your site, you should see your new Tawk.to chat widget on the bottom-right corner.
Managing Chat Messages
By default, you’re notified of all incoming chats, as well as new messages, and visitors with various bell sounds. You can adjust the notifications by clicking Manage Sounds & Notifications from your Profile menu at the top-right corner of your Tawk.to account.
All ongoing chats can be managed by clicking on the Chats icon at top-left in your Tawk.to account.
You can access and manage your support tickets by clicking on the Messaging icon.
Editing chat widget options and appearance
You can edit the appearance of your chat widget at any time by clicking the Advanced button in the Widget Appearance section of your Chat Widget settings.
You can also set up and customize the pre and post-chat surveys, email capture, ticket form when you’re offline, and a whole lot more. Click the Advanced button in the Widget Content section of your Chat Widget settings.
For help with anything else related to your Tawk.to chat widget or account, please see the Tawk.to help documentation.
14.5.3 HubSpot LiveChatLink to chapter 5
This feature enables you to integrate a live chat support widget from HubSpot directly in the Hub Client on your site, branded with your Hub colors & logo. If you have also enabled the Help Button option in your Hub Client, that will appear beside the live chat trigger.
Create a Chatflow in HubSpot
To get started with this integration, log into your account at HubSpot.com or create a free account there if you don’t already have one.
Once logged-in, click Chatflows in the Conversations menu, then click the Create chatflow button.
In the next step, select Website.
Then click the Set up chat button to configure the live chat widget for your Hub Client.
Go through the wizard steps to configure your chat widget however you want it and style it to fit your brand colors. You can always edit things later in the Chatflow settings in your HubSpot account.
Once you’re done configuring your chat widget in their setup wizard, you’ll see a prompt to install their WordPress plugin. You do not need that for this integration, so just ignore that prompt and click the Verify installation button at the bottom-right.
You should then see a confirmation message that Live Chat is now connected, and that a test message has been sent. Click the View message in inbox button to be redirected to your new HubSpot chat inbox.
Get Your HubSpot Tracking Code
At the top of the Inbox screen, you may see a message saying Tracking code is not installed, with a button to get the code. Ignore that message and button, as that will just once again show you the prompt to install their plugin, which you do not need for this integration.
Instead, click the gear icon at the top-right of the screen to open your account settings.
Then click Tracking Code in the sidebar menu on the left.
In the Tracking code installation section, you’ll see an embed code. You need only copy your HubSpot ID from that code. You can also click the WordPress installation link below that and copy the ID directly from there.
Once you have copied your HubSpot ID, go to The Hub Client > Settings in your site’s wp-admin and, in the Live Chat Widget configuration section, click the Add link.
In the modal that pops open, select Hubspot and paste your HubSpot ID in the HubSpot Tracking Code field, then click Save.
Now when you visit your Hub page on your site, you should see your new HubSpot Live Chat widget on the bottom-right corner.
Managing Chat Messages
By default, you will be notified by email of every new conversation started by a user in your chat widget. The email would look like this:
Every message sent by a user will also trigger notifications according to how you configure them in your HubSpot account. By default, you’ll be notified of every new message in the chat widget with a bell sound on your desktop or laptop computer.
You can set up numerous other types of notifications too, like browser popups and push notifications to your mobile device. To access all of the notification options, click Notifications in your HubSpot account Settings.
Any time a user sends a message from that chat widget, it will appear in your HubSpot Inbox. You can access that in your HubSpot account by clicking the Inbox option in the Conversations menu.
Creating HubSpot Contacts
HubSpot sets cookies in the user’s browser each time a new chat session is triggered. However, all chat sessions show up as “Unknown visitor” in the Conversations inbox, and HubSpot only logs the history of chats from known contacts in your contacts list there.
So if you wish to keep a history of all chats for each user in your HubSpot account, we recommend that you enable the option to capture their email addresses as soon as they send their first message in the chat (see below). Entering an email address in the capture form in the chat widget in your Hub Client will trigger the creation of a contact, or update an existing one.
This will ensure that every time a user initiates a chat and enters the same email address in the capture form, the conversation will be logged under that contact in HubSpot so you can refer back to it at any time.
Editing chat widget options and appearance
You can edit the appearance of your chat widget at any time by clicking the Inboxes option in your HubSpot account Settings, then hover your mouse over the Chat section and click the Edit link there.
You can also edit the welcome message that displays to users in the chat widget, along with email capture if needed, default chat widget language, display behavior, triggers, chat widget position (left or right), and more To do that, click Chatflows in the Conversations menu in your HubSpot account. Then hover your mouse over the chatflow you want, and click the Edit button.
For help with anything else related to your Hubspot chat widget or account, please see the Hubspot help documentation.
14.6 White Label WPMU DEV PluginsCopy chapter anchor to clipboard
Our White Label services allow you to remove all WPMU DEV branding so that you can use your own branding or even your client’s branding. This is largely offered as a tool through our WPMU DEV Dashboard Plugin. For a guide to rebranding with the WPMU DEV Dashboard Plugin, read our White Label Plugins document.
The process of white labeling your site is also closely linked to our Branda plugin. Branda simplifies white label branding, maintenance and much more. Read our WPMU DEV documents on Branda to learn more about the plugin’s capabilities.