Plain HTML Cookie Acceptor

cookie_notice.html

<!-- Plain template from https://github.com/zauberware/acceptcookies -->
<div id='js_cookieNotice' class='cookieNotice'>
    <div class='cookieNotice__container'>
        <p>We use cookies to personalize content and ads, to offer features for social media and to analyze the access to our website. We also share information about your use of our website with our social media, weaving and analytics partners. Our partners may combine this information with other information that you have provided to them or that they have collected as part of your use of the Services. You accept our cookies when you click "Allow cookies" and continue to use this website.</p>
        <a id='js_cookieNotice_accept' href='#'>Allow cookies</a>
        <a id='js_cookieNotice_refuse' href='#'>Refuse</a> 
        <a href='/privacy-policy'>Privacy Policy</a> 
    </div>
</div>

<style type='text/css'>
    .cookieNotice {
        background: #444444;
        display: none;
        font-family: Helvetica Neue, sans-serif;
        font-size: 100%;
        line-height: 1.5;
        left: 0;
        padding: 12px 60px 12px 0;
        position: fixed;
        right: 0;
        bottom: 0;
        width: 100%;
        border-bottom: 3px solid #999999;
        color: #999999;
        z-index: 100;
    }

    .cookieNotice__container {
        margin: 0 auto;
        max-width: 1140px;
        width: 90%;
    }

    .cookieNotice__container  * {
        margin: 0 0.5em;
    }

    .cookieNotice__container > a{
        text-align: center;
        text-decoration: none;
        margin-top: 10px;
        float: left;
        background-color: #ff0000;
        border: 0;
        color: #ffffff;
        display: inline-block;
        padding: 14px 18px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        background-image: #cccccc;
    }

    #js_cookieNotice_refuse,
    .cookieNotice__container > a:last-child{
        background: #ffffff;
        color: #16161f;
    }



</style>

<script type='text/javascript'>
    var elNotice = document.getElementById('js_cookieNotice')
    var elAccept = document.getElementById('js_cookieNotice_accept')
    var elRefuse = document.getElementById('js_cookieNotice_refuse')


    // adding possibility to opt out only for analytics
    var gaProperty = 'UA-XXX';
    var disableStr = 'ga-disable-' + gaProperty;

    if (document.cookie.indexOf(disableStr + '=true') > -1) {
        window[disableStr] = true;
    }
    function gaOptout() {
        document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
        window[disableStr] = true;
    }
        

    function setCookie(name, value, days) {
        var expiry = new Date()
        expiry.setTime(expiry.getTime() + (days * 24 * 60 * 60 * 1000))
        var expires = 'expires=' + expiry.toUTCString()
        document.cookie = name + '=' + value + ';' + expires + ';' + 'path=/'
    }

    function getCookie(name) {
        var name = name + '='
        var decodedCookie = decodeURIComponent(document.cookie)
        var ca = decodedCookie.split(';')
        for(var i = 0; i < ca.length; i++) {
            var c = ca[i]
            while (c.charAt(0) == ' ') {
                c = c.substring(1)
            }
            if (c.indexOf(name) == 0) return c.substring(name.length, c.length)
        }
        return false
    }

    function cookieIsSet() {
        return getCookie('acceptCookies')
    }

    function showNotice() {
        elNotice.style.display = 'block'
    }

    function hideNotice() {
        elNotice.style.display = 'none'
    }

    function setAcceptCookie() {
        setCookie('acceptCookies', '1', 365)
    }

    function loadExternalScripts() {
        
        // load analytics
        // your analytics code here...

        // load iframes after accept
        // convert data-src to src for iframes
        var externalContents = document.querySelectorAll('[iframe-src]');
        if(externalContents[0]){
            for (var i = 0; i < externalContents.length; i++) {
                var iframe  = document.createElement('iframe');
                iframe.src = externalContents[i].getAttribute('iframe-src');
                
                iframe.frameborder = externalContents[i].getAttribute('frameborder');
                iframe.allowfullscreen = externalContents[i].getAttribute('allowfullscreen');
                // TODO convert more attribute or find better way to append all setted attributes and class to that element
                externalContents[i].parentNode.replaceWith(iframe, externalContents[i]);
            }
        }

        // Custom content
        // ... your custom script here

    }

    window.onload = function() {
        if (!cookieIsSet()) setTimeout(function() { showNotice() }, 2000); 
        else loadExternalScripts();

        elAccept.onclick = elAccept.ontouch = function(e) {
            e.preventDefault();
            hideNotice();
            setAcceptCookie();
            loadExternalScripts();
        }

        if(elRefuse){
            elRefuse.onclick = elRefuse.ontouch = function(e) {
                e.preventDefault();
                hideNotice();
            }
        }
    }
</script>