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...

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