The module will let you alter the order and visibility of displayed elements, adjust existing widgets and add new ones, or even create customizable slideshows.
Additionally, you may set up restrictions rules to show the particular components to selected clients only.

We will guide you step by step through the whole installation and configuration process.

The content of the package to upload should look like this.

File is located in 'modules/addons/ClientAreaDesigner/license_RENAME.php'. Rename it from 'license_RENAME.php' to 'license.php'.

Enter your license key between quotation marks as presented on the following screen. You can find your license key in our client area → 'My Products'.

Log in to your WHMCS admin area. Go to 'System Settings' → 'Addon Modules'. Afterwards, find 'Client Area Designer' and press 'Activate' button.

To do so, click on 'Configure' button, tick 'Full Administrator' and press 'Save Changes'.

You can access your module under 'Addons' → 'Client Area Designer'.

The module does not require highly advanced configuration.
That is why we will immediately move to the most crucial aspect, which is customizing the panels layout.

• Navbars - Management of positions available on the navigation bar in your client area
• Sidebars - Management of panels available on the left sidebar in your client area
• Homepage Widgets - Modify and create new widgets available on your home page

There are already all the predefined sections outlined with their official names and positions.
Info: If you already see that you have more elements than it is visible in the addon, then use 'Scanner' to search for them.
Read more about scanning option here.

Drag one panel and drop it in the required place.

• edit the section
• delete (only custom elements)
• view child elements

• Name - change existing or provide a new element name.
  Note that displayed name in the client area of a default WHMCS element will still be taken from the chosen client's language file, so you need also to modify it accordingly.
• URI - provide a URI
• Icon - add an icon
• Display - hide an element
• Visible - select who it will be visible for: logged in clients, not logged or all clients

If you leave this part empty, the element will be visible to all clients without limitations.

• Domains - select the domains which clients must own
• Products - point the products which clients must own
• Locations - choose the location which clients must enter
  

If you leave this part empty, the element will be visible to all clients without limitations.

• Active - choose which services from at least one of each types customers should have active
• Inactive - choose which services from at least one of each types customers should have inactive (terminated, cancelled, suspended or expired)
• Revenue - define the minimum and maximum revenue earned from the customer to display an element
  

Do not forget to save changes after specifying the conditions.

Start with 'General'. Provide:

• name visible for clients
• unique for the system identifier
• URI
• select icon from available
• select 'Display' to make the panel visible
• finally decide who it will be visible for: logged in clients, not logged in or all clients

In our case, we decided to select products a client must own to get access to 'Support Chat'.
Save changes.

• name
• identifier
• URI
• icon
• select 'Display' to make it visible
• finally select who it will be visible for: logged in clients, not logged or all clients

This time we want all the clients to have access to our FAQ site, so we do no set any 'Display Rules'.

Generally, management of sidebars is very similar to the Navbar panels described in the previous section.

• change positioning by dragging and dropping elements in the selected place
• edit the section - change name, icon, content (if possible), display rules and conditions
• delete elements - this option is available for custom entries only
• view child elements

• provide a new display name
• add icon
• hide/show the element
• change visibility

You can add two types of content - HTML and Content Rotator.
Note that it is possible only if the element has no child elements.

• HTML - simply change the Body or Footer content.
  

• Content Rotator - define how many elements can rotate within specified time intervals and choose the panel navigation elements.
  

If you leave this part empty, the element will be visible for all clients without limitations.

If you leave this part empty, the element will be visible to all clients without limitations.

• Active - choose which services from at least one of each types customers should have active
• Inactive - choose which services from at least one of each types customers should have inactive (terminated, cancelled, suspended or expired)
• Revenue - define the minimum and maximum revenue earned from the customers to display an element
  

Do not forget to save changes after specifying the conditions.

Start with 'General'. Provide:

• name visible for clients
• unique for the system identifier
• select icon from available
• select 'Display' to make the panel visible
• finally decide who it should be visible for: logged in clients, not logged in or all

Note: If you provide the content here, you will not be able to add child elements to this item.

Save changes.

• name
• identifier
• URI
• icon
• select 'Display'
• define visibility

Available actions:

• change positioning by dragging and dropping elements in the selected place
• edit the widget
• view child elements if there are any
• delete custom widgets

• provide a new display name
• change icon
• hide the element

We will leave it empty as we do not want to change the content, just the look and feel of the widget.

• widget color
• button name, URI and icon

To start, simply press 'Add' button.

Start with 'General', provide:

• widget name
• unique for the system identifier
• select icon from available
• finally select 'Display' to make the panel visible

Save changes.

• name
• identifier
• URI
• icon
• select 'Display'

Surely, you can edit each one of them or delete.

These locations are searched through by the module scanner in search of custom panels and are available in the 'Locations' field when setting up 'Display Rules'.

Please note that your locations have to be manageable by WHMCS.

When ready, your new location will be from now on used by Client Area Designer module.

Select a client to log in as one and run the scanner.

For example, if you use {$client.firstname}, {$client.lastname} and {$client.credit} in the following code:

Hello <b>{$client.firstname} {$client.lastname}!</b><br/><br/>
You still have <b>${$client.credit}</b> funds on your account.<br/>
Find out what you can do with them!
<br/>

Hello <b>{$client.firstname} {$client.lastname}!</b><br/><br/>
{if $client.credit gt 0}
You still have <b>${$client.credit}</b> funds on your account. <br/>
Find out what you can do with them!<br/>
{else}Sorry you have no funds!<br/>
{/if}

In this example, if the customer does not have any credit, he will see something like this:

Note: Remember that the incorrect use of Smarty tags may lead to a website not operating properly.
If you need to use a more advanced code using {php} tags, make sure that you have enabled the relevant option in the 'General Settings' → 'Security' .
This function is only supported by WHMCS up to version 8.6. If you plan to update your WHMCS keep in mind {php} tags are no longer supported.

<pre>{php}print_r($template->getTemplateVars());{/php}

To do so:

• open your english.php file
• type in a new line in format:

$_LANG['element name'] = 'Element Name';

• to change/translate it, simply change the content after the '=' sign.

Ensure successful completion of the module update by carefully following each step, thereby preventing data loss or any unforeseen issues.
Additionally, you will find a current list of supplementary actions necessary for a smooth update process there.

Opt for the Open Source version of your Client Area Designer For WHMCS module to unlock these benefits.
Simply click on either the Get Source Code or Upgrade To Lifetime button found on the product's page in our client area to complete the one-step upgrade process, with a dedicated discount already applied.

Follow a comprehensive guide covering the transition process, the advantages it brings, and step-by-step instructions on what to do next after the order has been successfully finalized.