14. The Hub Client WPMU DEV

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.

Brand Name

Allows you to display your brand name on your Hub login page. See how to select the Client Page here.

Logo

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.

Navigation background

Enables you to select a custom background color for the top-level menu. The cursor can be manually dragged to achieve the desired color or you can type in a hex color code. As the color is adjusted, it will change in the live preview bar to give you a better sense of what the final menu will look like.

Navigation text

The navigation text feature controls the color of the text on the top-level menu to best suit your website.

Navigation text selected & hover

This setting allows you to customize the color of the text when an item is selected or when your mouse hovers over an item. If you don’t want the text to change color, you can set the navigation text selected & hover color to the same as the navigation text color.

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.

Allows you to customize your Hub menu to include other pages that you may want to access easily or advertise. This is done by selecting which menu from your website you wish to add to the top-level menu, which can be customized by adjusting your site menus in Appearance>Menus. Any items from the selected menu will be added to the top-level menu, alongside the default items for the Hub.

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.

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.

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.

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.

Confirmation Email

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.

Two-Factor Authentication

Users can also enable two-factor authentication for added security.

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.

Single Sign-On

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.

These settings allow you to set your own Terms of Service and Privacy Policy. This can be done by simply clicking Add and linking each URL.

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.

Your Terms of Service and Privacy Policy are important for when a new user is added and confirms your invitation. Upon their setup, they will be asked to agree to the Terms of Service and Privacy Policy that you have set. However, the Terms of Service and Privacy Policy checkbox will only appear on your invitations once you have added URLs for both documents.

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.

Wanting to provide some of your own help resources? This allows you to add a floating help bubble on your Hub page that, when clicked, will direct the user to a URL of your choice. To open this module, click Add.

Enter the URL for your help page and click Save Changes. If you want to start fresh, you can always click Reset to revert the settings for this module back to its original state.

If you leave this configuration blank, the help button will not show up on your Hub page. However, once a valid URL has been added, it will look a little something like this:

By default, the help page will be opened in a new tab.

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.

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.

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.

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.