Personal tools
Namespaces

Variants
Actions

Client Area Designer For WHMCS

From ModulesGarden Wiki
(Difference between revisions)
Jump to: navigation, search
(New Child Element)
(Sidebar Panels)
Line 315: Line 315:
 
|}
 
|}
 
{|
 
{|
|style="padding: 0px 0px 20px 25px;"|[[File:CAD_23.png]]
+
|style="padding: 0px 0px 20px 25px;"|[[File:CAD_24.png]]
 
|}
 
|}
 
{|
 
{|
Line 325: Line 325:
 
|}
 
|}
 
{|
 
{|
|style="padding: 0px 0px 20px 25px;"|[[File:CAD_24.png]]
+
|style="padding: 0px 0px 20px 25px;"|[[File:CAD_23.png]]
 
|}
 
|}
  

Revision as of 08:57, 21 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.

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
First of all, you may change the position of the elements.

Drag one panel and drop it in the required place.

CAD 10.png
Use action buttons to:
  • edit the section
  • delete (only custom elements)
  • view child elements
CAD 11.png

Edit Element

When you are editing an existing parent element, you may:
  • provide a new display name
  • add icon
  • hide the element
CAD 12.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 13.png

New Parent Elements

It is possible add a completely new parent element either on left or right side.
Press 'Add'.
CAD 14.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 15.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 16.png
This is how our new panel looks like in the client area:
CAD 17.png

New Child Element

Let's now add two child elements to the existing 'Support' panel.
CAD 18.png
You have to fill out the same data as in case of parent element:
  • name
  • identifier
  • URI
  • icon
  • finally select 'Display' to make it visible

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

CAD 19.png
As Sidebar element, you may delete it completely or edit.
CAD 20.png
This is how our new panel looks like in the client area:
CAD 21.png

Sidebar Panels

Sidebar panels section refer to the elements located on the left side of your client area.

Generally, management of sidebars is very similar to Navbar panels described in the previous section.
On the first sight, you will find there sidebar elements divided into top and Bottom part.

CAD 24.png
Available actions:
  • change positioning by dragging and dropping the element in required place
  • edit the section - change name, icon, URI, content (if possible) and display rules
  • delete elements - except main ' Client Details' and 'client Contacts'
  • view child elements
CAD 23.png

Edit Element

General - this part is the same as in Navbars
  • provide a new display name
  • change URI - location it is placed in
  • add icon
  • hide the element
CAD 25.png
Content
  • change the Body or Footer content.

Note that it is possible only if the element has no child elements.

CAD 26.png
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. Do not forget to save the changes when ready.

CAD 27.png

New Parent Elements

You may add a completely new parent element either on left or right side.
Press 'Add'.
CAD 28.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
  • select icon from available
  • finally select 'Display' to make the panel visible
CAD 29.png
Define Body and Footer content.

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

CAD 30.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 31.png
This is how our new panel looks like in the client area:
CAD 32.png

New Child Element

Let's now add one child element to the just created 'Test Panel'.
CAD 33.png
You have to fill out the same data as in case of parent element:
  • name
  • identifier
  • URI
  • icon
  • finally select 'Display' to make it visible
CAD 34.png
Again, you can set up the 'Display Rules'.

Save the changes.

CAD 35.png
As it is a custom element, you may delete it completely or edit.
CAD 36.png
This is how our new panel looks like in the client area:
CAD 37.png

Homepage Widgets

The last type of panels are homepage widgets.
CAD 38.png
these are these widgets in your client area:
CAD 39.png
Available actions:
  • change positioning by dragging and dropping the element in required place
  • edit the widget - change name, icon, URI, content (if possible) and display rules
  • view child elements if there are any
  • you cannot delete any of predefined WHMCS widgets, that is why the icon is unavailable
CAD 40.png

Edit widget

General - this part is the same as in Navbars
  • provide a new display name
  • change URI - location it is placed in
  • change icon
  • hide the element
CAD 41.png
Content
  • change the Body or Footer content.

Note that it is possible only if the element has no child elements.

CAD 42.png
Extras - here you can change the visual parts:
  • widget color
  • button name, URI and icon
CAD 43.png

Add New Widget

To create a new widget, simply press 'Add' button.
CAD 44.png
Then you will have to fill out all the general info, content and extras.

Start with 'General', provide:

  • widget name
  • unique for the system identifier
  • select icon from available
  • finally select 'Display' to make the panel visible
CAD 45.png
Provide HTML content or leave empty if you plan to add some child links.
CAD 46.png
Finally, customize your widget by defining color and button details.

Save the changes in the end.

CAD 47.png
This is how our new widget looks like in the client area:
CAD 48.png

New Child Widget

Let's now add one child element to the just created 'Test Panel'.
CAD 49.png
You have to fill out the same data as in case of parent element:
  • name
  • identifier
  • URI
  • icon
  • finally select 'Display' to make it visible
CAD 50.png
Again, you can set up the 'Display Rules'.

Save the changes.

CAD 51.png
As it is a custom element, you may delete it completely or edit.
CAD 52.png
This is how our new panel looks like in the client area:
CAD 53.png

Locations

In this you will find an extended list of all standard locations in your client area with its common name and URI.

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

CAD 54.png
Press button with pencil icon next to location you are interested in to edit it.
CAD 55.png
There you can edit the name of existing location and its URI.
CAD 56.png

New Location

You may also add new if you have some custom locations and you wish to use them in our module.

Please note that your locations must be manageable by WHMCS.

CAD 57.png
Provide location name and URI.

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

CAD 58.png

Scanner

Scanner is a tool that allows our module to carefully browse through a chosen client's client area in search of any custom elements in known locations.

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

CAD 59.png
You will see a preview of all locations. When the scan is finished, you will see a summary with the number of found panels.
CAD 60.png

Documentation

The last position in your navigation menu, when pressed, redirects to the article you are currently reading.
File:CAD 61.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. Langi tutaj??

Common Problems

1. When you have problems with connection, check whether your SELinux or firewall does not block ports.
Navigation
WHMCS Modules
WHMCS Widgets
Translations
cPanel Modules
General
FAQ
Community
Client Area Designer For WHMCS