Webflow에서 EU 쿠키 바 설정

Webflow 웹사이트에서 무료 EU 쿠키 바 🍪를 쉽게 설정할 수 있는 방법을 살펴보겠습니다.

If you don't know Webflow, It's a modern website visual builder. I mainly use it to build the marketing website for SaaS product.

쿠키 동의

우리는 Cookieconsent의 멋진 OpenSource 프로젝트OSANO를 사용할 것입니다.

쿠키 막대를 얻는 쉬운 시각적 방법은 마법사를 사용하는 것입니다.

https://www.osano.com/cookieconsent/download/로 이동하여 오픈 소스 에디션 열에서 코딩 시작을 클릭하십시오.



원하는 대로 위젯을 조정할 수 있습니다 ✨

Webflow 구성(오른쪽)에 복사할 코드를 생성합니다.

웹플로우 구성

Webflow Dashboard으로 이동하여 웹사이트 설정을 엽니다.



사용자 지정 코드 탭으로 이동합니다. Cookieconsent 마법사의 헤드 코드를 Webflow의 헤드 코드 블록에 복사하고 다른 부분을 바닥글 코드 블록에 복사합니다. 변경 사항을 저장하는 것을 잊지 마십시오(버튼 사용).



예를 들어 내 코드는 다음과 같습니다.

헤드 코드

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" />

바닥글 코드

<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script>
<script>
window.addEventListener("load", function () {
    window.cookieconsent.initialise({
        "palette": {
            "popup": {
                "background": "#00947C"
            },
            "button": {
                "background": "#fff",
                "text": "#00947C"
            }
        },
        "theme": "classic",
        "position": "bottom-left",
        "content": {
            "message": "Nous utilisons des cookies pour améliorer votre expérience de navigation.",
            "dismiss": "J'ai compris",
            "deny": "Refuser",
            "link": "En savoir plus"
        }
    })
});
</script>

⚠️ 참고: 사이트에 맞춤 코드를 추가하려면 유료 사이트 플랜이 필요합니다.

게시 및 진정 😎

사이트의 게시 버튼을 누르기만 하면 Webflow에 EU 쿠키 막대가 있어야 합니다 🎉



그게 전부입니다. 매우 쉽고 기본적이지만 웹 사이트에서 사용 중인 쿠키에 대해 알려야 하는 현재 EU 요구 사항을 다룹니다.

고급 사용의 경우 the JavaScript API for Cookie consent documentation.에서 사용 가능한 모든 옵션을 볼 수 있습니다.

읽어주셔서 감사하고 댓글로 무엇이든 물어보세요! 🚀