Jump to content

Adding Cookie Consent Banner to WHMCS

WHMCS Anwar
 Share

Recommended Posts

  • WHMCS Technical Analyst
WHMCS Anwar Member

WHMCS Anwar

Posted
  • WHMCS Technical Analyst
Posted

WHMCS uses cookies to maintain session state and store small amounts of data on visitors’ computers or devices.  For detailed information how cookies are used within WHMCS, visit https://docs.whmcs.com/Cookies

Besides these, you may also be using cookies for tracking and analytics, such as Google Analytics, etc.

Learn below how to use an action-hook to create your own cookie consent banner, using either your favourite cookie consent platform, or custom code.

Below we'll explain how you can implement your own cookie consent banner, using either your favourite cookie consent platform, or custom code.

Action Hook

In this example, we will use the ClientAreaFooterOutput hook point, but you can also use the ClientAreaHeaderOutput hook point, depending on your preference.  

<?php

# Cookie Banner Hook.
# Customise as needed, and place in your WHMCS's /includes/hooks folder.

if (!defined("WHMCS"))
    die("This file cannot be accessed directly");

function cookie_banner_hook($vars) {
return <<<HTML
<!-- Begin Cookie Consent --> 


<!-- End Cookie Consent --> 
HTML;
}
add_hook("ClientAreaFooterOutput", 1, "cookie_banner_hook");

If you have your own custom cookie consent code, you would simply place it between the markers.  However, for those who are starting for scratch, below are two examples for your ease.

1. Example: GlowCookies JavaScript Cookie Consent Banner

GlowCookies is an open source project available at GitHub, which has been used as an example here.  It offers a simple yet powerful means to implement the cookie consent banner.

It is highly customisable, and below is an implementation of this, within our action-hook.  You will notice that, all the required parameters can easily be adjusted within the code itself. 

<?php

# Cookie Banner Hook.
# Customise as needed, and place in your WHMCS's /includes/hooks folder.

if (!defined("WHMCS"))
    die("This file cannot be accessed directly");

function cookie_banner_hook($vars) {
return <<<HTML
<!-- Begin Cookie Consent --> 

<script src="https://cdn.jsdelivr.net/gh/manucaralmo/GlowCookies@3.1.8/src/glowCookies.min.js"></script>
<script>
    glowCookies.start('en', {
        style: 1,
        analytics: 'G-AA00000000',
        facebookPixel: '011223344556677',
        customscript: [{ type: 'custom', position: 'body', content: `console.log('custom script');` }],
        customscript: [{ type: 'src', position: 'head', content: 'https://www.googletagmanager.com/gtag/js?id=G-BB00000000' }],
        hideAfterClick: false,
        border: 'none',
        position: 'left',
        policyLink: 'https://link-to-your-cookie-policies.com',
        bannerDescription: 'This site uses cookies to provide necessary website functionality, and optionally, to improve your experience and analyze our traffic.',
        bannerLinkText: 'Read more about cookies',
        bannerBackground: '#c5c5c5',
        bannerColor: '#darkgray',
        bannerHeading: '<h5>We use cookies</h5>',
        acceptBtnText: 'Accept All',
        acceptBtnColor: 'white',
        acceptBtnBackground: 'black',
        rejectBtnText: 'Essential Only',
        rejectBtnBackground: 'eee',
        rejectBtnColor: 'black',
        manageColor: 'black',
        manageBackground: 'lightgray',
        manageText: 'Manage Cookies'
    });
</script>

<!-- End Cookie Consent --> 
HTML;
}
add_hook("ClientAreaFooterOutput", 1, "cookie_banner_hook");

You can learn more about customizing and/or configuring GlowCookies parameters by visiting their documentation and codebase at  https://github.com/manucaralmo/GlowCookies

In order to implement this cookie consent banner, place this action hook in the WHMCS /includes/hooks folder.

glowcookies01.png.519dd0bb581f1e087f15090c6db5bdef.png

2. Example: TempsFeed JavaScript Cookie Consent Banner

However, you may also consider using the code from your favourite cookie consent builder platform, such as TempsFeed, etc.

termsfeed01.jpg.b171b088a54e8af8e588972c83d98473.jpg

With the wizard interface, you can configure and fine-tune the settings to suit your needs, and then generate the cookie consent code, to be used in our action hook, as before: 

<?php

# Cookie Banner Hook.
# Customise as needed, and place in your WHMCS's /includes/hooks folder.

if (!defined("WHMCS"))
    die("This file cannot be accessed directly");

function cookie_banner_hook($vars) {
return <<<HTML
<!-- Begin Cookie Consent --> 

<!-- Cookie Consent by TermsFeed https://www.TermsFeed.com -->
<script type="text/javascript" src="//www.termsfeed.com/public/cookie-consent/4.1.0/cookie-consent.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
document.addEventListener('DOMContentLoaded', function () {
cookieconsent.run({"notice_banner_type":"simple","consent_type":"express","palette":"dark","language":"en","page_load_consent_levels":["strictly-necessary"],"notice_banner_reject_button_hide":false,"preferences_center_close_button_hide":false,"page_refresh_confirmation_buttons":false});
});
</script>

<script type="text/plain" data-cookie-consent="strictly-necessary">
<!-- Strictly Necessary Cookie Script Example -->
</script>
<script type="text/plain" data-cookie-consent="functionality">
<!-- Functional Cookie Script Example -->
</script>
<script type="text/plain" data-cookie-consent="tracking">
<!-- Tracking Cookie Script Example -->
</script>
<script type="text/plain" data-cookie-consent="targeting">
<!-- Targetting Cookie Script Example -->
</script>

<noscript>Free cookie consent management tool by <a href="https://www.termsfeed.com/">TermsFeed</a></noscript>
<!-- End Cookie Consent by TermsFeed https://www.TermsFeed.com -->

<!-- Below is the link that users can use to open Preferences Center to change their preferences. Do not modify the ID parameter. Place it where appropriate, style it as needed. -->

<a href="#" id="open_preferences_center">Update cookies preferences</a>

<!-- End Cookie Consent --> 
HTML;
}
add_hook("ClientAreaFooterOutput", 1, "cookie_banner_hook");

You can learn more about generating your TermsFeed cookie consent banner code, by visiting their website at https://www.termsfeed.com/cookie-consent/

As before, this action hook should be placed in the WHMCS /includes/hooks folder for the cookie consent banner to display.

termsfeed02.jpg.8fc9d415fa43b16328ea4dec1e4a836d.jpg

Please note:

  1. The method, format, or mode of delivery of the cookie consent, described in this article are merely code examples, and the information contained within, should by no means be construed as legal advice.  You or your organisation will need to comply with new cookie warning laws that apply to your site and regulations concerning their use.
  2. Information regarding cookies used by WHMCS can be found at https://docs.whmcs.com/Cookies
  3. We are not affiliated with TermsFeed, nor GlowCookies, and have simply used these as examples, describing how to implement third-party cookie consent code (such as theirs) in an action hook in WHMCS.

Further Reading

 

1
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

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • 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