{"id":4831,"date":"2020-10-16T19:00:20","date_gmt":"2020-10-16T17:00:20","guid":{"rendered":"https:\/\/ekiwi.de\/index.php\/4831\/include-cookie-notice-in-website-html-editor-and-magix-webdesigner\/"},"modified":"2023-01-14T22:28:35","modified_gmt":"2023-01-14T21:28:35","slug":"include-cookie-notice-in-website-html-editor-and-magix-webdesigner","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/en\/index.php\/4831\/include-cookie-notice-in-website-html-editor-and-magix-webdesigner\/","title":{"rendered":"Include cookie notice in website &#8211; HTML Editor and Magix Webdesigner"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of content<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ekiwi.de\/en\/index.php\/4831\/include-cookie-notice-in-website-html-editor-and-magix-webdesigner\/#Download_script_and_example\" >Download script and example<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ekiwi.de\/en\/index.php\/4831\/include-cookie-notice-in-website-html-editor-and-magix-webdesigner\/#Upload_the_script\" >Upload the script<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ekiwi.de\/en\/index.php\/4831\/include-cookie-notice-in-website-html-editor-and-magix-webdesigner\/#Customise_the_code_and_embed\" >Customise the code and embed<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ekiwi.de\/en\/index.php\/4831\/include-cookie-notice-in-website-html-editor-and-magix-webdesigner\/#Integration_in_Magix_Webdesigner\" >Integration in Magix Webdesigner<\/a><\/li><\/ul><\/nav><\/div>\n<p>How do I create a cookie notice for my website?<\/p>\n<p><!--more--><\/p>\n<p>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.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/pwIjWBF0_8w\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>In this tutorial we want to include a cookie hint, which will show us a configurable hint at the end of the web page.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1147\" src=\"\/wp-content\/uploads\/2020\/10\/cookie_1.jpg\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" srcset=\"\/wp-content\/uploads\/2020\/10\/cookie_1.jpg 750w, \/wp-content\/uploads\/2020\/10\/cookie_1-300x134.jpg 300w\" alt=\"\" width=\"750\" height=\"334\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Download_script_and_example\"><\/span>Download script and example<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>We use free cookie <a href=\"https:\/\/www.osano.com\/cookieconsent\" target=\"_blank\" rel=\"noopener noreferrer\">consent script from Osano<\/a> in our example. The sample script can be downloaded here:<\/p>\n<p><a href=\"\/wp-content\/uploads\/2020\/10\/cookieconsent.zip\">Download<\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Upload_the_script\"><\/span>Upload the script<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>After the download, we unzip the folder. There we find the sample files and the script and CSS files in the folder \u201ecookieconsent\u201c. We upload this folder to our web space via FTP.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1163\" src=\"\/wp-content\/uploads\/2020\/10\/cookie_consent_zip.png\" alt=\"\" width=\"295\" height=\"154\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1149\" src=\"\/wp-content\/uploads\/2020\/10\/cookie_3.jpg\" alt=\"\" width=\"300\" height=\"276\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Customise_the_code_and_embed\"><\/span>Customise the code and embed<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>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.<\/p>\n<pre>&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"\/\/assets.ekiwi.com\/cookie\/cookieconsent.min.css\" \/&gt;\r\n&lt;script src=\"\/\/assets.ekiwi.de\/cookie\/cookieconsent.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script&gt;\r\n    window.addEventListener(\"load\", function(){\r\n        window.cookieconsent.initialise({\r\n            \"palette\": {\r\n                \"popup\": {\r\n                    \"background\": \"#edeff5\",\r\n                    \"text\": \"#838391\"\r\n                },\r\n                \"button\": {\r\n                    \"background\": \"#4b81e8\"\r\n                }\r\n            },\r\n            \"theme\": \"edgeless\",\r\n            \"content\": {\r\n                \"message\": \"We use cookies on the website to make your visit more efficient and to provide you with user experience.\",\r\n                \"dismiss\": \"OK\",\r\n                \"link\": \"information\",\r\n                \"href\": \"https:\/\/ekiwi.de\/datenschutzerklaerung.htm\"\r\n            }\r\n        })});\r\n&lt;\/script&gt;<\/pre>\n<p>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.<\/p>\n<p>Now we paste the code into the head area of the web page:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1154\" src=\"\/wp-content\/uploads\/2020\/10\/cookie_code.jpg\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" srcset=\"\/wp-content\/uploads\/2020\/10\/cookie_code.jpg 600w, \/wp-content\/uploads\/2020\/10\/cookie_code-300x266.jpg 300w\" alt=\"\" width=\"600\" height=\"532\" \/><\/p>\n<p>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.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Integration_in_Magix_Webdesigner\"><\/span>Integration in Magix Webdesigner<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>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:<\/p>\n<pre>&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/ekiwi.de\/cookieconsent\/cookieconsent.min.css\" \/&gt;\r\n&lt;script src=\"https:\/\/ekiwi.de\/cookieconsent\/cookieconsent.min.js\"&gt;\r\n&lt;script&gt;\r\n    setTimeout(function(){\r\n        window.cookieconsent.initialise({\r\n            \"palette\": {\r\n                \"popup\": {\r\n                    \"background\": \"#edeff5\",\r\n                    \"text\": \"#838391\"\r\n                },\r\n                \"button\": {\r\n                    \"background\": \"#4b81e8\"\r\n                }\r\n            },\r\n            \"theme\": \"edgeless\",\r\n            \"content\": {\r\n                \"message\": \"We use cookies on the website to make your visit more efficient and to provide you with user experience.\",\r\n                \"dismiss\": \"OK\",\r\n                \"link\": \"information\",\r\n                \"href\": \"https:\/\/ekiwi.de\/datenschutzerklaerung.htm\"\r\n            }\r\n        })}, 2000);\r\n&lt;\/script&gt;<\/pre>\n<p>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.<\/p>\n<p>Now we go to \u201eTools\u201c and \u201eWeb properties\u201c.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1150\" src=\"\/wp-content\/uploads\/2020\/10\/cookie_4.jpg\" sizes=\"auto, (max-width: 344px) 100vw, 344px\" srcset=\"\/wp-content\/uploads\/2020\/10\/cookie_4.jpg 344w, \/wp-content\/uploads\/2020\/10\/cookie_4-300x244.jpg 300w\" alt=\"\" width=\"344\" height=\"280\" \/><\/p>\n<p>Here, under \u201eWebsite\u201c \u2013 \u201eHTML code (body)\u201c we can insert the code.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1160\" src=\"\/wp-content\/uploads\/2020\/10\/cookie_magix_code_body.jpg\" sizes=\"auto, (max-width: 740px) 100vw, 740px\" srcset=\"\/wp-content\/uploads\/2020\/10\/cookie_magix_code_body.jpg 740w, \/wp-content\/uploads\/2020\/10\/cookie_magix_code_body-300x234.jpg 300w\" alt=\"\" width=\"740\" height=\"576\" \/><\/p>\n<p>When exported, the code is now inserted into each page and appears when the web page is called up.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1152\" src=\"\/wp-content\/uploads\/2020\/10\/cookie_6.jpg\" sizes=\"auto, (max-width: 827px) 100vw, 827px\" srcset=\"\/wp-content\/uploads\/2020\/10\/cookie_6.jpg 827w, \/wp-content\/uploads\/2020\/10\/cookie_6-300x41.jpg 300w, \/wp-content\/uploads\/2020\/10\/cookie_6-768x104.jpg 768w\" alt=\"\" width=\"827\" height=\"112\" \/><\/p>","protected":false},"excerpt":{"rendered":"<p>How do I create a cookie notice for my website?<\/p>\n","protected":false},"author":1,"featured_media":403,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[879],"tags":[],"class_list":["post-4831","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-and-css"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/posts\/4831","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/comments?post=4831"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/posts\/4831\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/media\/403"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/media?parent=4831"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/categories?post=4831"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/tags?post=4831"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}