EU GDPR / DSGVO CONSENT POPUP
Home
Info

EU GDPR Consent Popup explicit opt-in

The EU GDPR (german: EU DSGVO) consent popup is written in pure JavaScript. The script is not static and can be extended arbitrarily.

In the GDPR is written that users must make an active consent. There must be no preselection. The user must be active when selecting (Yes/No). A privacy policy has to be available before consent.

The consent Script has some things included (matomo, google analytics, google adsense, google web fonts, jQuery, openstreetmap with openlayers).

The consent script has two default levels (easy & strong), which can be set in the script. The script can be extended by additional levels. The levels determine which radio buttons must be selected to close the popup and store the cookies. At the level "easy" (not default) no radio button "Yes" is required. The radio buttons "No" are more or less fake. If with level "easy" the consent for "Cookies" is selected "Yes", the popup will not appear anymore. At the level "strong" (default), the radio buttons "Yes" for cookies and privacy policy are required.

It is advisable to set a consent "Yes" for cookies and privacy policy as standard, even if this is not mandatory according to EU GDPR. But a pure consent for Google Analytics and/or Google Adsense is a too intrusive question to the user. Better it will set other unimportant things as required. However, all consents can be set arbitrarily as required. The script is flexible. Provided you can code JavaScript.

The consent script has two languages (en, de), cookie lifetime 12 hours, random HTML element IDs (Adblock prevention), link to a privacy policy (for each language) in a overlapping popup, and a little bit examples inclusive.

You can expand and modify the consent script by:
  • consents
  • languages
  • cookie lifetime
  • required consents
YOUR SETTINGS in the script before starting (important):
  • select consents
  • set default language
  • set cookie lifetime
  • set required consents
  • write a privacy policy in a text file with HTML elements (included style="" allowed. Not a full HTML.)
    • set the privacy policy text file path into the consent script
  • you can use the examples and rewrite the consent script, but attention!
ATTENTION by modify the script:
The script works so: If a consent "Yes" submitted or a consent cookie exist, then a associated function() is called. The associated function() load everything what you want. It is very important to note here that where is to be loaded into, in the HTML document already exists. Because the consent script is (must be) embedded in the <head> of the html document and is therefore active before all other html elements exists. JavaScript works in a linear order. For this reason, a "wait for" (wait until element exist) must be installed in each consent function(), when HTML elements are must be exists.

First on this webpage a little bit examples for the consent script.

You can test the consent script on this webpage with the level "strong" (consent for cookies & privacy policy is required). When you to consent in more, than this is loaded on this webpage.

On the webpage below is the consent script are displayed an a download link (zip) available.


   

All Cookies from this website under the domain (Google: ):



Google Libraries container (jQuery UTC Calendar-Clock):
YEAR, DAY
Jan  Feb  Mar  Apr  May  Jun  Jul  Aug  Sep  Oct  Nov  Dec 
Mon  Tue  Wed  Thu  Fri  Sat  Sun
00:00:00


Google Webfont container:

Font Browser default: The quick brown fox jumps over the lazy dog - 1234567890.

Webfont UnifrakturMaguntia: The quick brown fox jumps over the lazy dog - 1234567890.

Webfont Galdeano: The quick brown fox jumps over the lazy dog - 1234567890.

Webfont Crimson Text: The quick brown fox jumps over the lazy dog - 1234567890.



Google Adsense container:


Openstreetmap container:


Consent Popup pure JavaScript container:
// © Penultima.de - ALL RIGHTS RESERVED

// No guarantee. No warranty. No support. Use at your own risk.

// INFO: There are 2 areas FOR YOU to configuration the script.
// + you can expand the script via new functions.

//--------------------------------------------------------------------------------
//--------------------------------------------------------------------------------
// FOR YOU BEGIN - FOR YOU BEGIN - FOR YOU BEGIN - FOR YOU BEGIN - FOR YOU BEGIN -
//--------------------------------------------------------------------------------
//--------------------------------------------------------------------------------

// YOUR CONSENT ARRAYS IMPORTANT:
// - FIRST LINE: FOR COOKIE (forcing!!!)
// - SECOND LINE: FOR PRIVACY POLICY (forcing!!!)
// - FIRST ENTRY IN LINES: MUST BE THE SAME ON ALL LANGUAGES (only letters and numbers!)
// - ALL LANGUAGES MUST HAVE THE SAME COUNT OF LINES (important!!!)
// - ALL LANGUAGES MUST HAVE THE SAME SORT OF LINES (important!!!)
// ATTENTION: do NOT use only integers [0-9] for the entries. With only integers the script do not work correctly.
// ATTENTION: the language keys (en, de) can not begin with a integer [0-9]. must be start with a letter [a-zA-Z].
// Hint: you don't must delete lines. you can deactivate lines to set it as an single line comment with this on line start: //
var VP_dsgvo_consent_myinput_consent_array = {
en: [
["cookies", "Cookies", "Permission required", "deleting via browser settings"],
["privacypolicy", "Privacy policy", "Consent required", "reading via link below"],
["matomo", "Statistic Matomo", "autonomous Open Source Webanalytic", "You have a right to object"],
["adsensenpa1", "Advertising general", "non-personalized Advertising", "You have a right to object"],
["adsensenpa0", "Advertising special", "personalized Advertising", "You have a right to object"],
["analytics", "Statistic Analytics", "Google Analytics Webanalytic", "You have a right to object"],
["webfonts", "Google webfonts", "embeeded Google Webfonts", "You have a right to object"],
["libraries", "Google Libraries", "embeeded Google Libraries", "You have a right to object"],
["openstreetmap", "OpenStreetMap", "open data map service", "You have a right to object"]
],
de: [
["cookies", "Cookies", "Erlaubnis notwendig", "löschen in den Browsereinstellungen"],
["privacypolicy", "Datenschutzerklärung", "Einwilligung notwendig", "lesen über den Link unten"],
["matomo", "Statistik Matomo", "autonome Open Source Webanalytik", "Sie haben ein Widerspruchsrecht"],
["adsensenpa1", "Werbung allgemein", "nicht-personalisierte Werbung", "Sie haben ein Widerspruchsrecht"],
["adsensenpa0", "Werbung angepasst", "personalisierte Werbung", "Sie haben ein Widerspruchsrecht"],
["analytics", "Statistik Analytics", "Google Analytics Webanalytik", "Sie haben ein Widerspruchsrecht"],
["webfonts", "Google Webfonts", "Verwendung Google Webfonts", "Sie haben ein Widerspruchsrecht"],
["libraries", "Google Libraries", "Verwendung Google Libraries", "Sie haben ein Widerspruchsrecht"],
["openstreetmap", "OpenStreetMap", "Landkartenservice", "Sie haben ein Widerspruchsrecht"]
],
};

// YOUR CONSENT TEXT ARRAYS
// - FIRST ENTRY: HEADER TEXT without domainname
var VP_dsgvo_consent_myinput_text_array = {
en: ["Consents & permissions for", "Yes", "No", "to consent"],
de: ["Einwilligungen & Erlaubnisse für", "Ja", "Nein", "einwilligen"],
};

// YOUR DATA PROTECTION LINK ARRAYS
// FIRST ENTRY: FOOT NOTE LINK TEXT
// SECOND ENTRY: PATH TO THE PRIVACY POLICY
// - a .txt file or similar. (example: PHP generated .php text file. No HTML .htm or .html).
// - html elements including style allowed.
// - no scripts.
var VP_dsgvo_consent_myinput_foot_array = {
en: ["Privacy Policy", "the-path-to-your/privacy-policy-en.txt", "close"],
de: ["Datenschutzerklärung", "path-to-your/privacy-policy-de.txt", "schließen"],
};

// DEFAULT LANGUAGE
var VP_dsgvo_consent_language_default = "en";

// CONSENT CHECK LEVEL
// 0 = easy, no check, no radio button required. if cookie Yes = consent popup don't pop up.
// 1 = strong, radio button "Yes" for cookies & privacy policy required.
var VP_dsgvo_consent_check_level = 1;

// COOKIE LIFETIME IN HOURS
var VP_dsgvo_consent_cookielifetime = 12;

// LENGTH FOR RANDOM HTML ELEMENT IDs (AdBlock prevention)
var VP_dsgvo_consent_id_length = 32;

//----------------------------------------------------------------------
//----------------------------------------------------------------------
// FOR YOU END - FOR YOU END - FOR YOU END - FOR YOU END - FOR YOU END -
//----------------------------------------------------------------------
//----------------------------------------------------------------------

// COOKIES PRE-PARATION
var VP_dsgvo_consent_hostname = window.location.hostname;
var VP_dsgvo_consent_domainname = VP_dsgvo_consent_hostname.replace(/\./g, "");
var VP_dsgvo_consent_cookiekey_consent = VP_dsgvo_consent_domainname;
var VP_dsgvo_consent_cookievalue_consent = "accepted";
var VP_dsgvo_consent_cookiekey_expires = "expires";    
//var VP_dsgvo_consent_cookievalue_expires = "Thu, 31 Dec 2099 23:59:59 UTC";
var VP_dsgvo_consent_cookie_date_now = new Date();
VP_dsgvo_consent_cookie_date_now.setTime(VP_dsgvo_consent_cookie_date_now.getTime() + (VP_dsgvo_consent_cookielifetime * (3600 * 1000)));
var VP_dsgvo_consent_cookievalue_expires = VP_dsgvo_consent_cookie_date_now.toUTCString();    
var VP_dsgvo_consent_cookiekeyvalue_expires = VP_dsgvo_consent_cookiekey_expires + "=" + VP_dsgvo_consent_cookievalue_expires;
var VP_dsgvo_consent_cookiekey_domain = "domain";
var VP_dsgvo_consent_cookievalue_domain = VP_dsgvo_consent_hostname;
var VP_dsgvo_consent_cookiekeyvalue_domain = VP_dsgvo_consent_cookiekey_domain + "=" + VP_dsgvo_consent_cookievalue_domain;
var VP_dsgvo_consent_cookiekey_path = "path";
var VP_dsgvo_consent_cookievalue_path = "/";
var VP_dsgvo_consent_cookiekeyvalue_path = VP_dsgvo_consent_cookiekey_path + "=" + VP_dsgvo_consent_cookievalue_path;

// GET ALL CONSENT COOKIES
function VP_dsgvo_consent_getAllCookies() {
    var getallcookies = document.cookie;
    var getallcookies_replace = getallcookies.replace(/[\s\uFEFF\xA0]/g, "");
    var getallcookies_split = getallcookies_replace.split(";");
    var allcookies_object = {};
    var allconsents_array = [];
    
    for (var i = 0; i < VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default].length; i++) {
        allconsents_array.push(VP_dsgvo_consent_domainname + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][0]);
    }
    
    for (var i = 0; i < getallcookies_split.length; i++) {
        var cookie_split = getallcookies_split[i].split("=");
        var cookie_namefull = cookie_split[0];
        var cookie_namefull_length = cookie_namefull.length;
        var cookie_domainname_length = VP_dsgvo_consent_domainname.length;
        var cookie_name = cookie_namefull.substring(cookie_domainname_length, cookie_namefull_length);
        // allcookies_object[cookie_name] = [];
        // allcookies_object[cookie_name][0] = cookie_split[0];
        // allcookies_object[cookie_name][1] = cookie_split[1];        
        if (allconsents_array.indexOf(cookie_split[0]) > -1) {
            allcookies_object[cookie_name] = cookie_split[1];
        }
    }
    return allcookies_object;
}
// display the status of saved cookies from consents & permissions by reload the page in the browser developer tools console
// example:
// matomo: "accepted"
console.log(VP_dsgvo_consent_getAllCookies());

//--------------------------------------------------------------------------------
//--------------------------------------------------------------------------------
// FOR YOU BEGIN - FOR YOU BEGIN - FOR YOU BEGIN - FOR YOU BEGIN - FOR YOU BEGIN -
//--------------------------------------------------------------------------------
//--------------------------------------------------------------------------------

// THE LOAD SCRIPTS FUNCTIONS AREA BEGIN
// MAKE THE SCRIPTS LOADING FUNCTIONS BEGIN
var VP_dsgvo_consent_functions_object = {};

// HERE YOUR SCRIPTS LOADING FUNCTIONS BEGIN

// Cookies: usually no script to load.
VP_dsgvo_consent_functions_object["cookies"] = function () {
};

// Privacy Policy: usually no script to load.
VP_dsgvo_consent_functions_object["privacypolicy"] = function () {
};

// MATOMO (Piwik)
// the original matomo code must be splitted.
// the function inside the original matomo code can be deactivated.
var _paq = _paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
VP_dsgvo_consent_functions_object["matomo"] = function () {
    // (function() {
// set here your url and your Site Id:
    var u="//www.example.com/matomo/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '0']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
    // })();
};

// ADSENSE INFO: You use Adsense code blocks in your HTML body?
// then write only the <ins>...</ins> in that places with followed <script>...</script>
// example (insert only this code block/s in your HTML body):
// <ins class="adsbygoogle"
// style="display:block"
// data-ad-client="ca-pub-000000000000000"
// data-ad-slot="000000000"
// data-ad-format="auto"></ins>
// <script>
// (adsbygoogle = window.adsbygoogle || []).push({});
// </script>
// Hint: The script for non-personalized ads loads first. When this is consent and loaded, the personalized ads script don't load.
// set intern a initiale "false". is for check one of both adsense is already loaded.
var VP_dsgvo_consent_adsbygoogle = false;
// The original adsense script must be splitted + set initial a pause:
(adsbygoogle=window.adsbygoogle||[]).pauseAdRequests=1;
VP_dsgvo_consent_functions_object["adsensenpa1"] = function () {
    if (VP_dsgvo_consent_adsbygoogle === false) {
        VP_dsgvo_consent_adsbygoogle = true;
        var gascript = document.createElement("script");
        gascript.async = true;
        gascript.src = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
        document.getElementsByTagName("head")[0].appendChild(gascript, document.getElementsByTagName("head")[0]);
        (adsbygoogle=window.adsbygoogle||[]).requestNonPersonalizedAds=1;
        (adsbygoogle=window.adsbygoogle||[]).pauseAdRequests=0;
    }
};

// ADSENSE INFO: please read the info by the function above
// one time "adsbygoogle" initialized is enough:
// (adsbygoogle = window.adsbygoogle || []).push({});
VP_dsgvo_consent_functions_object["adsensenpa0"] = function () {
    if (VP_dsgvo_consent_adsbygoogle === false) {
        VP_dsgvo_consent_adsbygoogle = true;
        var gascript = document.createElement("script");
        gascript.async = true;
        gascript.src = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
        document.getElementsByTagName("head")[0].appendChild(gascript, document.getElementsByTagName("head")[0]);
        (adsbygoogle=window.adsbygoogle||[]).requestNonPersonalizedAds=0;
        (adsbygoogle=window.adsbygoogle||[]).pauseAdRequests=0;
    }
};

// GOOGLE ANALYTICS
VP_dsgvo_consent_functions_object["analytics"] = function () {
    window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
    ga('create', 'UA-00000000-0', 'auto');
    ga('send', 'pageview');
    var gascript = document.createElement("script");
    gascript.async = true;
    gascript.src = "https://www.google-analytics.com/analytics.js";
    document.getElementsByTagName("head")[0].appendChild(gascript, document.getElementsByTagName("head")[0]);
};

// GOOGLE WEBFONTS: use the webfont loader method: https://github.com/typekit/webfontloader
// Hint: check the webfont.js version and change it when want.
// example for this <link> embedded webfonts:
// <link href='https://fonts.googleapis.com/css?family=UnifrakturMaguntia' rel='stylesheet' type='text/css'>
// <link href='https://fonts.googleapis.com/css?family=Galdeano' rel='stylesheet' type='text/css'>
// <link href='https://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
VP_dsgvo_consent_functions_object["webfonts"] = function () {
    WebFontConfig = {
        google: {
            families: ['UnifrakturMaguntia', 'Galdeano', 'Crimson Text:400,400italic,600,600italic,700,700italic']
        }
    };
    var gwfscript = document.createElement("script");
    gwfscript.async = true;
    gwfscript.src = "https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js";
    document.getElementsByTagName("head")[0].appendChild(gwfscript, document.getElementsByTagName("head")[0]);    
};

// GOOGLE LIBRARIES: example for jQuery.
// You can load more than one in this function.
VP_dsgvo_consent_functions_object["libraries"] = function () {
    var glibscript = document.createElement("script");
    glibscript.async = true;
    glibscript.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js";
    document.getElementsByTagName("head")[0].appendChild(glibscript, document.getElementsByTagName("head")[0]);    
    
// insert here the div-box-id to wait is exist for load your script, and the path to your script file.
    var clockdivid = "the-wait-for-html-element-id";
    var clockscript = "the-path-to-your/my-jquery.js";
        
// wait for clock div is exist in the HTML document.
    var waitforclockdiv = setInterval(function() {
        if (document.getElementById(clockdivid) && typeof $ !== "undefined") {
            var olscript = document.createElement("script");
            olscript.async = true;
            olscript.src = clockscript;
            document.getElementsByTagName("head")[0].appendChild(olscript, document.getElementsByTagName("head")[0]);
            clearInterval(waitforclockdiv);
        }
    }, 100);
};

// OPENSTREETMAP: load here your OSM OpenLayers/Leaflet JavaScript files, similar the function above.
VP_dsgvo_consent_functions_object["openstreetmap"] = function () {    
    var osmolstyle = document.createElement("link");
    osmolstyle.setAttribute("rel", "stylesheet");
    osmolstyle.setAttribute("type", "text/css");
//insert here the path to the OpenLayers or Leaflet CSS file.
    osmolstyle.setAttribute("href", "the-path-to-your/osm/v6-0-1/ol.css");
    document.getElementsByTagName("head")[0].appendChild(osmolstyle, document.getElementsByTagName("head")[0]);    
    
    var osmscript = document.createElement("script");    
//insert here the path to the OpenLayers or Leaflet JS file.
    osmscript.src = "the-path-to-your/osm/v6-0-1/ol.js";
    document.getElementsByTagName("head")[0].appendChild(osmscript, document.getElementsByTagName("head")[0]);
    
// insert here your data and your path to your OpenLayers or Leaflet JS file (new ol.Map()).
// load your OpenLayers or Leaflet JavaScript only here! please don't embeeded it fixed in the HTML.
// please don't make a fixed width an height in your CSS stylesheet. otherwise: no consent = blank area.
    var mapdivid = "the-wait-for-html-element-id";
    var mapdivwidth = "100%";
    var mapdivheight = "400px";
    var mapscript = "the-path-to-your/osm/my-osm-openlayer.js";
    
// wait for OSM map div is exist in the HTML document.
    var waitforosmmapdiv = setInterval(function() {
        if (document.getElementById(mapdivid) && typeof ol !== "undefined") {
            if (!document.getElementById(mapdivid).contains(document.getElementsByTagName("canvas")[0])) {
                document.getElementById(mapdivid).style.width = mapdivwidth;
                document.getElementById(mapdivid).style.height = mapdivheight;
                var olscript = document.createElement("script");
                olscript.async = true;
                olscript.src = mapscript;
                document.getElementsByTagName("head")[0].appendChild(olscript, document.getElementsByTagName("head")[0]);
            }
            clearInterval(waitforosmmapdiv);
        }
    }, 100);
};
// HERE YOUR SCRIPTS LOADING FUNCTIONS END

//----------------------------------------------------------------------
//----------------------------------------------------------------------
// FOR YOU END - FOR YOU END - FOR YOU END - FOR YOU END - FOR YOU END -
//----------------------------------------------------------------------
//----------------------------------------------------------------------

// FUNCTION TO LOAD ALL SCRIPTS WITH CONSENT VIA "OK" BEGIN
function VP_dsgvo_consent_script_loading_function(checker) {

    // display the consent result via "OK" button in the browsers developer tools console
    console.log(checker);

    var consent_name_array = Object.keys(checker);
    for (var i = 0; i < consent_name_array.length; i++) {
        if (checker[consent_name_array[i]]["yes"]) {
            VP_dsgvo_consent_functions_object[consent_name_array[i]]();
        }
    }
}
// FUNCTION TO LOAD ALL SCRIPTS WITH CONSENT VIA "OK" END

// THE COOKIE CHECK LOAD SCRIPTS AREA BEGIN
var consent_name_array = Object.keys(VP_dsgvo_consent_getAllCookies());
for (var i = 0; i < consent_name_array.length; i++) {
    if (consent_name_array[i]) {
        VP_dsgvo_consent_functions_object[consent_name_array[i]]();
    }
}
// THE COOKIE CHECK LOAD SCRIPTS AREA END

// MAKE THE SCRIPTS LOADING FUNCTIONS END
// THE LOAD SCRIPTS FUNCTIONS AREA END

// FUNCTION FOR RANDOM HTML ELEMENT IDs (AdBlock prevention)
function VP_dsgvo_consent_makeid(idlength) {
    var result = "";
    var charletter = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
    var charall = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    var charletterlength = charletter.length;
    var charalllength = charall.length;
    result += charletter.charAt(Math.floor(Math.random() * charletterlength));
    result += "";
    for ( var i = 0; i < (idlength - 1); i++ ) {
     result += charall.charAt(Math.floor(Math.random() * charalllength));
    }
    return result;
}
var VP_dsgvo_consent_iddiv = VP_dsgvo_consent_makeid(VP_dsgvo_consent_id_length);
var VP_dsgvo_consent_iddivi = VP_dsgvo_consent_makeid(VP_dsgvo_consent_id_length) + "i";
var VP_dsgvo_consent_iddivimg = VP_dsgvo_consent_makeid(VP_dsgvo_consent_id_length) + "img";
var VP_dsgvo_consent_idspanimglangen = VP_dsgvo_consent_makeid(VP_dsgvo_consent_id_length) + "imglangen";
var VP_dsgvo_consent_idspanimglangde = VP_dsgvo_consent_makeid(VP_dsgvo_consent_id_length) + "imglangde";
var VP_dsgvo_consent_idphead = VP_dsgvo_consent_makeid(VP_dsgvo_consent_id_length) + "phead";
var VP_dsgvo_consent_idspanheadtxt = VP_dsgvo_consent_makeid(VP_dsgvo_consent_id_length) + "spanheadtxt";
var VP_dsgvo_consent_idspanheaddomain = VP_dsgvo_consent_makeid(VP_dsgvo_consent_id_length) + "spanheaddomain";
var VP_dsgvo_consent_iddivmain = VP_dsgvo_consent_makeid(VP_dsgvo_consent_id_length) + "divmain";
var VP_dsgvo_consent_iddivmaininput = VP_dsgvo_consent_makeid(VP_dsgvo_consent_id_length) + "divmaininput";
var VP_dsgvo_consent_iddivinput = VP_dsgvo_consent_makeid(VP_dsgvo_consent_id_length) + "divinput";
var VP_dsgvo_consent_iddiviinput = VP_dsgvo_consent_makeid(VP_dsgvo_consent_id_length) + "diviinput";
var VP_dsgvo_consent_idspaninputtxt = VP_dsgvo_consent_makeid(VP_dsgvo_consent_id_length) + "spaninputtxt";
var VP_dsgvo_consent_idspaninputdps = VP_dsgvo_consent_makeid(VP_dsgvo_consent_id_length) + "spaninputdps";
var VP_dsgvo_consent_input_id_yes = VP_dsgvo_consent_makeid(VP_dsgvo_consent_id_length) + "input-id-yes";
var VP_dsgvo_consent_idlabelinputyes = VP_dsgvo_consent_makeid(VP_dsgvo_consent_id_length) + "labelinputyes";
var VP_dsgvo_consent_idspaninputsep = VP_dsgvo_consent_makeid(VP_dsgvo_consent_id_length) + "spaninputsep";
var VP_dsgvo_consent_input_id_no = VP_dsgvo_consent_makeid(VP_dsgvo_consent_id_length) + "input-id-no";
var VP_dsgvo_consent_idlabelinputno = VP_dsgvo_consent_makeid(VP_dsgvo_consent_id_length) + "labelinputno";
var VP_dsgvo_consent_iddivinputinfo = VP_dsgvo_consent_makeid(VP_dsgvo_consent_id_length) + "divinputinfo";
var VP_dsgvo_consent_idspaninputinfo = VP_dsgvo_consent_makeid(VP_dsgvo_consent_id_length) + "spaninputinfo";
var VP_dsgvo_consent_iddivbutton = VP_dsgvo_consent_makeid(VP_dsgvo_consent_id_length) + "divbutton";
var VP_dsgvo_consent_iddivbuttonbutton = VP_dsgvo_consent_makeid(VP_dsgvo_consent_id_length) + "divbuttonbutton";
var VP_dsgvo_consent_idpfoot = VP_dsgvo_consent_makeid(VP_dsgvo_consent_id_length) + "pfoot";
var VP_dsgvo_consent_idspanfoot = VP_dsgvo_consent_makeid(VP_dsgvo_consent_id_length) + "spanfoot";
var VP_dsgvo_consent_idafoot = VP_dsgvo_consent_makeid(VP_dsgvo_consent_id_length) + "afoot";
var VP_dsgvo_consent_iddivdata = VP_dsgvo_consent_makeid(VP_dsgvo_consent_id_length) + "divdata";
var VP_dsgvo_consent_idpdata = VP_dsgvo_consent_makeid(VP_dsgvo_consent_id_length) + "pdata";
var VP_dsgvo_consent_idbuttondata = VP_dsgvo_consent_makeid(VP_dsgvo_consent_id_length) + "buttondata";


// CHANGE LANGUAGE FUNCTION
function VP_dsgvo_consent_change_language(lang) {
    var string_longest = 0;
    for (var i = 0; i < VP_dsgvo_consent_myinput_consent_array[lang].length; i++) {
        if (VP_dsgvo_consent_myinput_consent_array[lang][i][1].length > string_longest) {
            string_longest = VP_dsgvo_consent_myinput_consent_array[lang][i][1].length;
        }
    }
    document.getElementById(VP_dsgvo_consent_idspanheadtxt).innerHTML = VP_dsgvo_consent_myinput_text_array[lang][0];
    for (var i = 0; i < VP_dsgvo_consent_myinput_consent_array[lang].length; i++) {
        var ilist = i + 1;
        document.getElementById(VP_dsgvo_consent_input_id_yes + "-" + VP_dsgvo_consent_myinput_consent_array[lang][i][0]).checked = false;
        document.getElementById(VP_dsgvo_consent_input_id_no + "-" + VP_dsgvo_consent_myinput_consent_array[lang][i][0]).checked = false;
        document.getElementById(VP_dsgvo_consent_idspaninputtxt + "-" + VP_dsgvo_consent_myinput_consent_array[lang][i][0]).innerHTML = ilist + ".) " + VP_dsgvo_consent_myinput_consent_array[lang][i][1];
        document.getElementById(VP_dsgvo_consent_idspaninputdps + "-" + VP_dsgvo_consent_myinput_consent_array[lang][i][0]).innerHTML = ":" + getnewSpaninput_spaces(string_longest, VP_dsgvo_consent_myinput_consent_array[lang][i][1].length);
        document.getElementById(VP_dsgvo_consent_idlabelinputyes + "-" + VP_dsgvo_consent_myinput_consent_array[lang][i][0]).innerHTML = VP_dsgvo_consent_myinput_text_array[lang][1];
        document.getElementById(VP_dsgvo_consent_idlabelinputno + "-" + VP_dsgvo_consent_myinput_consent_array[lang][i][0]).innerHTML = VP_dsgvo_consent_myinput_text_array[lang][2];
        var divinputinfo_style_display = document.getElementById(VP_dsgvo_consent_iddivinputinfo + "-" + VP_dsgvo_consent_myinput_consent_array[lang][i][0]).style.display;
        document.getElementById(VP_dsgvo_consent_iddivinputinfo + "-" + VP_dsgvo_consent_myinput_consent_array[lang][i][0]).style.display = "none";
        // var parent_element_clientwidth = document.getElementById(VP_dsgvo_consent_iddivmaininput).clientWidth;
        // var parent_element_paddingleft = document.getElementById(VP_dsgvo_consent_iddivmaininput).style.paddingLeft;
        // var parent_element_paddingright = document.getElementById(VP_dsgvo_consent_iddivmaininput).style.paddingRight;
        // var parent_element_width = parent_element_clientwidth - (parent_element_paddingleft + parent_element_paddingright);
        // document.getElementById(VP_dsgvo_consent_iddivinputinfo + "-" + VP_dsgvo_consent_myinput_consent_array[lang][i][0]).style.width = parent_element_width + "px";
        // if (divinputinfo_style_display != "none") {
        // document.getElementById(VP_dsgvo_consent_iddivinputinfo + "-" + VP_dsgvo_consent_myinput_consent_array[lang][i][0]).style.display = "block";
        // }
        document.getElementById(VP_dsgvo_consent_idspaninputinfo + "-" + VP_dsgvo_consent_myinput_consent_array[lang][i][0]).innerHTML = VP_dsgvo_consent_myinput_consent_array[lang][i][3];
        // document.getElementById(VP_dsgvo_consent_idspanfoot + "" + i).innerHTML = VP_dsgvo_consent_myinput_consent_array[lang][i][1] + ":\u00A0" + VP_dsgvo_consent_myinput_consent_array[lang][i][2] + ".";
        document.getElementById(VP_dsgvo_consent_idspanfoot + "" + i).innerHTML = ilist + ".) " + VP_dsgvo_consent_myinput_consent_array[lang][i][2] + ".";
    }
    document.getElementById(VP_dsgvo_consent_iddivbuttonbutton).innerHTML = VP_dsgvo_consent_myinput_text_array[lang][3];
    document.getElementById(VP_dsgvo_consent_idafoot).innerHTML = VP_dsgvo_consent_myinput_foot_array[lang][0];
    document.getElementById(VP_dsgvo_consent_idafoot).onclick = function(){VP_dsgvo_consent_data_open_function(lang)};
}

// CONSENT KEYS
var VP_dsgvo_consent_myinputkeys_array = [];
for (var i = 0; i < VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default].length; i++) {
    VP_dsgvo_consent_myinputkeys_array[VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][0]] = i;
}

// Open a line below each line when click Yes
function VP_dsgvo_consent_rightofobject_open(id) {
    var parent_element_clientwidth = document.getElementById(id.parentElement.id).clientWidth;
    var parent_element_paddingleft = document.getElementById(id.parentElement.id).style.paddingLeft;
    var parent_element_paddingright = document.getElementById(id.parentElement.id).style.paddingRight;
    var parent_element_width = parent_element_clientwidth - (parent_element_paddingleft + parent_element_paddingright);
    document.getElementById(id.parentElement.parentElement.lastElementChild.id).style.width = parent_element_width + "px";
    document.getElementById(id.parentElement.parentElement.lastElementChild.id).style.display = "block";
}

// Close the line below each line when click No
function VP_dsgvo_consent_rightofobject_close(id) {
    document.getElementById(id.parentElement.parentElement.lastElementChild.id).style.display = "none";
}

// calculate the count of whitespaces between ":" and "radio button" Yes.
function getnewSpaninput_spaces(string_longest, stringlength) {
    var spaces_length = string_longest - stringlength;
    var spaces = "";
    for (var i = 0; i < spaces_length; i++) {
        spaces += "\u00A0";
    }
    return spaces;
}

// CREATE THE CONSENT POPUP BEGIN
function VP_dsgvo_consent_function() {

    // div begin
    var newDiv = document.createElement("div");
    newDiv.setAttribute("id", VP_dsgvo_consent_iddiv);
    // newDiv.classList.add("VP-dsgvo-consent-classdiv");
    newDiv.style.position = "fixed";
    newDiv.style.left = "0";
    newDiv.style.right = "0";
    newDiv.style.top = "0";
    newDiv.style.display = "flex";
    newDiv.style.margin = "0 auto";
    newDiv.style.width = "100%";
    newDiv.style.height = "100%";
    newDiv.style.boxSizing = "border-box";
    newDiv.style.textAlign = "center";
    newDiv.style.color = "#000000";
    newDiv.style.fontFamily = "monospace";
    newDiv.style.fontStyle = "normal";
    newDiv.style.fontSize = "1em";
    newDiv.style.fontWeight = "bold";
    newDiv.style.fontVariant = "normal";
    newDiv.style.backgroundColor = "rgba(175, 175, 175, 0.9)";
    //newDiv.style.opacity = "0.9";
    newDiv.style.WebkitAlignItems = "center";
    newDiv.style.alignItems = "center";
    // div end

    // div div begin
    var newDivi = document.createElement("div");
    newDivi.setAttribute("id", VP_dsgvo_consent_iddivi);
    // newDivi.classList.add("VP-dsgvo-consent-classdivi");
    newDivi.style.margin = "0 auto";
    newDivi.style.width = "max-content";
    newDivi.style.minWidth = "320px";
    newDivi.style.boxSizing = "content-box";
    newDivi.style.paddingLeft = "10px";
    newDivi.style.paddingRight = "10px";
    newDivi.style.backgroundColor = "rgba(255, 255, 255, 1)";
    //newDivi.style.opacity = "1.0";
    newDivi.style.borderStyle = "solid";
    newDivi.style.borderWidth = "1px";
    newDivi.style.borderRadius = "10px";
    // div div end

    // div div div begin
    var newDivimg = document.createElement("div");
    newDivimg.setAttribute("id", VP_dsgvo_consent_iddivimg);
    // newDivimg.classList.add("VP-dsgvo-consent-classdivimg");
    newDivimg.style.margin = "0 auto";
    newDivimg.style.width = "100%";
    newDivimg.style.boxSizing = "content-box";
    // div div div end

    // div div div img de begin
    var newSpanimglangen = document.createElement("span");
    newSpanimglangen.onclick = function(){VP_dsgvo_consent_change_language("en")};
    newSpanimglangen.setAttribute("id", VP_dsgvo_consent_idspanimglangen);
    // newSpanimglangen.classList.add("VP-dsgvo-consent-classspanimglangen");
    newSpanimglangen.style.display = "inline-block";
    newSpanimglangen.style.width = "20px";
    newSpanimglangen.style.height = "10px";
    newSpanimglangen.style.backgroundImage = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAACbUlEQVQozwFiAp39Ad9icRVpX+APGYKTwKy51f7+/wAAAAAAALGRUx5fWwIKCc2OmmJ4rwAAAAAAAAQDAlhAIWcD4hv17RZoXQJ+BS/Pn7IKhoeeWyTUtmxZTC0DAgEAAAAAAAAAAAAAAAAAAAAAAAAFBAJfRCPBQgKD+tExX032e3pjqN4Eo73dpwQCWT8wZqK1G/bum2hdfWxAg5TAAgICAAAAAAAABQQCX0QjZgHhGvjRFWle4BAaeJXAq7ev/v7/Aam10wAAAAAAAAQEAkQtFv7Mzgs1MAUYFv73+NIeNAIKCS3eyPTByAMRDwoxLPHz+LvF3f7+/wAAAAAAAAHQFy0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//f4AAAABAwIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAE//3+AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//3+AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaq10wAAAAAAAAQEAkY8IwsJBvXK0P75+QozLtMgNgIKCS3fygEBAPri5ffT2P0zMb/R6P7+/wAAAAAAAARWb6oDAwJaTC18az//z9LfmqTjDBWZ/B1a9wsbAAAAAACmtNPDy+B5aD4RCAfwdX8PEhyW9BewxOD///8CXU8v1rdtllEeBYCDzqe5fAgyQr38pr7d/f3+AAAAAAAA+vv9majMJkWRdsHvA4mENk47jPrNukgJUT4iBJZRHuuAgs4NFZkIMqm83/393QAAAAAAAAAAAAAAAAAAAAAAAAAAAPr7/ZmozJ+tz2FTMXmJhDbX0yKfqBiYxyEA3G3wAAAAAElFTkSuQmCC')";
    newSpanimglangen.style.boxSizing = "content-box";
    newSpanimglangen.style.padding = "10px";
    newSpanimglangen.style.backgroundRepeat = "no-repeat";
    newSpanimglangen.style.backgroundPosition = "center center";
    newSpanimglangen.style.marginLeft = "10px";
    newSpanimglangen.style.marginRight = "10px";
    newSpanimglangen.style.cursor = "pointer";
    // div div div img de end

    // div div div img de begin
    var newSpanimglangde = document.createElement("span");
    newSpanimglangde.onclick = function(){VP_dsgvo_consent_change_language("de")};
    newSpanimglangde.setAttribute("id", VP_dsgvo_consent_idspanimglangde);
    // newSpanimglangde.classList.add("VP-dsgvo-consent-classspanimglangde");
    newSpanimglangde.style.display = "inline-block";
    newSpanimglangde.style.width = "17px";
    newSpanimglangde.style.height = "10px";
    newSpanimglangde.style.backgroundImage = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAKCAIAAADdHiL1AAACE0lEQVQozwEIAvf9AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAY4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHdAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAtEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH/zgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADe4A5WrA1ihAAAAAElFTkSuQmCC')";
    newSpanimglangde.style.boxSizing = "content-box";
    newSpanimglangde.style.padding = "10px";
    newSpanimglangde.style.backgroundRepeat = "no-repeat";
    newSpanimglangde.style.backgroundPosition = "center center";
    newSpanimglangde.style.marginLeft = "10px";
    newSpanimglangde.style.marginRight = "10px";
    newSpanimglangde.style.cursor = "pointer";
    // div div div img de end


    // div div p head begin
    var newPhead = document.createElement("p");
    newPhead.setAttribute("id", VP_dsgvo_consent_idphead);
    // newPhead.classList.add("VP-dsgvo-consent-classphead");

    newPhead.style.fontSize = "1.4em";
    newPhead.style.marginTop = "0px";
    newPhead.style.marginBottom = "10px";
    // div div p head end

    // div div p head span txt begin
    var newSpanheadtxt = document.createElement("span");
    newSpanheadtxt.setAttribute("id", VP_dsgvo_consent_idspanheadtxt);
    // newSpanheadtxt.classList.add("VP-dsgvo-consent-classspanheadtxt");
    newSpanheadtxt.style.display = "block";
    // div div p head span txt end

    // div div p head span txt textnode begin
    var newSpanheadtxtnode = document.createTextNode(VP_dsgvo_consent_myinput_text_array[VP_dsgvo_consent_language_default][0]);
    // div div p head span txt textnode end

    // div div p head span domain begin
    var newSpanheaddomain = document.createElement("span");
    newSpanheaddomain.setAttribute("id", VP_dsgvo_consent_idspanheaddomain);
    // newSpanheaddomain.classList.add("VP-dsgvo-consent-classspanheaddomain");
    // div div p head span domain end

    // div div p head span domain textnode begin
    var newTextnodeheaddomain = document.createTextNode(window.location.hostname);
    // div div p head span domain textnode end

    // div div div main begin
    var newDivmain = document.createElement("div");
    newDivmain.setAttribute("id", VP_dsgvo_consent_iddivmain);
    // newDivmain.classList.add("VP-dsgvo-consent-classdivmain");
    // div div div main end

    // div div div main input begin
    var newDivmaininput = document.createElement("div");
    newDivmaininput.setAttribute("id", VP_dsgvo_consent_iddivmaininput);
    // newDivmaininput.classList.add("VP-dsgvo-consent-classdivmaininput");
    // div div div main input end
    newDivmaininput.style.margin = "0 auto";
    newDivmaininput.style.width = "100%";
    newDivmaininput.style.maxWidth = "max-content";

    // div div div main div input radio begin
    var string_longest = 0;
    for (var i = 0; i < VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default].length; i++) {
        if (VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][1].length > string_longest) {
            string_longest = VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][1].length;
        }
    }

    for (var i = 0; i < VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default].length; i++) {
        var ilist = i + 1;

        var newDivinput = document.createElement("div");
        newDivinput.setAttribute("id", VP_dsgvo_consent_iddivinput + "-" + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][0]);
        // newDivinput.classList.add("VP-dsgvo-consent-classdivinput");
        newDivinput.style.display = "block";
        newDivinput.style.marginTop = "5px";

        var newDiviinput = document.createElement("div");
        newDiviinput.setAttribute("id", VP_dsgvo_consent_iddiviinput + "-" + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][0]);
        // newDiviinput.classList.add("VP-dsgvo-consent-classdiviinput");

        var newSpaninputtxt = document.createElement("span");
        newSpaninputtxt.setAttribute("id", VP_dsgvo_consent_idspaninputtxt + "-" + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][0]);
        // newSpaninputtxt.classList.add("VP-dsgvo-consent-classspaninputtxt");
        var newSpaninputtxtnode = document.createTextNode(ilist + ".) " + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][1]);
        newSpaninputtxt.appendChild(newSpaninputtxtnode);

        var newSpaninputdps = document.createElement("span");
        newSpaninputdps.setAttribute("id", VP_dsgvo_consent_idspaninputdps + "-" + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][0]);
        // newSpaninputdps.classList.add("VP-dsgvo-consent-classspaninputdps");
        var newSpanInputdpstxt = document.createTextNode(":" + getnewSpaninput_spaces(string_longest, VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][1].length));
        newSpaninputdps.appendChild(newSpanInputdpstxt);

        var newInputyes = document.createElement("input");
        newInputyes.setAttribute("type", "radio");
        newInputyes.setAttribute("name", "inputname-" + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][0]);
        newInputyes.setAttribute("value", "yes");
        newInputyes.onclick = function(){VP_dsgvo_consent_rightofobject_open(this)};
        newInputyes.setAttribute("id", VP_dsgvo_consent_input_id_yes + "-" + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][0]);
        // newInputyes.classList.add("VP-dsgvo-consent-classinput");
        newInputyes.required = true;

        var newLabelinputyes = document.createElement("label");
        newLabelinputyes.setAttribute("id", VP_dsgvo_consent_idlabelinputyes + "-" + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][0]);
        // newLabelinputyes.classList.add("VP-dsgvo-consent-classlabelinputyes");
        newLabelinputyes.setAttribute("for", VP_dsgvo_consent_input_id_yes + "-" + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][0]);
        newLabelinputyes.onclick = function(){VP_dsgvo_consent_rightofobject_open(this)};
        newLabelinputyes.style.color = "#000000";
        newLabelinputyes.style.backgroundColor = "#00ff00";
        newLabelinputyes.style.paddingTop = "3px";
        newLabelinputyes.style.paddingRight = "5px";
        newLabelinputyes.style.paddingBottom = "0px";
        newLabelinputyes.style.paddingLeft = "5px";
        var newLabelinputyestxt = document.createTextNode(VP_dsgvo_consent_myinput_text_array[VP_dsgvo_consent_language_default][1]);
        newLabelinputyes.appendChild(newLabelinputyestxt);

        var newSpaninputsep = document.createElement("span");
        newSpaninputsep.setAttribute("id", VP_dsgvo_consent_idspaninputsep + "-" + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][0]);
        // newSpaninputsep.classList.add("VP-dsgvo-consent-classspaninputsep");
        var newSpanInputseptxt = document.createTextNode("\u00A0|\u00A0");
        newSpaninputsep.appendChild(newSpanInputseptxt);

        var newInputno = document.createElement("input");
        newInputno.setAttribute("type", "radio");
        newInputno.setAttribute("name", "inputname-" + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][0]);
        newInputno.setAttribute("value", "no");
        newInputno.onclick = function(){VP_dsgvo_consent_rightofobject_close(this)};
        newInputno.setAttribute("id", VP_dsgvo_consent_input_id_no + "-" + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][0]);
        // newInputno.classList.add("VP-dsgvo-consent-classinput");
        // newInputno.required = true;

        var newLabelinputno = document.createElement("label");
        newLabelinputno.setAttribute("id", VP_dsgvo_consent_idlabelinputno + "-" + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][0]);
        // newLabelinputno.classList.add("VP-dsgvo-consent-classlabelinputno");
        newLabelinputno.setAttribute("for", VP_dsgvo_consent_input_id_no + "-" + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][0]);
        newLabelinputno.onclick = function(){VP_dsgvo_consent_rightofobject_close(this)};
        newLabelinputno.style.color = "#ffffff";
        newLabelinputno.style.backgroundColor = "#ff0000";
        newLabelinputno.style.paddingTop = "3px";
        newLabelinputno.style.paddingRight = "5px";
        newLabelinputno.style.paddingBottom = "0px";
        newLabelinputno.style.paddingLeft = "5px";
        var newLabelinputnotxt = document.createTextNode(VP_dsgvo_consent_myinput_text_array[VP_dsgvo_consent_language_default][2]);
        newLabelinputno.appendChild(newLabelinputnotxt);

        newDiviinput.appendChild(newSpaninputtxt);
        newDiviinput.appendChild(newSpaninputdps);
        newDiviinput.appendChild(newInputyes);
        newDiviinput.appendChild(newLabelinputyes);
        newDiviinput.appendChild(newSpaninputsep);
        newDiviinput.appendChild(newInputno);
        newDiviinput.appendChild(newLabelinputno);
        newDivinput.appendChild(newDiviinput);

        var newDivinputinfo = document.createElement("div");
        newDivinputinfo.setAttribute("id", VP_dsgvo_consent_iddivinputinfo + "-" + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][0]);
        // newDivinputinfo.classList.add("VP-dsgvo-consent-classdivinputinfo");
        // newDivinputinfo.onclick = function(){VP_dsgvo_consent_rightofobject_open(VP_dsgvo_consent_iddivinputinfo + "-" + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][0])};
        newDivinputinfo.style.display = "none";
        newDivinputinfo.style.marginTop = "2px";
        newDivinputinfo.style.color = "#000000";
        newDivinputinfo.style.backgroundColor = "#00ff00";
        newDivinputinfo.style.borderLeftStyle = "solid";
        newDivinputinfo.style.borderLeftWidth = "1px";
        newDivinputinfo.style.borderLeftColor = "#000000";
        newDivinputinfo.style.borderRightStyle = "solid";
        newDivinputinfo.style.borderRightWidth = "1px";
        newDivinputinfo.style.borderRightColor = "#000000";
        newDivinputinfo.style.borderBottomStyle = "solid";
        newDivinputinfo.style.borderBottomWidth = "1px";
        newDivinputinfo.style.borderBottomColor = "#000000";
        newDivinputinfo.style.boxSizing = "border-box";
        newDivinputinfo.style.paddingLeft = "5px";
        newDivinputinfo.style.paddingRight = "5px";

        var newSpaninputinfotxt = document.createElement("span");
        newSpaninputinfotxt.setAttribute("id", VP_dsgvo_consent_idspaninputinfo + "-" + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][0]);
        // newSpaninputinfotxt.classList.add("VP-dsgvo-consent-classspaninputinfotxt");
        var newSpaninputinfotxtnode = document.createTextNode(VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][3]);
        newSpaninputinfotxt.appendChild(newSpaninputinfotxtnode);
        newDivinputinfo.appendChild(newSpaninputinfotxt);

        newDivinput.appendChild(newDivinputinfo);
        newDivmaininput.appendChild(newDivinput);
    }
    newDivmain.appendChild(newDivmaininput);
    // div div div main div input radio end

    // div div div main div button begin
    var newDivbutton = document.createElement("div");
    newDivbutton.setAttribute("id", VP_dsgvo_consent_iddivbutton);
    // newDivbutton.classList.add("VP-dsgvo-consent-classdivbutton");
    newDivbutton.style.marginTop = "10px";
    newDivbutton.style.marginBottom = "10px";

    var newButtonok = document.createElement("button");
    newButtonok.onclick = function(){VP_dsgvo_consent_check_function()};
    newButtonok.setAttribute("id", VP_dsgvo_consent_iddivbuttonbutton);
    // newButtonok.classList.add("VP-dsgvo-consent-classdivbutton");
    newButtonok.style.fontSize = "2em";
    newButtonok.style.cursor = "pointer";

    var newButtonoktxt = document.createTextNode(VP_dsgvo_consent_myinput_text_array[VP_dsgvo_consent_language_default][3]);
    newButtonok.appendChild(newButtonoktxt);

    newDivbutton.appendChild(newButtonok);
    newDivmain.appendChild(newDivbutton);
    // div div div main div button end

    // div div p foot begin
    var newPfoot = document.createElement("p");
    newPfoot.setAttribute("id", VP_dsgvo_consent_idpfoot);
    // newPfoot.classList.add("VP-dsgvo-consent-classpfoot");
    newPfoot.style.fontSize = "1em";
    newPfoot.style.marginTop = "10px";
    newPfoot.style.marginBottom = "10px";
    // div div p foot end

    // div div p foot span begin
    for (var i = 0; i < VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default].length; i++) {
        var ilist = i + 1;
        
        var newSpanfoot = document.createElement("span");
        newSpanfoot.setAttribute("id", VP_dsgvo_consent_idspanfoot + i);
        // newSpanfoot.classList.add("VP-dsgvo-consent-classspanfoot");
        newSpanfoot.style.display = "block";
        newSpanfoot.style.marginBottom = "1px";

        // div div p foot span txt textnode begin
        // var newSpanfoottxtnode = document.createTextNode(VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][1] + ":\u00A0" + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][2] + ".");
        var newSpanfoottxtnode = document.createTextNode(ilist + ".) " + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][2] + ".");
        newSpanfoot.appendChild(newSpanfoottxtnode);
        // div div p foot span txt textnode end

        newPfoot.appendChild(newSpanfoot);
    }
    // div div p foot span end

    // div div p foot a span begin
    var newAfoot = document.createElement('span');
    newAfoot.onclick = function(){VP_dsgvo_consent_data_open_function(VP_dsgvo_consent_language_default)};
    newAfoot.setAttribute("id", VP_dsgvo_consent_idafoot);
    // newAfoot.classList.add("VP-dsgvo-consent-classafoot");
    newAfoot.title = VP_dsgvo_consent_myinput_foot_array[VP_dsgvo_consent_language_default][0];
    newAfoot.style.cursor = "pointer";
    newAfoot.style.color = "#0000ff";
    newAfoot.style.textDecoration = "underline";

    var newAfoottxt = document.createTextNode(VP_dsgvo_consent_myinput_foot_array[VP_dsgvo_consent_language_default][0]);
    newAfoot.appendChild(newAfoottxt);
    newPfoot.appendChild(newAfoot);
    // div div p foot a span end
    // div div p foot end

    // appendChild begin
    document.body.appendChild(newDiv);
    newDiv.appendChild(newDivi);
    newDivimg.appendChild(newSpanimglangen);
    newDivimg.appendChild(newSpanimglangde);
    newDivi.appendChild(newDivimg);
    newDivi.appendChild(newPhead);
    newPhead.appendChild(newSpanheadtxt);
    newSpanheadtxt.appendChild(newSpanheadtxtnode);
    newPhead.appendChild(newSpanheaddomain);
    newSpanheaddomain.appendChild(newTextnodeheaddomain);
    newDivi.appendChild(newDivmain);
    newDivi.appendChild(newPfoot);
    // appendChild end
}
// CREATE THE CONSENT POPUP END

// PRIVACY POLICY TEXT POPUP BEGIN
function VP_dsgvo_consent_data_open_function(lang) {
        
    // PRIVACY POLICY TEXT data div begin
    var newDivdata = document.createElement("div");
    newDivdata.setAttribute("id", VP_dsgvo_consent_iddivdata);
    // PRIVACY POLICY TEXT newDivdata.classList.add("VP-dsgvo-consent-classdivdata");
    newDivdata.style.position = "absolute";
    newDivdata.style.left = "0";
    newDivdata.style.right = "0";
    newDivdata.style.top = "0";
    newDivdata.style.display = "block";
    newDivdata.style.margin = "0 auto";
    newDivdata.style.width = "100%";
    // newDivdata.style.height = "100%";
    newDivdata.style.textAlign = "center";
    newDivdata.style.boxSizing = "border-box";
    newDivdata.style.padding = "10px";
    newDivdata.style.color = "#000000";
    newDivdata.style.fontFamily = "monospace";
    newDivdata.style.fontStyle = "normal";
    newDivdata.style.fontSize = "1em";
    newDivdata.style.fontWeight = "bold";
    newDivdata.style.fontVariant = "normal";
    newDivdata.style.backgroundColor = "rgba(255, 255, 255, 1)";
    // newDivdata.style.opacity = "1.0";
    newDivdata.style.WebkitAlignItems = "center";
    newDivdata.style.alignItems = "center";
    // PRIVACY POLICY TEXT data div end

    // PRIVACY POLICY TEXT data div p begin
    var newPdata = document.createElement("p");
    newPdata.setAttribute("id", VP_dsgvo_consent_idpdata);
    // PRIVACY POLICY TEXT newPdata.classList.add("VP-dsgvo-consent-classpdata");
    newPdata.style.textAlign = "left";

    newDivdata.appendChild(newPdata);
    // PRIVACY POLICY TEXT data div p begin

    // PRIVACY POLICY TEXT data div button begin
    var newButtondata = document.createElement('button');
    newButtondata.onclick = function(){VP_dsgvo_consent_data_close_function()};
    newButtondata.setAttribute("id", VP_dsgvo_consent_idbuttondata);
    // PRIVACY POLICY TEXT newButtondata.classList.add("VP-dsgvo-consent-classbuttondata");
    newButtondata.style.fontSize = "2em";
    newButtondata.style.cursor = "pointer";
    newButtondata.style.marginBottom = "50px";

    var newButtondatatxt = document.createTextNode(VP_dsgvo_consent_myinput_foot_array[lang][2]);
    newButtondata.appendChild(newButtondatatxt);

    newDivdata.appendChild(newButtondata);
    // PRIVACY POLICY TEXT data div button end

    // PRIVACY POLICY TEXT append all in the body
    document.body.appendChild(newDivdata);

    // PRIVACY POLICY TEXT div p innerHTML begin
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById(VP_dsgvo_consent_idpdata).innerHTML = this.responseText;
        }
    };
    xhttp.open("GET", VP_dsgvo_consent_myinput_foot_array[lang][1], true);
    xhttp.send();
    // PRIVACY POLICY TEXT div p innerHTML end
}
// PRIVACY POLICY TEXT POPUP END

// CLOSE PRIVACY POLICY TEXT
function VP_dsgvo_consent_data_close_function() {
    var newDivdata = document.getElementById(VP_dsgvo_consent_iddivdata);
    newDivdata.parentNode.removeChild(newDivdata);
}

// ----------------------------------------------------------------------------------
// ----------------------------------------------------------------------------------
// CUSTOMIZE THE CONSENT CHECKER AREA BEGIN
// You can here expand the script with write a new function.
// ----------------------------------------------------------------------------------
// ----------------------------------------------------------------------------------

// CHECK CONSENT POPUP INPUT EASY
function VP_dsgvo_consent_check_function_easy() {
    
    var input_radio_check = {};
    for (var i = 0; i < VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default].length; i++) {
    
        input_radio_check_yes = document.getElementById(VP_dsgvo_consent_input_id_yes + "-" + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][0]).checked;
        input_radio_check_no = document.getElementById(VP_dsgvo_consent_input_id_no + "-" + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][0]).checked;
        
        var input_radio_check_yesno = {
        yes: input_radio_check_yes,
        no: input_radio_check_no
        };
        
        input_radio_check[VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][0]] = input_radio_check_yesno;
    }
    
    VP_dsgvo_consent_cookie_saving_function(input_radio_check);
    VP_dsgvo_consent_script_loading_function(input_radio_check);
    VP_dsgvo_consent_close_function();
}

// CHECK CONSENT POPUP INPUT STRONG
function VP_dsgvo_consent_check_function_strong() {
    
    var input_radio_check = {};
    var input_radio_check_sum = 0;
    for (var i = 0; i < VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default].length; i++) {
    
        input_radio_check_yes = document.getElementById(VP_dsgvo_consent_input_id_yes + "-" + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][0]).checked;
        input_radio_check_no = document.getElementById(VP_dsgvo_consent_input_id_no + "-" + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][0]).checked;
        
        var input_radio_check_yesno = {
        yes: input_radio_check_yes,
        no: input_radio_check_no
        };

        input_radio_check[VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][0]] = input_radio_check_yesno;        
        
        if (input_radio_check[VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][0]]["yes"] && input_radio_check[VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][0]]["no"]) {
            
        } else if (input_radio_check[VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][0]]["yes"] || input_radio_check[VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][0]]["no"]) {
            document.getElementById(VP_dsgvo_consent_iddivinput + "-" + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][0]).style.backgroundColor = "#ffffff";
            document.getElementById(VP_dsgvo_consent_iddivinput + "-" + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][0]).style.color = "#000000";
            document.getElementById(VP_dsgvo_consent_idspanfoot + "0").style.backgroundColor = "#ffffff";
            document.getElementById(VP_dsgvo_consent_idspanfoot + "0").style.color = "#000000";
            document.getElementById(VP_dsgvo_consent_idspanfoot + "1").style.backgroundColor = "#ffffff";
            document.getElementById(VP_dsgvo_consent_idspanfoot + "1").style.color = "#000000";
            
            input_radio_check_sum++;
            
        } else {
            document.getElementById(VP_dsgvo_consent_iddivinput + "-" + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][0]).style.backgroundColor = "#ff0000";
            document.getElementById(VP_dsgvo_consent_iddivinput + "-" + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][i][0]).style.color = "#ffffff";
        }
    }
    
    if ((input_radio_check[VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][0][0]]["yes"] && input_radio_check[VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][1][0]]["yes"])) {
        VP_dsgvo_consent_cookie_saving_function(input_radio_check);
        VP_dsgvo_consent_script_loading_function(input_radio_check);
        VP_dsgvo_consent_close_function();
    } else if ((!input_radio_check[VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][0][0]]["yes"] || !input_radio_check[VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][1][0]]["yes"])) {
        if (!input_radio_check[VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][0][0]]["yes"] && !input_radio_check[VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][1][0]]["yes"]) {
            document.getElementById(VP_dsgvo_consent_iddivinput + "-" + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][0][0]).style.backgroundColor = "#ff0000";
            document.getElementById(VP_dsgvo_consent_iddivinput + "-" + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][0][0]).style.color = "#ffffff";
            document.getElementById(VP_dsgvo_consent_iddivinput + "-" + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][1][0]).style.backgroundColor = "#ff0000";
            document.getElementById(VP_dsgvo_consent_iddivinput + "-" + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][1][0]).style.color = "#ffffff";
            document.getElementById(VP_dsgvo_consent_idspanfoot + "0").style.backgroundColor = "#ff0000";
            document.getElementById(VP_dsgvo_consent_idspanfoot + "0").style.color = "#ffffff";
            document.getElementById(VP_dsgvo_consent_idspanfoot + "1").style.backgroundColor = "#ff0000";
            document.getElementById(VP_dsgvo_consent_idspanfoot + "1").style.color = "#ffffff";
        } else if (!input_radio_check[VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][0][0]]["yes"]) {
            document.getElementById(VP_dsgvo_consent_iddivinput + "-" + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][0][0]).style.backgroundColor = "#ff0000";
            document.getElementById(VP_dsgvo_consent_iddivinput + "-" + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][0][0]).style.color = "#ffffff";
            document.getElementById(VP_dsgvo_consent_idspanfoot + "0").style.backgroundColor = "#ff0000";
            document.getElementById(VP_dsgvo_consent_idspanfoot + "0").style.color = "#ffffff";
        } else if (!input_radio_check[VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][1][0]]["yes"]) {
            document.getElementById(VP_dsgvo_consent_iddivinput + "-" + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][1][0]).style.backgroundColor = "#ff0000";
            document.getElementById(VP_dsgvo_consent_iddivinput + "-" + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][1][0]).style.color = "#ffffff";
            document.getElementById(VP_dsgvo_consent_idspanfoot + "1").style.backgroundColor = "#ff0000";
            document.getElementById(VP_dsgvo_consent_idspanfoot + "1").style.color = "#ffffff";
        }
    }
}

// ----------------------------------------------------------------------------------
// ----------------------------------------------------------------------------------
// CUSTOMIZE THE CONSENT CHECKER AREA END
// ----------------------------------------------------------------------------------
// ----------------------------------------------------------------------------------

// CHECK CONSENT POPUP INPUT
function VP_dsgvo_consent_check_function() {
    
    if (VP_dsgvo_consent_check_level === 0) {
    VP_dsgvo_consent_check_function_easy();
    }
    
    if (VP_dsgvo_consent_check_level === 1) {
    VP_dsgvo_consent_check_function_strong();
    }
    
}

// CLOSE CONSENT POPUP
function VP_dsgvo_consent_close_function() {
    var newDiv = document.getElementById(VP_dsgvo_consent_iddiv);
    newDiv.parentNode.removeChild(newDiv);
}

// SAVE COOKIES
function VP_dsgvo_consent_cookie_saving_function(checker) {
    
    var consent_name_array = Object.keys(checker);
    
    for (var i = 0; i < consent_name_array.length; i++) {
        if (checker[consent_name_array[i]]["yes"]) {
            var cookiekey_consent_name = VP_dsgvo_consent_cookiekey_consent + consent_name_array[i];
            var cookiekeyvalue_consent = cookiekey_consent_name + "=" + VP_dsgvo_consent_cookievalue_consent;
            var cookie = cookiekeyvalue_consent + ";" + VP_dsgvo_consent_cookiekeyvalue_expires + ";" + VP_dsgvo_consent_cookiekeyvalue_domain + ";" + VP_dsgvo_consent_cookiekeyvalue_path + ";";
            document.cookie = cookie;
        }
    }
}

// WAIT FOR LOAD CONSENT POPUP
function VP_dsgvo_consent_function_waitforbody() {
    if(document.body) {
        VP_dsgvo_consent_function();
    }
    else {
        setTimeout(function() {
            VP_dsgvo_consent_function_waitforbody();
        }, 100);
    }
}

// ----------------------------------------------------------------------------------
// ----------------------------------------------------------------------------------
// CUSTOMIZE THE COOKIE CHECKER AREA BEGIN
// ----------------------------------------------------------------------------------
// ----------------------------------------------------------------------------------

// COOKIE CHECKER
function VP_dsgvo_consent_check_cookie_function() {
    
    var result = false;
    var cookies_check = false;
    var privacypolicy_check = false;
    
    var check_cookiekey_consent_name_cookies = VP_dsgvo_consent_cookiekey_consent + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][0][0];
    // var check_cookiekeyvalue_consent_cookies = check_cookiekey_consent_name_cookies + "=" + VP_dsgvo_consent_cookievalue_consent;
    // var check_cookie_cookies = check_cookiekeyvalue_consent_cookies;
    
    var check_cookiekey_consent_name_privacypolicy = VP_dsgvo_consent_cookiekey_consent + VP_dsgvo_consent_myinput_consent_array[VP_dsgvo_consent_language_default][1][0];
    // var check_cookiekeyvalue_consent_privacypolicy = check_cookiekey_consent_name_privacypolicy + "=" + VP_dsgvo_consent_cookievalue_consent;
    // var check_cookie_privacypolicy = check_cookiekeyvalue_consent_privacypolicy;
    
    var allcookies = document.cookie;
    var allcookies_replace = allcookies.replace(/[\s\uFEFF\xA0]/g, "");
    var allcookies_split = allcookies_replace.split(";");
    
// LEVEL CHECKER BEGIN
// You can here expand the script with new "if" check BEGIN

    for (var i = 0; i < allcookies_split.length; i++) {
        var cookie_split = allcookies_split[i].split("=");
        if ((cookie_split[0] === check_cookiekey_consent_name_cookies) && (cookie_split[1] === VP_dsgvo_consent_cookievalue_consent)) {
            var cookies_check = true;
        }
    }

    for (var i = 0; i < allcookies_split.length; i++) {
        var cookie_split = allcookies_split[i].split("=");
        if ((cookie_split[0] === check_cookiekey_consent_name_privacypolicy) && (cookie_split[1] === VP_dsgvo_consent_cookievalue_consent)) {
            var privacypolicy_check = true;
        }
    }
    // 0 = VP_dsgvo_consent_check_function_easy()
    if (VP_dsgvo_consent_check_level === 0) {
        if (cookies_check) {
            result = true;
        }
    }
    
    // 1 = VP_dsgvo_consent_check_function_strong()
    if (VP_dsgvo_consent_check_level === 1) {
        if (cookies_check && privacypolicy_check) {
            result = true;
        }
    }
    
// You can here expand the script with new "if" check END
// LEVEL CHECKER END
    
    return result;
}

// ----------------------------------------------------------------------------------
// ----------------------------------------------------------------------------------
// CUSTOMIZE THE COOKIE CHECKER AREA END
// ----------------------------------------------------------------------------------
// ----------------------------------------------------------------------------------

// LOAD CONSENT POPUP IF COOKIE CHECKER = false
if (!VP_dsgvo_consent_check_cookie_function()) {
    VP_dsgvo_consent_function_waitforbody();
}


Consent Popup download container:
Download the GDPR Consent Popup JavaScript here: dsgvo-consent-0-0-1.zip (11 kb)
Please embedded it in the <head> of your html document.

<head>
<script src="dsgvo-consent.js"></script>
</head>


Support Penultima.de
PayPal Gefällt Mir Button
© Penultima.de - All rights reserved. Data protection statement & Imprint & Contact