Changing the order of action buttons
As of CookieHub version 2.3.4, you can now control the ordering of the action buttons in both the initial dialog and the settings dialog. This feature is not available in the CookieHub dashboard yet but can be done by changing the CookieHub integration code as described below:
Initial cookie consent dialog
By default, the order of buttons in the initial cookie consent dialog is:
- Allow all cookies
- Deny all
- Cookie settings
To change the order you will need insert a property to the cpm object containing an array with the requested order of buttons. Note that if this property is added, the current action button settings from the User interface tab in the CookieHub dashboard are ignored.
<script type="text/javascript"> var cpm = { dialog: { actions: ['allow','deny','settings'] } }; (function(h,u,b){ var d=h.getElementsByTagName("script")[0],e=h.createElement("script"); e.async=true;e.src='https://cookiehub.net/c2/xxxxxxxx.js'; e.onload=function(){u.cookiehub.load(b);} d.parentNode.insertBefore(e,d); })(document,window,cpm); </script><br>
Possible values in the array are:
- allow = Allow all button
- deny = Deny all button
- settings = Settings button
Additionally, you can add another variable to the dialog object to render all buttons in the same parent object, (simplifyMarkup: true). By default, CookieHub will create a separate containing object for the third button when all buttons are enabled. The reason is that CookieHub offers multiple themes but share the same html, and in some cases the third button has to be placed below the other two buttons.
Below you can see a complete example with the simplifyMarkup option enabled (all buttons will be located in the same container):
<script type="text/javascript"> var cpm = { dialog: { actions: ['allow','deny','settings'], simplifyMarkup: true } }; (function(h,u,b){ var d=h.getElementsByTagName("script")[0],e=h.createElement("script"); e.async=true;e.src='https://cookiehub.net/c2/xxxxxxxx.js'; e.onload=function(){u.cookiehub.load(b);} d.parentNode.insertBefore(e,d); })(document,window,cpm); </script><br>
Samples
To reverse the order, the actions value should be:
['settings','deny','allow']
To show only the allow all and deny all buttons in reverse order, the actions value should be:
['deny','allow']
Cookie settings dialog
By default, the order of buttons in the settings dialog is:
- Allow all cookies
- Deny all
To change the order you will need insert a property to the cpm object containing an array with the requested order of buttons.
<script type="text/javascript"> var cpm = { settings: { actions: ['allow','deny'] } }; (function(h,u,b){ var d=h.getElementsByTagName("script")[0],e=h.createElement("script"); e.async=true;e.src='https://cookiehub.net/c2/xxxxxxxx.js'; e.onload=function(){u.cookiehub.load(b);} d.parentNode.insertBefore(e,d); })(document,window,cpm); </script><br>
Possible values in the array are:
- allow = Allow all button
- deny = Deny all button
Samples
To reverse the order, the actions value should be:
['deny','allow']
To show only the allow all button, the actions value should be:
['allow']