Bootstrap-Cookie-Manager

A simple cookie banner based from Bootstrap-Cookie-Alert but with the possibility to manage the type of cookies in a bootstrap modal.

Demo

You can view a live demo here.

Requires :

• Bootstrap v4+ with JQuery v3+
• Bootstrap4-toggle

Installation

Several options are available:

• Download ZIP
• Clone the repository: git clone https://github.com/OlivierR68/Bootstrap-Cookie-Manager.git
• Install with npm: npm install bootstrap-cookie-manager
• Install via CDN(jsDelivr):

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/cookie-manager.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/cookie-manager.min.js"></script>

Usage

1. In the head of your document, include cookie-manager.css after Bootstrap & Bootstrap4-toggle.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/cookie-manager.css">

2. Add the html markup :

<!-- START Cookie Manager -->

<!-- Alert -->
<div class="alert text-justify" id="cookieAlert" role="alert">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-10">
                <h5>Your privacy is our priority</h5>
                <p class="small">
                    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus eligendi facere illum modi non optio quas rem suscipit? A distinctio illo illum in labore magnam minus molestiae obcaecati quaerat ut.</span>
                    <span>Amet beatae, commodi corporis deleniti dolor dolores eaque error eum expedita explicabo hic incidunt ipsa iusto maxime neque nihil numquam pariatur perspiciatis praesentium quae sapiente similique soluta sunt vero voluptate.</span>
                </p>
            </div>
            <div class="col-md-2 text-center d-flex flex-column justify-content-center">
                <div class="mb-1">
                    <button type="button" class="btn btn-primary btn-sm w-100" id="cookieAcceptAll">
                        I Accept
                    </button>
                </div>
                <div>
                    <button type="button" class="btn btn-light btn-sm w-100" data-toggle="modal"
                            data-target="#cookieModal">
                        More options
                    </button>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="cookieModal" tabindex="-1" role="dialog" aria-labelledby="cookieModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="cookieModalLabel">
                    Manage Cookies
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

                <!--                
                Add here as much form-group you want, you just need to use a checkbox input with a data-cookie-name attributes,
                the script will generate a cookie with the data-cookie-name with a value of true if checked and false if unchecked.              
                -->

                <!-- Analytics form group -->
                <div class="form-group">
                    <input type="checkbox" id="cookieAnalytics" data-cookie-name="cookie_analytics" checked data-toggle="toggle" data-size="xs">
                    <label class="ml-1" for="cookieAnalytics">Analytics Cookies</label>
                    <small class="form-text text-muted">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam at est explicabo ipsa, laborum molestiae nihil numquam possimus voluptatem? Deserunt dolorum excepturi harum provident quaerat sapiente voluptatem. Magni, perspiciatis!
                    </small>
                </div>

                <!-- Advertising form group -->
                <div class="form-group">
                    <input type="checkbox" id="cookieAdvertising" data-cookie-name="cookie_advertising" checked data-toggle="toggle" data-size="xs">
                    <label class="ml-1" for="cookieAdvertising">Advertising Cookies</label>
                    <small class="form-text text-muted">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolores enim error nisi quae, repellat saepe ullam voluptates. Ab aliquid dicta error harum magni nisi porro quae quaerat vitae voluptas.
                    </small>
                </div>

                <!-- Essentiels form group -->
                <div class="form-group">
                    <input type="checkbox" id="cookieEssentials" data-cookie-name="cookie_essentials" checked data-toggle="toggle" data-size="xs" disabled>
                    <label class="ml-1" for="cookieEssentials">Essentials Cookies</label>
                    <small class="form-text text-muted">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores excepturi laboriosam unde. Quam saepe, sunt? Adipisci dolor eos ex fugiat ipsa itaque magni necessitatibus, obcaecati qui recusandae rem reprehenderit sed!
                    </small>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="cookieSave">
                    Save & Exit
                </button>
            </div>
        </div>
    </div>
</div>
<!-- END Cookie Manager -->

3. Include the cookie-manager.js after Bootstrap and Bootstrap4-toggle JavaScript

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/cookie-manager.js">

4. Call this single function

$(document).ready( function () {
    cookiesManager();
});

5. Options : you can add parameters to the function.

• 1st argument is the lifetime in days of the cookies (365 by default)
• 2nd argument is the prefix of the cookie generated (no prefix by default).

$(document).ready( function () {
    cookiesManager(1, 'demo_');
});

Example if i use the snippet above and the html markup from 2nd step the script will generate these cookies with a lifetime of 1 day :

• demo_cookie_accept
• demo_cookie_analytics
• demo_cookie_advertising
• demo_cookie_essentials