Jump to content

Add HTML code to the WHMCS client area pages via hooks

WHMCS Danny
 Share

Recommended Posts

  • WHMCS Technical Analyst
WHMCS Danny Junior Member

WHMCS Danny

Posted
  • WHMCS Technical Analyst
Posted

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:

  1. If you want to add HTML code to be placed in the <head> section of the page your would use the ClientAreaHeadOutput hook.
  2. If you want  to add HTML code to be placed in the <body> section of the page you would use the ClientAreaHeaderOutput  hook.
  3. 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

5
Link to comment
Share on other sites
  • WHMCS John featured this topic
  • 1 year later...
  • 11 months later...
  • WHMCS Technical Analyst
WHMCS Danny Junior Member

WHMCS Danny

Posted
  • Author
  • WHMCS Technical Analyst
Posted
On 1/03/2024 at 11:44 AM, Asheville Web Hosting said:

Hello! If I wanted to limit the execution of the code show that it was only displayed for logged in clients, is there a way to do that? Thanks in advance!

@Asheville Web Hosting To show code only to logged-in users in WHMCS, you can leverage the built-in "{if isloggedin}" tag within your WHMCS template files, checking if a user is authenticated before displaying the code using PHP conditional statements like "if" and "else".

If you want to check in the hook file, you would need to use custom PHP logic and possibly the Capsule feature to access the database.
You will have to do some testing with the custom hook file on exactly what you are trying to accomplish. If you need help provide the custom hook code you are using so I may check from my end and please provide the WHMCS version you are using as well.

@AndyW

On 26/02/2024 at 4:46 AM, AndyW said:

I tried the sample code here. It don't work on version 8.8. Wondering if there is any updated code that works?

What is not working in WHMCS 8.8? Using this method to add HTML/JS to the client area using the Output hook points listed on this Index:
https://developers.whmcs.com/hooks/hook-index/

Please provide the hook file code you are having issues with and what is not working exactly with the version of WHMCS you are using.
if you inspect the client area page, you should see the custom HTML or JS code you add depending on where the page you are adding it to (head, body or footer).

0
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use & Guidelines and understand your posts will initially be pre-moderated

  I accept