Display GDPR Compliant Cookie Consent Popup Using jQuery Plugin – jquery.ihavecookies.js

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.ihavecookies.min.js"></script>

 /* Cookie Dialog */
    #gdpr-cookie-message {
        position: fixed;
        right: 30px;
        bottom: 30px;
        max-width: 375px;
        background-color: var(--purple);
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 6px 6px rgba(0,0,0,0.25);
        margin-left: 30px;
        font-family: system-ui;
    }
    #gdpr-cookie-message h4 {
        color: var(--red);
        font-family: 'Quicksand', sans-serif;
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 10px;
    }
    #gdpr-cookie-message h5 {
        color: var(--red);
        font-family: 'Quicksand', sans-serif;
        font-size: 15px;
        font-weight: 500;
        margin-bottom: 10px;
    }
    #gdpr-cookie-message p, #gdpr-cookie-message ul {
        color: white;
        font-size: 15px;
        line-height: 1.5em;
    }
    #gdpr-cookie-message p:last-child {
        margin-bottom: 0;
        text-align: right;
    }
    #gdpr-cookie-message li {
        width: 49%;
        display: inline-block;
    }
    #gdpr-cookie-message a {
        color: var(--red);
        text-decoration: none;
        font-size: 15px;
        padding-bottom: 2px;
        border-bottom: 1px dotted rgba(255,255,255,0.75);
        transition: all 0.3s ease-in;
    }
    #gdpr-cookie-message a:hover {
        color: white;
        border-bottom-color: var(--red);
        transition: all 0.3s ease-in;
    }
    #gdpr-cookie-message button {
        border: none;
        background: var(--red);
        color: white;
        font-family: 'Quicksand', sans-serif;
        font-size: 15px;
        padding: 7px;
        border-radius: 3px;
        margin-left: 15px;
        cursor: pointer;
        transition: all 0.3s ease-in;
    }
    #gdpr-cookie-message button:hover {
        background: white;
        color: var(--red);
        transition: all 0.3s ease-in;
    }
    button#gdpr-cookie-advanced {
        background: white;
        color: var(--red);
    }
    #gdpr-cookie-message button:disabled {
        opacity: 0.3;
    }
    #gdpr-cookie-message input[type="checkbox"] {
        float: none;
        margin-top: 0;
        margin-right: 5px;
    }

$('body').ihavecookies();

$('body').ihavecookies({
    // A custom title for the popup
    title: "Cookies & Privacy",
 
    // Add your own cookie message here, if you prefer not to use the
    // default one. HTML can be included within this message.
    message: "Cookies enable you to use shopping carts and to personalize
              your experience on our sites, tell us which parts of our
              websites people have visited, help us measure the effectiveness
              of ads and web searches, and give us insights into user
              behavior so we can improve our communications and products.",
 
    // Link to your privacy policy for more information
    link: "/privacy-policy",
 
    // Time before the popup is displayed after page load (in milliseconds)
    delay: 2000,
 
    // Days for the cookie to expire
    expires: 30,
 
    // Optional callback function when 'Accept' button is clicked
    onAccept: function() {
        // Do whatever you need to here...
    },
 
    // Unchecks all checkboxes on page load that have class .ihavecookies
    // applied to them. Set to true to turn this option on
    uncheckBoxes: false,
 
    // Set labels for links and buttons
    moreInfoLabel: 'More information',
    acceptBtnLabel: 'Accept All Cookies',
    advancedBtnLabel: 'Customise Cookies',
    cookieTypesTitle: 'Select cookies to accept',
 
    // Labels and description for the "Necessary" cookie type
    fixedCookieTypeLabel:'Necessary',
    fixedCookieTypeDesc: 'These are cookies that are essential for the website to work correctly.',
 
    // Array of cookie types for which to show checkboxes.
    // - type: Type of cookie. This is also the label that is displayed.
    // - value: Value of the checkbox so it can be easily identified in
    //          your application.
    // - description: Description for this cookie type. Displayed in
    //                title attribute.
    cookieTypes: [
        {
            type: 'Site Preferences',
            value: 'preferences',
            description: 'These are cookies that are related to your site preferences, e.g. remembering your username, site colours, etc.'
        },
        {
            type: 'Analytics',
            value: 'analytics',
            description: 'Cookies related to site visits, browser types, etc.'
        },
        {
            type: 'Marketing',
            value: 'marketing',
            description: 'Cookies related to marketing, e.g. newsletters, social media, etc'
        }
    ],
});