Customizations

How to add an "Accept cookies" alert to the log-in page

To meet any related legal requirements, you can add an "Accept cookies" alert on your eFront log-in page by adding a JavaScript code snippet through the eFront Site builder.

Here's how:

Note: For more on customizing your eFront portal and adding your own JavaScript code, see this article.

Sign in to your eFront account as Administrator. Go to Home > Themes (1).

Click the edit symbol (2) on a block. We recommend using the Features block. If you don't see it on the Site builder page, click Insert block on a column and add it.

coo12.png

On the Features block Content editor, click the code symbol (</>) to change to HTML Code view mode (3).

In the Code view text area (4), paste the following code:

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
  "palette": {
    "popup": {
      "background": "#000"
    },
    "button": {
      "background": "#f1d600"
    }
  }
})});
</script>

Click Update (5) to save your changes.

cook345.pngOn the Site builder page, click Push live (6) to complete the process.

coo6.png

Your "Accept cookies" alert is now activated. The size and content of the alert are set according to EU standards and requirements.

cooZ.png

Customize your alert

The alert you've just added to your log-in page displays a standard default message.

To be able to customize that text, use the following JavaScript code instead:

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
  "palette": {
    "popup": {
      "background": "#000"
    },
    "button": {
      "background": "#f1d600"
    },
  },
  content: {
  header: 'Cookiessss used on the website!',
  message: 'This website uses cookies to ensure you get the best experience on our website.',
  dismiss: 'Got it!',
  allow: 'Allow cookies',
  deny: 'Decline',
  link: 'Learn more',
  href: 'http://google.com',
  close: '&#x274c;',
}
})});
</script>

On the above code block, you can now change all text (and links) below the "content: {" line that is wrapped inside single inverted commas ('[text/link]').

Related articles