Get started

1. Add the template

Insert the banner at the end of the <body> element, using a <template> with these IDs:

<template id="cookies-eu-banner-template">
	<div id="cookies-eu-banner">
		By continuing to visit this site, you accept the use of cookies by Google Analytics for
		statistical purposes.
		<button id="cookies-eu-reject">Reject</button>
		<button id="cookies-eu-accept">Accept</button>
	</div>
</template>

2. Import the script

Choose one of these options:

• Using a build step
• Using a CDN:
  • Global build, the good old <script src="...">
  • ESM build, import via <script type="module">

Using a build step

import { createCookiesBanner } from "cookies-eu-banner";

createCookiesBanner({
	onAccept: () => {
		// Your code to launch when the user accepts cookies
	},
});

CDN or local copy: Global build (import via <script src="...">)

This will expose CookiesEuBanner as global, allowing you to call the createCookiesBanner function like this:

<script src="https://unpkg.com/cookies-eu-banner@^3/dist/cookies-eu-banner.global.js"></script>
<!--
Or if you have downloaded the package, you can import it locally instead:
<script src="./your-path/cookies-eu-banner.global.js"></script>
-->
<script>
	CookiesEuBanner.createCookiesBanner({
		onAccept: () => {
			// Your code to launch when the user accepts cookies
		},
	});
</script>

CDN or local copy: ES Module build (ESM)

<script type="module">
	import { createCookiesBanner } from "https://unpkg.com/cookies-eu-banner@^3/dist/cookies-eu-banner.js";

	// Or if you have downloaded the package, you can import it locally instead:
	// import { createCookiesBanner } from "./your-path/cookies-eu-banner.js";

	createCookiesBanner({
		onAccept: () => {
			// Your code to launch when the user accepts cookies
		},
	});
</script>