Let User Open PopUp Cookie Consent

[TimoB2005]

Hello there,

is there any pre written function or option that i can use that my cookie consent popup when accepted/rejected gets minimized in one corner? Click Accept All -> Small Sticky White Box gets in the Right Corner -> onClick: Opens Cookie Consent Modal

Is there any simple solution for that or do i need to create that myself?

When i need to create that function myself is the onAccept Event the right approach for that?

Best regards

[orestbida]

There is no such option because it's something which I personally don't like. You can easily create a button/link and then stylize it as you wish.

html

<button type="button" data-cc="c-settings" id="cookie-btn">Open cookie preferences</button>

css

.show--consent #cookie-btn,
.show--preferences #cookie-btn {
    display: none;
}

You'd need to add rules like position: fixed; z-index ... to make it float above the content.

Here is a fancy full example:

<button type="button" id="cc-btn" data-cc="c-settings" aria-label="Open Cookie Preferences">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 214.3 214.3" xml:space="preserve"><path d="M197 55V39c0-5-4-8-8-8-32 0-56-9-77-29-3-3-7-3-10 0-20 20-45 29-77 29-4 0-7 3-7 8l-1 16c-1 54-2 128 88 159a7 7 0 0 0 5 0c89-31 88-105 87-159zm-90 144c-77-28-76-89-75-144l1-9c30-1 54-10 74-28 21 18 45 27 75 28v9c1 55 2 116-75 144z"/><path d="m133 81-36 36-16-15a8 8 0 0 0-10 10l20 21a7 7 0 0 0 11 0l42-41a7 7 0 1 0-11-11z"/></svg>
</button>

#cc-btn{
    position: fixed;
    bottom: 1rem;
    left: 1.5rem;
    z-index: 900;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    border: none;
    padding: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    background-color: #fff;
    border: 2px solid #06d;
    justify-content: center;
    transition: background-color .3s ease,
                transform .3s ease,
                border-color .3s ease,
                opacity .3s ease,
                visibility .3s ease;
}

#cc-btn:hover{
    transform: translateY(-3px);
    background-color: #06d;
}

#cc-btn:active{
    background-color: #000;
    border-color: #000;
}

#cc-btn svg{
    fill: #06d;
    display: block;
    transition: fill .3s ease;
}

#cc-btn:hover svg{
    fill: #fff;
}

/* Hide button if modals are visible */
.show--consent #cc-btn,
.show--settings #cc-btn{
    opacity: 0;
    visibility: hidden;
    transform: translateY(3px);
}