GDPR Consent plugin?

Discussion in 'Plugin Requests' started by kapearl, Jun 20, 2018.

  1. kapearl

    kapearl Member

    Maybe this would be better as a core feature request or general help but a cookie consent banner for the wrapper and gateway page is now necessary it seems.

    I have a snippet of code from one of my advertisers that offers a free CMP for their clients that I placed in the wrapper and gateway that didn't work. Forgot it needed a plugin to render so I thought I throw it out here if there is another way. It's been so long since I've worked on the site I've forgotten how to make a plugin. Or how are other people adding the consent banners?
  2. Mark
    • Staff

    Mark Administrator Staff Member

    I can make this plugin no problem, feel free to make some recommendations or examples of good ones. Very few websites I visit actually have these (I suspect maybe only shown to EU visitors) so I'm not sure what makes a good consent banner VS a not so good one.
  3. kapearl

    kapearl Member

    Thanks Mark! Here's one: https://www.insidebeer.com/

    It's fairly simple. Personally I like simple. The link to the cookie site is nice for people who want to find out more.

    Ideally, it would be great if it only showed for EU visitors but I have no idea what that entails. The system that I wasn't able to implement had a option to not show the banner to that person again for a certain amount of days. So if it shows up for everyone is there a way to hide it for a while once they accept? Or hide after scrolling so return users can get away from it quicker.

    I've seen sites that have these and all sorts of tracking is loading in the background while the banner is up. I was under the impression that the the banner should halt all cookie loading until scrolling or clicking OK. Like this one: https://www.independent.co.uk/us. They have a consent banner but everything (ad tracking, analytics, etc) has loaded before clicking I accept.
  4. Morus

    Morus www.votezone.eu , www.privateserversranking.com

    Mark likes this.
  5. kapearl

    kapearl Member

    Thanks Morus! That one worked.
    Mark likes this.
  6. Mark
    • Staff

    Mark Administrator Staff Member

    All good with that then? :)
  7. kapearl

    kapearl Member

    I'm new to this but that seems to do the trick!
    cajkan likes this.
  8. joseveiga
    • Licensed

    joseveiga New Member

    Hi Mark,

    1)
    Related to this data protection issue (GDPR / GPRD in Portugal), there must be a checkbox on each form (Add Site Form, Contact Form).
    This checkbox must be required to submit the form, with a link to the Privacy Policy page, like this: "I agree to allow this website to store and process my personal data. For more information on how we are committed to protecting and respecting your privacy, please review our Privacy Policy."

    I am sure this will be important for all VisioList users.

    Are you available to make this important change?

    2)
    And about cookies, which cookies does the script use and how are they stored?

    Thanks.

    Best regards,
    Jose Veiga
    cajkan likes this.
  9. Basti
    • Staff

    Basti Administrator Staff Member

    1) make use of your custom join forms in admin area
    A link is not possible at this moment, but you could place the link manually right after the tag where you place this element.
    e.g if you on vl 1.6 ( i hope ), make your custom join form element in admin, remember the field id you use. replace my_field_id in the below with it.
    - {$form_acf_my_field_id}
    That you paste into your join form and place the html link afterwards

    - If you get double fields, remove {$join_website_extra} and place all the fields you had before in the same manner as this new one.
    - VL 1.7 will have the automatic placement completely disabled in favor of manual placement like above

    2) How they are stored? on the users pc as every cookie on the web
    On a serious note, any cookie VL uses stores nothing but a hashed string, which we use to identify certain information stored in the database

    This is based on VL 1.6

    cookie we generate, data we store:
    1) voting, when you vote, only if you have the gateway page enabled, a cookie is generated, which is used to validate the request came from the gatway once you click submit.
    - After voteing, successfull or not, it is deleted right away.
    - Voting stores the users ip in the database to make sure he cant vote on the same day again. Each day this log is cleared

    2) Admin area, hashed string stored in cookie and database to identify logged in admin, but that really isnt important for visitors

    3) User panel, same as admin, an hashed string saved in the cookie and database to cross check the user is logged in.
    - This data is cleared when user logs out
    --- Or the user was inactive for 1 hour and not have "stay logged in" checked.
    --- Or the user was inactive for 30 days and have checked "stay logged in"

    4) User panel, if the user activated any 2 step authentication ( email, google auth )
    - Once he login, this cookie again only an hashed string saved in cookie and database. It is used to remember the state of the login ( which login step )
    - this is cleared after successful login or after an hour if not used.

    5) our buildin captcha ( not the recaptcha, adscaptcha )
    - on image generation, hashed ip + string to validate the captcha after clicking submit
    - Cleared after each submit or after 1 hour inactive

    6) Any third party script ( adsense, tracker whatever ), stores cookies usually. You have to check that seperately

    7) VL 1.7 will have a few additional cookies used to prevent cross site scripting, but that is of no importance for now.
    Last edited: Oct 9, 2019
    Mark likes this.
  10. joseveiga
    • Licensed

    joseveiga New Member

    Hi Basti,

    I thank you for the information.
    The changes are made, however, the checkbox should be next to the text, as the image I attached.
    Do you think it's possible to do this?

    Best regards,
    Jose Veiga

    Attached Files:

  11. joseveiga
    • Licensed

    joseveiga New Member

    Another question related to the custom field:

    I marked the checkbox as a required field, however, something is not working properly as it will not submit the form even with the checkbox selected.
    Will I have to make any more changes?

    Thanks.
  12. Basti
    • Staff

    Basti Administrator Staff Member

    You/We have set it up wrong. Go edit your custom field. What you inserted is just the label. Thats why it is above and the required field is not working. The label is the heading to the field ( weather a single input or choice fields )

    You actually have not added any options
    Select/radio/checkboxes are makeing use of the tab called "Field choice options", since all these are multiple choices

    So add your text there instead of the label, the label you can keep empty, or make it something like "Accept our pricacy"
    then in the option itself, give the left input anything really, like "yes", this is just the value stored in the database
    the right input gets the text you currently have in the label

    That will fix the display and require issue.


    Now for your link, just surround it with a div + id
    Code:
    <div id="privacy-link-container">
         <a href="http_link">blabla</a>
    </div>
    Next up open your user.css file and add this. Adjust the pixel value to your needs
    Code:
    #privacy-link-container {
        margin-top: 30px;
    }
  13. joseveiga
    • Licensed

    joseveiga New Member

    Hi Basti,

    Once again, thank you very much for the support!

    I've already made the changes, but it might not be all right yet, as the custom field is not appearing as required - see the image, after click on submit form.

    Can you help me again?

    Thanks.

    Best regards

    Attached Files:

  14. Basti
    • Staff

    Basti Administrator Staff Member

    Did you actually check it in edit custom field and made it required? on the first tab is a checkbox for it
  15. joseveiga
    • Licensed

    joseveiga New Member

    Hi Basti,

    Yes, the field is checked as required (see capture).

    I tried to submit the form, but there is an error after submission attempt (see capture).

    Can you help me, please?

    Thanks. error_after_submition.jpg required_field.jpg
  16. Basti
    • Staff

    Basti Administrator Staff Member

    Please let me know your web url
  17. joseveiga
    • Licensed

    joseveiga New Member

  18. Basti
    • Staff

    Basti Administrator Staff Member

    Ok, all is working, but your skin is not fully bootstrap 4 compatible, we need to modify the html a bit.

    1) go into your skins folder default
    2) edit form_elements/checkbox_option.html and replace content inside with this
    Code:
    <div class="custom-control custom-checkbox">
        <input type="checkbox" name="{$element_name}[]" value="{$element_option_value}" id="{$element_option_id}" class="custom-control-input {$element_error_style}" {$element_option_checked}>
        <label class="custom-control-label" for="{$element_option_id}">{$element_option_label}</label>
    </div>
    3) now, #2 above would turn the checkbox and the text red, but we are still missing the "this field is required" message, that is cause bootstrap by default is not setup for it and hides the element
    open your user.css and add this
    Code:
    .checkbox-group .invalid-feedback, .custom-control~.invalid-feedback, .radio-group .invalid-feedback {
        display: block;
    }
    Your skin additionally has a few placement errors, namely all the error style classes
    1) open join_form.html and replace content with this.
    - Notice, the error tags {$error_style_username} for example, all moved from the containing "form-group" onto the input itself, that is required for bootstrap 4
    Code:
    <script type="text/javascript">
    function showOwner (ownerbox, box, regform) {
    var vis = (box.checked) ? "block" : "none";
    var vis2 = (box.checked) ? "none" : "block";
    document.getElementById(ownerbox).style.display = vis;
    document.getElementById(regform).style.display = vis2;
    }
    
        function checkPass(){
          //Store the password field objects into variables ...
          var password1 = document.getElementById('join_password');
          var confirm_password = document.getElementById('join_confirm_password');
          var message = document.getElementById('confirmMessage');
          var goodColor = "#66cc66";
          var badColor = "#ff6666";
          if(password1.value == confirm_password.value){
            confirm_password.style.backgroundColor = goodColor;
            message.style.color = goodColor;
            message.innerHTML = "{$lng->join_password_match}"
          }else{
            confirm_password.style.backgroundColor = badColor;
            message.style.color = badColor;
            //message.innerHTML = '<img src="skins/default/img/icons/delete.png" alt="{$lng->join_password_match_error}">'
            message.innerHTML = '{$lng->join_password_match_error}'
          }
        }
    </script>
    
    
    
    <script type="text/javascript">
    $( document ).ready(function() {
    
        // validate signup form on keyup and submit
        $("#signupForm").validate({
            rules: {
                u: "required",
                url: "required",
                title: "required",
                username: {
                    required: true,
                    minlength: 2
                },
                password: {
                    required: true,
                    minlength: 3
                },
                confirm_password: {
                    required: true,
                    minlength: 3,
                    equalTo: "#join_password"
                },
                email: {
                    required: true,
                    email: true
                }
            },
            messages: {
                u: " *",
                url: " *",
                title: " *",
                username: {
                    required: " *",
                    minlength: " *"
                },
                password: {
                    required: " *",
                    minlength: ' {$lng->join_password_match_error}'
                },
                confirm_password: {
                    required: " *",
                    minlength: " *",
                    equalTo: ""
                },
                email: "*"
            }
        });
    
    });
    </script>
    
    <style type="text/css">
    
    .error {
        color:red;
        display: inline;
    }
    </style>
    
    
    
    <fieldset>
        <legend><b>Já tem uma conta de Membro?</b></legend>
        {$lng->g_already} <input type="checkbox" id="owner" name="owner" onclick="showOwner('ownerbox', this, 'regform')"/>
        <div id="ownerbox" style="display: none;">
    
            <form action="{$list_url}/index.php?a=user_cpl" method="post">
                <label>{$lng->g_username}</label>
                <input name="u" size="20" type="text"  class="form-control"/>
                <label>{$lng->g_password}</label>
                <input name="password" size="20" type="password" class="form-control"><br/>
                <label><input type="checkbox" name="keep_alive" id="keep_alive" /> {$lng->remember_me}</label>
    
                <button class="btn btn-primary" name="submit" type="submit">{$lng->user_cp_login}</button> <a href="{$list_url}/index.php?a=lost_pw" class="btn btn-secondary">{$lng->lost_pw_set_new}</a>
            </form>
    
        </div>
    </fieldset>
    
    <p class="{$error_style_top}">{$error_top}</p>
    
    <form action="{$list_url}/{$url_helper_a}join{$url_tail}" method="post" name="join_form" id="signupForm">
      <div id="regform" style="display: block">
    
        <fieldset>
            <legend>{$lng->join_user}</legend>
            <div class="row">
              <div class="col">
                <div class="form-group">
                <label for="join_username">{$lng->g_username}</label>
                <input type="text" name="u" size="20" value="{$username}"  class="form-control {$error_style_username}"/>
                {$error_username}
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col">
                <div class="form-group">
                <label for="join_password">{$lng->g_password}</label>
                <input type="password" name="password"  onkeyup="checkPass(); return false;" id="join_password"  class="form-control {$error_style_password}"/>
                </div>
              </div>
    
              <div class="col">
                <div class="form-group">
                <label for="join_confirm_password">{$lng->join_confirm_password}</label>
                <input type="password" name="confirm_password"  class="form-control {$error_style_password}" onkeyup="checkPass(); return false;" id="join_confirm_password" />
                <span id="confirmMessage" class="confirmMessage"></span>
                {$error_password}
              </div>
              </div>
            </div>
    
            {$join_user_extra}
        </fieldset>
    
        <fieldset>
          <legend>{$lng->join_website}</legend>
          <div class="row">
            <div class="col">
    
                <div class="form-group">
                    <label for="join_url">{$lng->g_url}</label>
                    <input type="text" name="url" value="{$url}" id="join_url" class="form-control {$error_style_url}" placeholder="http://" />
                    {$error_url}
                </div>
    
                <div class="form-group">
                    <label for="join_title">{$lng->g_title}</label>
                    <input type="text" name="title" value="{$title}" id="join_title"  class="form-control {$error_style_title}"/>
                    {$error_title}
                </div>
    
                <div class="form-group">
                <label for="join_description">{$lng->g_description}</label>
                    <textarea cols="50" rows="5" name="description" id="join_description" class="form-control">{$description}</textarea>
                </div>
    
                <div class="form-group">
                <label for="join_category">{$lng->g_category}</label>
                    {$categories_menu}
                </div>
    
                <div class="form-group">
                    <label for="join_email">{$lng->g_email}</label>
                    <input type="text" name="email" value="{$email}" id="join_email" class="form-control {$error_style_email}" />
                    {$error_email}
                </div>
    
            </div>
            <div class="col">
                {$join_captcha}
                {$join_recaptcha}
                {$join_adscaptcha}
                {$join_question}
                {$join_security_extra}
                {$form_acf_rgpd_novomembro}
                <div id="privacy-link-container">
                    <a href="http://topsites.avespt.com/?a=page&id=rgpd">Ler a PolÃtica de Privacidade</a>
                </div>
            </div>
    
          </div>
    
            <div>
                <div id="capbag"> </div>
                <div id="capops"> </div>
            </div>
            <div id="submitButtonDiv"><br>
                <button class="btn btn-primary" name="submit" type="submit">{$lng->join_header}</button>
            </div>
    
        </fieldset>
    
      </div>
    </form>
    
    2) your captcha image has the same issue, in join_captcha.html remove the {$error_style_captcha} from the form-group and place it onto the input itself


    3) You propbably have to perform the same steps for join_form_existing.html and edit_form.html, you need to move all error style classes from form-group onto the input itself
    - same steps as #2 for captcha, just different error style tags
    Last edited: Oct 18, 2019
  19. joseveiga
    • Licensed

    joseveiga New Member

    Hi Basti,

    Done and working!
    Thank you very much!

    Best regards
    cajkan likes this.
  20. cajkan

    cajkan Active Member

    It might be good to somehow track IF users are from EU then to display the message, coz you might/will annoy other people who live in different countries

Share This Page