Hi Friends,
I have found some users that may need to add certain HTML code for many different reasons to the client area of WHMCS. This could be for tracking code, Google tag manager or a custom Live chat addon that you need to ensure their custom HTML code is added to a certain section on the page via HTML or JS code per the instructions of what you are adding to the client area pages.
The best way to achieve this would to use a custom hook. Depending on where you need to place your HTML code on the page, you would use one of the below hooks:
If you want to add HTML code to be placed in the <head> section of the page your would use the ClientAreaHeadOutput hook.
If you want to add HTML code to be placed in the <body> section of the page you would use the ClientAreaHeaderOutput hook.
If you want to add HTML code to be placed in the <footer> section of the page you would use the ClientAreaFooterOutput hook
This assumes you are already familiar with creating hooks. For further information to learn how to create hooks please review the following developers documentation: https://developers.whmcs.com/hooks/getting-started/
Once your hook is saved under your /includes/hooks/ directory in your WHMCS installation, you can use the use your browsers developer tools to Inspect the client area pages to check that your code has be inserted where it needs to be placed or where you wanted it to be placed on the page. Instructions: I have provided example snippets below for creating a hook for each section to add HTML code to the client area pages for the <head>, <body> or <footer> sections of the client area pages after the PHP has been rendered.
All you will need to do is insert your HTML code in between the <!-- Start insert code here --> and <!-- End insert code here --> comments in the below examples.
ClientAreaHeadOutput Hook Example: The code you place in between the comments referenced above will add your HTML code to the <head> section of every client area page:
<?php
/**
* The code below will be added in the <head> section
* @author WHMCS Danny
*/
add_hook('ClientAreaHeadOutput', 1, function($vars) {
return <<<HTML
<!-- Start insert code here -->
<!-- End insert code here -->
HTML;
});
Source: https://developers.whmcs.com/hooks-reference/output/#clientareaheadoutput ClientAreaHeaderOutput Hook Example: The code you place in between the comments referenced above will add your HTML code to the <body> section of every client area page:
<?php
/**
* The code below will be added in the <body> tag section
* @author WHMCS Danny
*/
add_hook('ClientAreaHeaderOutput', 1, function($vars) {
return <<<HTML
<!-- Start insert code here -->
<!-- End insert code here -->
HTML;
});
Source: https://developers.whmcs.com/hooks-reference/output/#clientareaheaderoutput ClientAreaFooterOutput Hook Example: The code you place in between the comments referenced above will add your HTML code to the <footer> section of every client area page:
<?
/**
* The code below will be added to the <footer> tag section
* @author WHMCS Danny
*/
add_hook('ClientAreaFooterOutput', 1, function($vars) {
return <<<HTML
<!-- Start insert code here -->
<!-- End insert code here -->
HTML;
});
Source: https://developers.whmcs.com/hooks-reference/output/#clientareafooteroutput
I hope this information helps anyone who is looking on how to add HTML/JS code to your WHMCS client area, such as, a tracking code, Google tag manager or a custom Live Chat addon etc.
Best Regards,
- WHMCS Danny