Client Area Homepage Panels

The customizable panels in the Client Area Homepage display quick information to clients when they log in. You can customize this part of the Client Area to suit your brand and your customers’ needs.

Panel Structure

The panels on the Client Area homepage use a tree structure of objects.

Each panel is a child of an invisible root item. Many panels also render their own child items as lists of links inside the panel:

  • root item
    • panel item
      • line item
      • line item
      • line item
    • panel item
      • line item
      • line item
    • panel item

Panel Layout

Panels can appear in two layouts, Desktop Mode or Responsive Mode.

  • Desktop Mode typically appears in desktop web browsers. It renders most Client Area homepage panels in two columns.
  • Responsive Mode activates when the Client Area renders on a smaller screen like a phone or tablet. It renders all panels in a single column.

For more information about the Client Area layouts and how they determine panel display, see Client Area Layout.

Formatting and Customizing Panels

Client Area Homepage panels are similar to sidebar panels. They use the same underlying structure as menu item objects, but include a few unique changes.

  • A homepage panel’s label is not a clickable link.
  • Setting a URI in a homepage panel has no effect.

Custom Colors

Panels can render in a custom color when you define the color menu item attribute.

The following colors are available:

  • gold
  • green
  • red
  • blue
  • orange
  • pink
  • purple
  • lime
  • magenta
  • teal
  • turquoise
  • emerald
  • amethyst
  • wet-asphalt
  • midnight-blue
  • sun-flower
  • pomegranate
  • silver
  • asbestos

Optional Button

Each homepage panel has an optional button that renders to the right of the panel’s label and badge.

Define the following menu item extras to render a button in a homepage panel:

  • btn-link — The URL to load in the user’s web browser when the viewer clicks the button.
  • btn-text — The text within the button.
  • btn-icon — An optional Font Awesome icon to display to the left of the button’s text.
  • colspan — In WHMCS 8.5 and later, an optional Boolean value that causes the panel to span both columns.

Default Panels

WHMCS defines several panels by default:

NameOrderRequired PermissionConditions for Display
Unpaid Invoices10InvoicesAt least one unpaid invoice with no overdue invoices.
Overdue Invoices10InvoicesAt least one overdue invoice.
Domains Expiring Soon50Manage DomainsAt least one domain expiring within 45 days.
Active Products/Services100Manage ProductsNone
Recent Support Tickets150Support TicketsNone
Register a New Domain200OrdersDomain registration is enabled.
Your Files250NoneAt least one file is associated with the client’s account.
Affiliate Program300AffiliateAn active affiliate account.
Recent News500NoneNone
  • Hooks can register additional panels and interact with default panels. There is no guarantee that these panels will be visible or use this display order.
  • Most panels are conditional and require the user to have the appropriate permissions.

Interacting With Homepage Panels

You can use the add_hook() function to call custom code when WHMCS is rendering homepage panels.

The ClientAreaHomepagePanels hook allows you to manipulate the Client Area homepage’s panels.

  • Call this hook before you assign the panel object to the view template.
  • This hook passes the Client Area home panel’s root item to the hook function.

For more information about using the hook system and supported hook functions, see our Developer Documentation.

Custom Actions

In WHMCS 8.5 and later, you can use the CustomActions server module function to define items that perform a set function and then redirect the user to a specified URL.

  • Customers can invoke items from within the Client Area.
  • Use this to specifically add items to the My Active Products/Services panel in the Client Area home page.
  • You can also use this to add custom actions to Client Area service sidebar menus.

For more information on using custom actions, see our Developer Documentation.

Customization

You can add, modify, or remove panels in the Client Area to suit your needs.

For examples of customizing Client Area Homepage panels, see:

Last modified: June 5, 2024