Personal tools
Namespaces

Variants
Actions

Client Area Designer For WHMCS

From ModulesGarden Wiki
(Difference between revisions)
Jump to: navigation, search
(→‎Panels)
Line 188: Line 188:
 
===Panels===
 
===Panels===
 
{|
 
{|
−
|style="padding: 10px 0px 20px 15px;"|Under '' 'Panels' '' tab you will find three sections dedicated to the visibility of different types of panels in your client area.<br/>
+
|style="padding: 10px 0px 30px 15px;"|Under '' 'Panels' '' tab you will find three sections dedicated to the visibility of different types of panels in your client area.
 
*Navbars - Manage positions available on the navigation bar in your client area. Additionally, define requirements for element to be shown.
 
*Navbars - Manage positions available on the navigation bar in your client area. Additionally, define requirements for element to be shown.
 
*Sidebars - Manage panels available on the left sidebar in your client area. Additionally, define requirements for panels to be shown or modify output of the default panels.
 
*Sidebars - Manage panels available on the left sidebar in your client area. Additionally, define requirements for panels to be shown or modify output of the default panels.
−
*Homepage Widgets - Homepage Widgets can be viewed and modified here. New ones can also be created.
+
*Homepage Widgets - Homepage Widgets can be viewed and modified here.
−
|}
+
−
{|
+
−
|style="padding: 0px 0px 30px 25px;"|[[File:CAD_8.png]]
+
 
|}
 
|}
 
====Navbars====
 
====Navbars====
Line 202: Line 199:
 
|}
 
|}
 
{|
 
{|
−
|style="padding: 0px 0px 20px 25px;"|[[File:CAD_9.png]]
+
|style="padding: 0px 0px 20px 25px;"|[[File:CAD_8.png]]
 
|}
 
|}
 
{|
 
{|
−
|style="padding: 0px 0px 20px 15px;"|Those are the below navbar panels visible in client area.
+
|style="padding: 0px 0px 20px 15px;"|Those are the below navbar panels visible in the client area.
 
|}
 
|}
 
{|
 
{|
−
|style="padding: 0px 0px 20px 25px;"|[[File:CAD_10.png]]
+
|style="padding: 0px 0px 20px 25px;"|[[File:CAD_9.png]]
 
|}
 
|}
 
{|
 
{|
 
|style="padding: 10px 0px 20px 15px;"|Use action buttons to:
 
|style="padding: 10px 0px 20px 15px;"|Use action buttons to:
 
*edit the section
 
*edit the section
−
*delete
+
*delete '''(only custom elements)'''
−
*view more
+
*view child elements
 
|}
 
|}
 
{|
 
{|
 
|style="padding: 0px 0px 20px 25px;"|[[File:CAD_9.png]]
 
|style="padding: 0px 0px 20px 25px;"|[[File:CAD_9.png]]
 
|}
 
|}
−
=====New Elements=====
+
=====Edit Element=====
 
{|
 
{|
−
|style="padding: 0px 0px 15px 15px;"|You may add a completely new parent element either on left or right side.<br/>Press '' 'Add'.''  
+
|style="padding: 10px 0px 15px 15px;"|When you are editing an existing parent element, you may:
 +
*provide a new display name
 +
*change URI - location it is placed in
 +
*add icon
 +
*hide the element
 +
|}
 +
{|
 +
|style="padding: 0px 0px 30px 25px;"|[[File:CAD_10.png]]
 +
|}
 +
{|
 +
|style="padding: 0px 0px 15px 15px;"|You may also provide some display rules, only clients who fulfill the rules will see the element.<br/>
 +
If you leave this part empty, the element will be visible for all clients without limitations.
 +
*select domains a client must own
 +
*point product that must be owned
 +
*location a client must enter<br/>
 +
Do not forget to save the changes when ready.
 +
|}
 +
{|
 +
|style="padding: 0px 0px 30px 25px;"|[[File:CAD_10.png]]
 +
|}
 +
=====New Parent Elements=====
 +
{|
 +
|style="padding: 10px 0px 15px 15px;"|You may add a completely new parent element either on left or right side.<br/>Press '' 'Add'.''  
 
|}
 
|}
 
{|
 
{|
Line 229: Line 248:
 
|style="padding: 0px 0px 15px 15px;"|Then you will have to fill out all the general info, content and display rules.<br/>
 
|style="padding: 0px 0px 15px 15px;"|Then you will have to fill out all the general info, content and display rules.<br/>
 
Start with '' 'General'.'' Provide:
 
Start with '' 'General'.'' Provide:
−
*new panel system name
+
*name visible for clients
−
*label which will be visible for clients
+
*unique for the system identifier
 
*URI
 
*URI
 
*select icon from available
 
*select icon from available
Line 238: Line 257:
 
|style="padding: 0px 0px 30px 25px;"|[[File:CAD_10.png]]
 
|style="padding: 0px 0px 30px 25px;"|[[File:CAD_10.png]]
 
|}
 
|}
−
 
 
{|
 
{|
−
|style="padding: 0px 0px 15px 15px;"|Next, type in the body and footer HTML content.  
+
|style="padding: 0px 0px 15px 15px;"|If you want only some of the clients to see the panel, then set up the '' 'Display Rules'.''<br/>
 +
Save the changes in the end.
 +
|}
 +
{|
 +
|style="padding: 0px 0px 20px 25px;"|[[File:CAD_10.png]]
 +
|}
 +
{|
 +
|style="padding: 0px 0px 20px 15px;"|This is how our new panel looks like in the client area:
 
|}
 
|}
 
{|
 
{|
Line 246: Line 271:
 
|}
 
|}
  
 +
=====New Child Elements=====
 +
{|
 +
|style="padding: 10px 0px 15px 15px;"|Let's now add one child element to the just created '' 'Test Panel'.''
 +
|}
 +
{|
 +
|style="padding: 0px 0px 30px 25px;"|[[File:CAD_10.png]]
 +
|}
 +
{|
 +
|style="padding: 0px 0px 15px 15px;"|You have to fill out the same data as in case of parent element:<br/>
 +
*name
 +
*identifier
 +
*URI
 +
*icon
 +
*finally select '' 'Display' '' to make the panel visible
 +
|}
 +
{|
 +
|style="padding: 0px 0px 30px 25px;"|[[File:CAD_10.png]]
 +
|}
 +
{|
 +
|style="padding: 0px 0px 15px 15px;"|If you want only some of the clients to see the panel, then set up the '' 'Display Rules'.''<br/>
 +
Save the changes in the end.
 +
|}
 +
{|
 +
|style="padding: 0px 0px 20px 25px;"|[[File:CAD_10.png]]
 +
|}
 
{|
 
{|
−
|style="padding: 0px 0px 15px 15px;"|In the last section you may set some rules. Only if fulfilled the panel will be visible for clients.<br/>
+
|style="padding: 0px 0px 20px 15px;"|This is how our new panel looks like in the client area:
−
You may point which domains, products or locations a client must own to let them see and access the panel.<br/>
+
−
If you skip this section the created element will be visible all the time.
+
 
|}
 
|}
 
{|
 
{|

Revision as of 10:38, 20 September 2016


Contents

About Client Area Designer For WHMCS

Client Area Designer For WHMCS is a module that allows administrators to manage their client area final view.

Change the order of displayed elements, add new ones or hide them if you do not want your clients to access them.
Additionally, you may create new widgets and set up restrictions rules to show the widget to selected clients only.

  • Module Features:
✔ Customize Your Client Area By Modifying:
✔ Navbar Elements
✔ Sidebar Elements
✔ Homepage Widgets
✔ Add Your Own Elements & Widgets
✔ Scan Your Client Area In Search Of Custom Elements & Widgets
✔ View & Modify List Of Known Locations In Your Client Area
  • Navbar Element Features:
✔ Define Name
✔ Define URI
✔ Define Icon
✔ Define Display Rules:
✔ Client Owns Domain
✔ Client Owns Product
✔ Client Is In Location
✔ Add Multiple Links To Element
  • Sidebar Element Features:
✔ Define Name
✔ Define URI Of 2nd Level Elements Only
✔ Define Icon
✔ Define Display Rules:
✔ Client Owns Domain
✔ Client Owns Product
✔ Client Is In Location
✔ Choose One Feature Per Element:
✔ Add Multiple Links To Element
✔ Define Custom Body & Footer Content - Support HTML, CSS & JavaScript
  • Homepage Widget Features:
✔ Define Name
✔ Define URI Of 2nd Level Elements Only
✔ Define Icon
✔ Define Style Color
✔ Define Widget Button
✔ Choose One Feature Per Widget:
✔ Add Multiple Links To Element
✔ Define Custom Body & Footer Content - Support HTML, CSS & JavaScript
  • General Info:
✔ Multi-Language Support
✔ Supports WHMCS V6

Installation

This tutorial will show you how to successfully install and configure Client Area Designer For WHMCS.

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

1. Log in to your client area and download Client Area Designer For WHMCS.
CAD 1.png
2. Upload and extract the module into the main WHMCS directory.

Files in your WHMCS directory should look like on the following screen.

CAD 2.png
3. When you install Client Area Designer for the first time you have to rename 'license_RENAME.php' file.

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

CAD 3.png
4. In order to configure your license key, you have to edit the previously renamed 'license.php' file.

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

CAD 4.png
5. Now you have to activate the module in your WHMCS system.

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

CAD 5.png
6. In the next step you need to permit access to this module.

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

CAD 6.png
7. You have just successfully installed Client Area Designer For WHMCS!

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

CAD 7.png

Configuration and Management

Client Area Designer For WHMCS is a module which allows you to adjust the layout of any panels available on your client area as well as add new widgets sections.

Configuration

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.

Panels

Under 'Panels' tab you will find three sections dedicated to the visibility of different types of panels in your client area.
  • Navbars - Manage positions available on the navigation bar in your client area. Additionally, define requirements for element to be shown.
  • Sidebars - Manage panels available on the left sidebar in your client area. Additionally, define requirements for panels to be shown or modify output of the default panels.
  • Homepage Widgets - Homepage Widgets can be viewed and modified here.

Navbars

On the first sight you will see two tables, each related to Primary Navbar Left or Right side.

There are already all the predefined sections outlined with their official names and positions.

CAD 8.png
Those are the below navbar panels visible in the client area.
CAD 9.png
Use action buttons to:
  • edit the section
  • delete (only custom elements)
  • view child elements
CAD 9.png
Edit Element
When you are editing an existing parent element, you may:
  • provide a new display name
  • change URI - location it is placed in
  • add icon
  • hide the element
CAD 10.png
You may also provide some display rules, only clients who fulfill the rules will see the element.

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

  • select domains a client must own
  • point product that must be owned
  • location a client must enter

Do not forget to save the changes when ready.

CAD 10.png
New Parent Elements
You may add a completely new parent element either on left or right side.
Press 'Add'.
CAD 10.png
Then you will have to fill out all the general info, content and display rules.

Start with 'General'. Provide:

  • name visible for clients
  • unique for the system identifier
  • URI
  • select icon from available
  • finally select 'Display' to make the panel visible
CAD 10.png
If you want only some of the clients to see the panel, then set up the 'Display Rules'.

Save the changes in the end.

CAD 10.png
This is how our new panel looks like in the client area:
CAD 10.png
New Child Elements
Let's now add one child element to the just created 'Test Panel'.
CAD 10.png
You have to fill out the same data as in case of parent element:
  • name
  • identifier
  • URI
  • icon
  • finally select 'Display' to make the panel visible
CAD 10.png
If you want only some of the clients to see the panel, then set up the 'Display Rules'.

Save the changes in the end.

CAD 10.png
This is how our new panel looks like in the client area:
CAD 10.png

Sidebars

The next part of creating a pop-up process concerns its interface, layout and general design.
  • Size

Auto - it automatically adjusts to the content.
Custom - if you want a customized size, then simply enter appropriate width and height.

  • Style

Select style from the list of available and previously defined styles.

CAD 11.png
  • Type

The pop-up may have a simple text form - select 'Text' and then format the text.
See the visualization here.

CAD 12.png
Provide ready code snippet that you want to insert into the pop-up content.

See the visualization here.

CAD 13.png
Upload an 'Image'.

See the visualization here.

CAD 14.png

Homepage Widgets

Restrictions - this is the place where a pop-up is conditioned. Please set up the rules according to which the pop-up will be displayed to clients.
Only clients who meet all the restriction rules will see the pop-up.
General options:
  • Display Frequency - define how often the pop-up will be displayed to a client, you may also make it visible all the time.
  • Hide - if selected, clients will be allowed to close the pop-up permanently, even if it was configured to appear repeatedly.
  • Non-logged In Users - if selected, the pop-up will be displayed to all guests and unlogged visitors.
  • Pages - provide here specific wildcards URL of sites where the pop-up should be available from. Use comma to separate them if you plan to add more than one page.
    e.g.: '*action=invoices, *action=quotes' etc.

Conditions:
Press required text area and available options will appear.

  • Languages - select languages, the pop-up will be displayed only to clients who use any of the selected here languages.
  • User Groups - point groups, only clients in these groups will see the pop-up.
  • Has Active Product - select products that must be active.
  • Has Active Product In Group - select groups of products that a client has active products in.
    Note: At least one product in group is required.
  • Has Active TLDs - point TLDs that must be active for the client.
  • Has Active Product With Server - select servers on which client must have an active product.

If any of the above options is left blank, it will not be taken into consideration when creating a final list of clients to see the pop-up.

CAD 15.png
You will also find there an explanation of the checking process:
CAD 16.png

Locations

Any known location found in your client area is listed here, these are used to define display rules of navbar and sidebar elements as well as homepage widgets.
CAD 17.png
Press button with pencil icon next to location you are interested in to edit it.
CAD 18.png
There you can edit the name of existing location and its URI.
CAD 18.png

New Location

You may also add new locations, press 'Add New' button to begin.
CAD 18.png
Provide location name and URI.
CAD 18.png

Scanner

The first and main section of the module is called 'Pop-ups'.

You will find there all the most important information on existing pop-ups together with any possible action that can be taken on them.
Go through the following section to learn more.

CAD 19.png

Documentation

The last position in your navigation menu, when pressed, redirects to the article you are currently reading.
CAD 27.png

Visualizations

Now, let's take a look what Client Area Designer For WHMCS may give you in practice.
Underneath, you will find several examples of pup-ups, each in a different style and of a different type.
Type: 'Text'
Style: 'left_up'
CAD 28.png
Type: 'Text'
Style: 'center_overlay'

'Overlay' means there is a gray background behind the pop-up text or image.

CAD 29.png
Type: 'Image',
Style: 'center'
CAD 30.png
Type: 'Image',
Style: 'right_overlay_up'
CAD 31.png

Tips

1. For your comfort, 'HTML' type of pop-up content supports also 'JavaScript' to let you provide your preferable content.

Common Problems

1. When you have problems with connection, check whether your SELinux or firewall does not block ports.
Retrieved from "https://www.docs.modulesgarden.com/index.php?title=Client_Area_Designer_For_WHMCS&oldid=28137"
Navigation
WHMCS Modules
WHMCS Widgets
Translations
cPanel Modules
General
FAQ
Community
Client Area Designer For WHMCS