Include cookie notice in website – HTML Editor and Magix Webdesigner

How do I create a cookie notice for my website?

Cookie notices are the plague, on every website you get annoyed with them. There are even browser plugins that automatically hide cookie notices. As a website owner, you are somewhat caught between two fronts and would be well advised to include a notice.

In this tutorial we want to include a cookie hint, which will show us a configurable hint at the end of the web page.

Download script and example

We use free cookie consent script from Osano in our example. The sample script can be downloaded here:

Download

Upload the script

After the download, we unzip the folder. There we find the sample files and the script and CSS files in the folder „cookieconsent“. We upload this folder to our web space via FTP.

Customise the code and embed

Now we need to customise the code and embed it in the head section of our website, either with an editor or on WordPress it also works very well with a plugin.

<link rel="stylesheet" type="text/css" href="//assets.ekiwi.com/cookie/cookieconsent.min.css" />
<script src="//assets.ekiwi.de/cookie/cookieconsent.min.js"></script>
<script>
    window.addEventListener("load", function(){
        window.cookieconsent.initialise({
            "palette": {
                "popup": {
                    "background": "#edeff5",
                    "text": "#838391"
                },
                "button": {
                    "background": "#4b81e8"
                }
            },
            "theme": "edgeless",
            "content": {
                "message": "We use cookies on the website to make your visit more efficient and to provide you with user experience.",
                "dismiss": "OK",
                "link": "information",
                "href": "https://ekiwi.de/datenschutzerklaerung.htm"
            }
        })});
</script>

Customise the links at the top according to your website. Then you can set the colours and finally follow the texts and links which should appear.

Now we paste the code into the head area of the web page:

Done! The cookie message will then appear. Note: once the message is confirmed, it will not appear again for the time being. You can delete the browser cookies to make the message reappear or use private mode.

Integration in Magix Webdesigner

The cookie notice can also be integrated into software such as Magix Webdesigner. Carry out the upload as described above. Then adapt the code and integrate it into the website. The code is slightly different, however, because Magix in the standard version us no insertion in the head area, this can only expensive premium variant. The code:

<link rel="stylesheet" type="text/css" href="https://ekiwi.de/cookieconsent/cookieconsent.min.css" />
<script src="https://ekiwi.de/cookieconsent/cookieconsent.min.js">
<script>
    setTimeout(function(){
        window.cookieconsent.initialise({
            "palette": {
                "popup": {
                    "background": "#edeff5",
                    "text": "#838391"
                },
                "button": {
                    "background": "#4b81e8"
                }
            },
            "theme": "edgeless",
            "content": {
                "message": "We use cookies on the website to make your visit more efficient and to provide you with user experience.",
                "dismiss": "OK",
                "link": "information",
                "href": "https://ekiwi.de/datenschutzerklaerung.htm"
            }
        })}, 2000);
</script>

The code looks similar, the same adjustments need to be made here. In contrast to the other code, the cook window is shown time-controlled. Here after 2 seconds (2000). If necessary, you can also adjust the value.

Now we go to „Tools“ and „Web properties“.

Here, under „Website“ – „HTML code (body)“ we can insert the code.

When exported, the code is now inserted into each page and appears when the web page is called up.