diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..39fd6e0
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,20 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.{scss,sass}]
+indent_size = 2
+
+[*.{yml,yaml}]
+indent_size = 2
+
+[*.js]
+indent_size = 2
+
+[Makefile]
+indent_style = tab
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index cbb206f..6b4913f 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -43,3 +43,26 @@ jobs:
         uses: codecov/codecov-action@v3
         with:
           directory: reports/
+
+  e2e_tests:
+    runs-on: ubuntu-latest
+    name: Run the end-to-end tests
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-python@v4
+        with:
+          python-version: '3.10'
+
+      - name: Install dependencies
+        run: |
+          pip install tox tox-gh-actions pytest-playwright
+          playwright install --with-deps
+
+      - name: Run tests
+        run: tox -e e2e
+
+      - name: Publish coverage report
+        uses: codecov/codecov-action@v3
+        with:
+          directory: reports/
diff --git a/.gitignore b/.gitignore
index b0196e7..9751be2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,5 +19,6 @@ dist/
 .tox/
 .pytest_cache
 .coverage
+htmlcov/
 reports/
 testapp/*.db
diff --git a/cookie_consent/cache.py b/cookie_consent/cache.py
index 674007d..50f8fb4 100644
--- a/cookie_consent/cache.py
+++ b/cookie_consent/cache.py
@@ -31,7 +31,10 @@ def all_cookie_groups():
 
         qs = CookieGroup.objects.filter(is_required=False)
         qs = qs.prefetch_related("cookie_set")
-        items = dict([(g.varname, g) for g in qs])
+        # items = qs.in_bulk(field_name="varname")
+        # FIXME -> doesn't work because varname is not a unique fieldl, we need to
+        # make this unique
+        items = {group.varname: group for group in qs}
         cache.set(CACHE_KEY, items, CACHE_TIMEOUT)
     return items
 
diff --git a/cookie_consent/compat.py b/cookie_consent/compat.py
index 9c105a7..8e207da 100644
--- a/cookie_consent/compat.py
+++ b/cookie_consent/compat.py
@@ -9,3 +9,5 @@
     from django.contrib.auth.views import (
         SuccessURLAllowedHostsMixin as RedirectURLMixin,
     )
+
+__all__ = ["url_has_allowed_host_and_scheme", "RedirectURLMixin"]
diff --git a/cookie_consent/models.py b/cookie_consent/models.py
index b3f5f06..c099328 100644
--- a/cookie_consent/models.py
+++ b/cookie_consent/models.py
@@ -1,5 +1,6 @@
 # -*- coding: utf-8 -*-
 import re
+from typing import TypedDict
 
 from django.core.validators import RegexValidator
 from django.db import models
@@ -18,6 +19,16 @@
 )
 
 
+class CookieGroupDict(TypedDict):
+    varname: str
+    name: str
+    description: str
+    is_required: bool
+    # TODO: should we output this? page cache busting would be
+    # required if we do this. Alternatively, set up a JSONView to output these?
+    # version: str
+
+
 class CookieGroup(models.Model):
     varname = models.CharField(
         _("Variable name"), max_length=32, validators=[validate_cookie_name]
@@ -45,7 +56,7 @@ class Meta:
     def __str__(self):
         return self.name
 
-    def get_version(self):
+    def get_version(self) -> str:
         try:
             return str(self.cookie_set.all()[0].get_version())
         except IndexError:
@@ -59,6 +70,15 @@ def save(self, *args, **kwargs):
         super(CookieGroup, self).save(*args, **kwargs)
         delete_cache()
 
+    def for_json(self) -> CookieGroupDict:
+        return {
+            "varname": self.varname,
+            "name": self.name,
+            "description": self.description,
+            "is_required": self.is_required,
+            # "version": self.get_version(),
+        }
+
 
 class Cookie(models.Model):
     cookiegroup = models.ForeignKey(
diff --git a/cookie_consent/static/cookie_consent/cookiebar.js b/cookie_consent/static/cookie_consent/cookiebar.js
index f87ef67..bcb9dfe 100644
--- a/cookie_consent/static/cookie_consent/cookiebar.js
+++ b/cookie_consent/static/cookie_consent/cookiebar.js
@@ -10,7 +10,7 @@ function evalXCookieConsent(script) {
   script.remove();
 }
 
-function showCookieBar (options) {
+function lecacyShowCookieBar (options) {
   const defaults = {
     content: '',
     cookie_groups: [],
@@ -64,3 +64,4 @@ function showCookieBar (options) {
   });
 }
 
+window.legacyShowCookieBar = window.showCookieBar = lecacyShowCookieBar;
diff --git a/cookie_consent/static/cookie_consent/cookiebar.module.js b/cookie_consent/static/cookie_consent/cookiebar.module.js
new file mode 100644
index 0000000..af27203
--- /dev/null
+++ b/cookie_consent/static/cookie_consent/cookiebar.module.js
@@ -0,0 +1,203 @@
+/**
+ * Cookiebar functionality, as a Javascript module.
+ *
+ * About modules: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
+ *
+ * The code is organized here in a way to make the templates work with Django's page
+ * cache. This means that anything user-specific (so different django session and even
+ * cookie consent cookies) cannot be baked into the templates, as that breaks caches.
+ *
+ * The cookie bar operates on the following principles:
+ *
+ * - The developer using the library includes the desired template in their django
+ *   templates, using the HTML <template> element. This contains the content for the
+ *   cookie bar.
+ * - The developer is responsible for loading some Javascript that loads this script.
+ * - The main export of this script needs to be called (showCookieBar), with the
+ *   appropriate options.
+ * - The options include the backend URLs where the retrieve data, which selectors/DOM
+ *   nodes to use for various functionality and the hooks to tap into the accept/decline
+ *   life-cycle.
+ * - When a user accepts or declines (all) cookies, the call to the backend is made via
+ *   a fetch request, bypassing any page caches and preventing full-page reloads.
+ */
+const DEFAULTS = {
+  statusUrl: undefined,
+  // TODO: also accept element rather than selector?
+  templateSelector: '#cookie-consent__cookie-bar',
+  cookieGroupsSelector: '#cookie-consent__cookie-groups',
+  acceptSelector: '.cookie-consent__accept',
+  declineSelector: '.cookie-consent__decline',
+  /**
+   * Either a string (selector), DOMNode or null.
+   *
+   * If null, the bar is appended to the body. If provided, the node is used or looked
+   * up.
+   */
+  insertBefore: null,
+  onShow: null, // callback when the cookie bar is being shown -> add class to body...
+  onAccept: null, // callback when cookies are accepted
+  onDecline: null, // callback when cookies are declined
+  csrfHeaderName: 'X-CSRFToken', // Django's default, can be overridden with settings.CSRF_HEADER_NAME
+};
+
+const DEFAULT_HEADERS = {'X-Cookie-Consent-Fetch': '1'};
+
+let CONFIGURATION = DEFAULTS;
+/**
+ * Cookie accept status, including the accept/decline URLs, csrftoken... See
+ * backend view CookieStatusView.
+ */
+let COOKIE_STATUS = null;
+
+export const loadCookieGroups = (selector) => {
+  const node = document.querySelector(selector);
+  if (!node) {
+    throw new Error(`No cookie groups (script) tag found, using selector: '${selector}'`);
+  }
+  return JSON.parse(node.innerText);
+};
+
+const doInsertBefore = (beforeNode, newNode) => {
+  const parent = beforeNode.parentNode;
+  parent.insertBefore(newNode, beforeNode);
+}
+
+/**
+ * Register the accept/decline event handlers.
+ *
+ * Note that we can't just set the decline or accept cookie purely client-side, as the
+ * cookie possibly has the httpOnly flag set.
+ *
+ * @param  {HTMLEelement} cookieBarNode The DOM node containing the cookiebar markup.
+ * @param  {Array}        cookieGroups  The array of all configured cookie groups.
+ * @return {Void}
+ */
+const registerEvents = (cookieBarNode, cookieGroups) => {
+  const {acceptSelector, onAccept, declineSelector, onDecline} = CONFIGURATION;
+  const {
+    acceptedCookieGroups: accepted,
+    declinedCookieGroups: declined,
+    notAcceptedOrDeclinedCookieGroups: undecided,
+} = COOKIE_STATUS;
+
+  cookieBarNode
+    .querySelector(acceptSelector)
+    .addEventListener('click', event => {
+      event.preventDefault();
+      const acceptedGroups = filterCookieGroups(cookieGroups, accepted.concat(undecided));
+      onAccept?.(acceptedGroups, event);
+      acceptCookiesBackend();
+      cookieBarNode.parentNode.removeChild(cookieBarNode);
+    });
+
+  cookieBarNode
+    .querySelector(declineSelector)
+    .addEventListener('click', event => {
+      event.preventDefault();
+      const declinedGroups = filterCookieGroups(cookieGroups, declined.concat(undecided));
+      onDecline?.(declinedGroups, event);
+      declineCookiesBackend();
+      cookieBarNode.parentNode.removeChild(cookieBarNode);
+    });
+};
+
+const loadCookieStatus = async () => {
+  const {statusUrl} = CONFIGURATION;
+  if (!statusUrl) console.error('Missing status URL option, did you forget to pass the statusUrl option?');
+  const response = await window.fetch(
+    CONFIGURATION.statusUrl,
+    {
+      method: 'GET',
+      credentials: 'same-origin',
+      headers: DEFAULT_HEADERS
+    }
+  );
+  // assign to module level variable, once the page is loaded these details should
+  // not change.
+  COOKIE_STATUS = await response.json();
+};
+
+const saveCookiesStatusBackend = async (urlProperty) => {
+  const status = COOKIE_STATUS || {};
+  const url = status[urlProperty];
+  if (!url) {
+    console.error(`Missing url for ${urlProperty} - was the cookie status not loaded properly?`);
+    return;
+  }
+  await window.fetch(url, {
+    method: 'POST',
+    credentials: 'same-origin',
+    headers: {
+      ...DEFAULT_HEADERS,
+      [CONFIGURATION.csrfHeaderName]: status.csrftoken
+    }
+  });
+}
+
+/**
+ * Make the call to the backend to accept the cookies.
+ */
+const acceptCookiesBackend = async () => await saveCookiesStatusBackend('acceptUrl');
+/**
+ * Make the call to the backend to decline the cookies.
+ */
+const declineCookiesBackend = async () => await saveCookiesStatusBackend('declineUrl');
+
+/**
+ * Filter the cookie groups down to a subset of specified varnames.
+ */
+const filterCookieGroups = (cookieGroups, varNames) => {
+  return cookieGroups.filter(group => varNames.includes(group.varname));
+};
+
+export const showCookieBar = async (options={}) => {
+  // merge defaults and provided options
+  CONFIGURATION = {...DEFAULTS, ...options};
+  const {
+    cookieGroupsSelector,
+    templateSelector,
+    insertBefore,
+    onShow,
+    onAccept,
+    onDecline,
+  } = CONFIGURATION;
+  const cookieGroups = loadCookieGroups(cookieGroupsSelector);
+
+  // no cookie groups -> abort
+  if (!cookieGroups.length) return;
+
+  const templateNode = document.querySelector(templateSelector);
+
+  // insert before a given node, if specified, or append to the body as default behaviour
+  const doInsert = insertBefore === null
+    ? (cookieBarNode) => document.querySelector('body').appendChild(cookieBarNode)
+    : typeof insertBefore === 'string'
+      ? (cookieBarNode) => doInsertBefore(document.querySelector(insertBefore), cookieBarNode)
+      : (cookieBarNode) => doInsertBefore(insertBefore, cookieBarNode)
+  ;
+  await loadCookieStatus();
+
+  // calculate the cookie groups to invoke the callbacks. We deliberately fire those
+  // without awaiting so that our cookie bar is shown/hidden as soon as possible.
+  const {
+    acceptedCookieGroups: accepted,
+    declinedCookieGroups: declined,
+    notAcceptedOrDeclinedCookieGroups
+  } = COOKIE_STATUS;
+
+  const acceptedGroups = filterCookieGroups(cookieGroups, accepted);
+  if (acceptedGroups.length) onAccept?.(acceptedGroups);
+  const declinedGroups = filterCookieGroups(cookieGroups, declined);
+  if (declinedGroups.length) onDecline?.(declinedGroups);
+
+  // there are no (more) cookie groups to accept, don't show the bar
+  if (!notAcceptedOrDeclinedCookieGroups.length) return;
+
+  // grab the contents from the template node and add them to the DOM, optionally
+  // calling the onShow callback
+  const cookieBarNode = templateNode.content.firstElementChild.cloneNode(true);
+  registerEvents(cookieBarNode, cookieGroups);
+  onShow?.();
+  doInsert(cookieBarNode);
+};
diff --git a/cookie_consent/templatetags/cookie_consent_tags.py b/cookie_consent/templatetags/cookie_consent_tags.py
index 2fdc1c7..6ecb5a4 100644
--- a/cookie_consent/templatetags/cookie_consent_tags.py
+++ b/cookie_consent/templatetags/cookie_consent_tags.py
@@ -1,13 +1,12 @@
-# -*- coding: utf-8 -*-
-from django import template
+import warnings
 
-try:
-    from django.urls import reverse
-except ImportError:
-    from django.core.urlresolvers import reverse
+from django import template
+from django.urls import reverse
+from django.utils.html import json_script
 
-from cookie_consent.conf import settings
-from cookie_consent.util import (
+from ..cache import all_cookie_groups as get_all_cookie_groups
+from ..conf import settings
+from ..util import (
     are_all_cookies_accepted,
     get_accepted_cookies,
     get_cookie_dict_from_request,
@@ -90,10 +89,15 @@ def cookie_consent_decline_url(cookie_groups):
 
 
 @register.simple_tag
-def get_accept_cookie_groups_cookie_string(request, cookie_groups):
+def get_accept_cookie_groups_cookie_string(request, cookie_groups):  # pragma: no cover
     """
     Tag returns accept cookie string suitable to use in javascript.
     """
+    warnings.warn(
+        "Cookie string template tags for JS are deprecated and will be removed "
+        "in django-cookie-consent 1.0",
+        DeprecationWarning,
+    )
     cookie_dic = get_cookie_dict_from_request(request)
     for cookie_group in cookie_groups:
         cookie_dic[cookie_group.varname] = cookie_group.get_version()
@@ -105,6 +109,11 @@ def get_decline_cookie_groups_cookie_string(request, cookie_groups):
     """
     Tag returns decline cookie string suitable to use in javascript.
     """
+    warnings.warn(
+        "Cookie string template tags for JS are deprecated and will be removed "
+        "in django-cookie-consent 1.0",
+        DeprecationWarning,
+    )
     cookie_dic = get_cookie_dict_from_request(request)
     for cookie_group in cookie_groups:
         cookie_dic[cookie_group.varname] = settings.COOKIE_CONSENT_DECLINE
@@ -124,6 +133,13 @@ def js_type_for_cookie_consent(request, varname, cookie=None):
         alert("Social cookie accepted");
       </script>
     """
+    # This approach doesn't work with page caches and/or strict Content-Security-Policies
+    # (unless you use nonces, which again doesn't work with aggressive page caching).
+    warnings.warn(
+        "Template tags for use in/with JS are deprecated and will be removed "
+        "in django-cookie-consent 1.0",
+        DeprecationWarning,
+    )
     enabled = is_cookie_consent_enabled(request)
     if not enabled:
         res = True
@@ -147,3 +163,17 @@ def accepted_cookies(request):
 
     """
     return [c.varname for c in get_accepted_cookies(request)]
+
+
+@register.simple_tag
+def all_cookie_groups(element_id: str):
+    """
+    Serialize all cookie groups to JSON and output them in a script tag.
+
+    :param element_id: The ID for the script tag so you can look it up in JS later.
+
+    This uses Django's core json_script filter under the hood.
+    """
+    groups = get_all_cookie_groups()
+    value = [group.for_json() for group in groups.values()]
+    return json_script(value, element_id)
diff --git a/cookie_consent/urls.py b/cookie_consent/urls.py
index c078965..fae8d04 100644
--- a/cookie_consent/urls.py
+++ b/cookie_consent/urls.py
@@ -1,31 +1,37 @@
 # -*- coding: utf-8 -*-
-from django.urls import re_path
+from django.urls import path, re_path
 from django.views.decorators.csrf import csrf_exempt
 
-from .views import CookieGroupAcceptView, CookieGroupDeclineView, CookieGroupListView
+from .views import (
+    CookieGroupAcceptView,
+    CookieGroupDeclineView,
+    CookieGroupListView,
+    CookieStatusView,
+)
 
 urlpatterns = [
-    re_path(
-        r"^accept/$",
+    path(
+        "accept/",
         csrf_exempt(CookieGroupAcceptView.as_view()),
         name="cookie_consent_accept_all",
     ),
+    # TODO: use form or query string params for this instead?
     re_path(
         r"^accept/(?P<varname>.*)/$",
         csrf_exempt(CookieGroupAcceptView.as_view()),
         name="cookie_consent_accept",
     ),
+    # TODO: use form or query string params for this instead?
     re_path(
         r"^decline/(?P<varname>.*)/$",
         csrf_exempt(CookieGroupDeclineView.as_view()),
         name="cookie_consent_decline",
     ),
-    re_path(
-        r"^decline/$",
+    path(
+        "decline/",
         csrf_exempt(CookieGroupDeclineView.as_view()),
         name="cookie_consent_decline_all",
     ),
-    re_path(
-        r"^$", CookieGroupListView.as_view(), name="cookie_consent_cookie_group_list"
-    ),
+    path("status/", CookieStatusView.as_view(), name="cookie_consent_status"),
+    path("", CookieGroupListView.as_view(), name="cookie_consent_cookie_group_list"),
 ]
diff --git a/cookie_consent/util.py b/cookie_consent/util.py
index 81e18f2..57bf58f 100644
--- a/cookie_consent/util.py
+++ b/cookie_consent/util.py
@@ -1,11 +1,12 @@
 # -*- coding: utf-8 -*-
 import datetime
+from typing import Union
 
 from django.utils.encoding import smart_str
 
-from cookie_consent.cache import all_cookie_groups, get_cookie, get_cookie_group
-from cookie_consent.conf import settings
-from cookie_consent.models import ACTION_ACCEPTED, ACTION_DECLINED, LogItem
+from .cache import all_cookie_groups, get_cookie, get_cookie_group
+from .conf import settings
+from .models import ACTION_ACCEPTED, ACTION_DECLINED, LogItem
 
 
 def parse_cookie_str(cookie):
@@ -132,17 +133,35 @@ def are_all_cookies_accepted(request):
     )
 
 
-def get_not_accepted_or_declined_cookie_groups(request):
-    """
-    Returns all cookie groups that are neither accepted or declined.
-    """
+def _get_cookie_groups_by_state(request, state: Union[bool, None]):
     return [
         cookie_group
         for cookie_group in get_cookie_groups()
-        if get_cookie_value_from_request(request, cookie_group.varname) is None
+        if get_cookie_value_from_request(request, cookie_group.varname) is state
     ]
 
 
+def get_not_accepted_or_declined_cookie_groups(request):
+    """
+    Returns all cookie groups that are neither accepted or declined.
+    """
+    return _get_cookie_groups_by_state(request, state=None)
+
+
+def get_accepted_cookie_groups(request):
+    """
+    Returns all cookie groups that are accepted.
+    """
+    return _get_cookie_groups_by_state(request, state=True)
+
+
+def get_declined_cookie_groups(request):
+    """
+    Returns all cookie groups that are declined.
+    """
+    return _get_cookie_groups_by_state(request, state=False)
+
+
 def is_cookie_consent_enabled(request):
     """
     Returns if django-cookie-consent is enabled for given request.
diff --git a/cookie_consent/views.py b/cookie_consent/views.py
index 93bafdf..36d69d8 100644
--- a/cookie_consent/views.py
+++ b/cookie_consent/views.py
@@ -1,12 +1,29 @@
 # -*- coding: utf-8 -*-
 from django.core.exceptions import SuspiciousOperation
-from django.http import HttpResponse, HttpResponseRedirect
+from django.http import HttpRequest, HttpResponse, HttpResponseRedirect, JsonResponse
+from django.middleware.csrf import get_token as get_csrf_token
 from django.urls import reverse
 from django.views.generic import ListView, View
 
 from .compat import RedirectURLMixin, url_has_allowed_host_and_scheme
 from .models import CookieGroup
-from .util import accept_cookies, decline_cookies
+from .util import (
+    accept_cookies,
+    decline_cookies,
+    get_accepted_cookie_groups,
+    get_declined_cookie_groups,
+    get_not_accepted_or_declined_cookie_groups,
+)
+
+
+def is_ajax_like(request: HttpRequest) -> bool:
+    # legacy ajax, removed in Django 4.0 (used to be request.is_ajax())
+    ajax_header = request.headers.get("X-Requested-With")
+    if ajax_header == "XMLHttpRequest":
+        return True
+
+    # module-js uses fetch and a custom header
+    return bool(request.headers.get("X-Cookie-Consent-Fetch"))
 
 
 class CookieGroupListView(ListView):
@@ -33,12 +50,12 @@ def get_success_url(self):
             raise SuspiciousOperation("Unsafe open redirect suspected.")
         return redirect_to or reverse("cookie_consent_cookie_group_list")
 
-    def process(self, request, response, varname):
+    def process(self, request, response, varname):  # pragma: no cover
         raise NotImplementedError()
 
     def post(self, request, *args, **kwargs):
         varname = kwargs.get("varname", None)
-        if request.META.get("HTTP_X_REQUESTED_WITH") == "XMLHttpRequest":
+        if is_ajax_like(request):
             response = HttpResponse()
         else:
             response = HttpResponseRedirect(self.get_success_url())
@@ -65,3 +82,35 @@ def process(self, request, response, varname):
 
     def delete(self, request, *args, **kwargs):
         return self.post(request, *args, **kwargs)
+
+
+class CookieStatusView(View):
+    """
+    Check the current accept/decline status for cookies.
+
+    The returned accept and decline URLs are specific to this user and include the
+    cookie groups that weren't accepted or declined yet.
+
+    Note that this endpoint also returns a CSRF Token to be used by the frontend,
+    as baking a CSRFToken into a cached page will not reliably work.
+    """
+
+    def get(self, request: HttpRequest) -> JsonResponse:
+        accepted = get_accepted_cookie_groups(request)
+        declined = get_declined_cookie_groups(request)
+        not_accepted_or_declined = get_not_accepted_or_declined_cookie_groups(request)
+        # TODO: change this csv URL param into proper POST params
+        varnames = ",".join([group.varname for group in not_accepted_or_declined])
+        data = {
+            "csrftoken": get_csrf_token(request),
+            "acceptUrl": reverse("cookie_consent_accept", kwargs={"varname": varnames}),
+            "declineUrl": reverse(
+                "cookie_consent_decline", kwargs={"varname": varnames}
+            ),
+            "acceptedCookieGroups": [group.varname for group in accepted],
+            "declinedCookieGroups": [group.varname for group in declined],
+            "notAcceptedOrDeclinedCookieGroups": [
+                group.varname for group in not_accepted_or_declined
+            ],
+        }
+        return JsonResponse(data)
diff --git a/docs/index.rst b/docs/index.rst
index 0433ad5..cdaf834 100644
--- a/docs/index.rst
+++ b/docs/index.rst
@@ -31,6 +31,7 @@ User Guide
    quickstart
    concept
    usage
+   javascript
    example_app
    settings
    contributing
diff --git a/docs/javascript.rst b/docs/javascript.rst
new file mode 100644
index 0000000..847fbee
--- /dev/null
+++ b/docs/javascript.rst
@@ -0,0 +1,270 @@
+.. _javascript:
+
+======================
+Javascript integration
+======================
+
+Cookie consent supports "classic" pages where you submit the accept/decline form and
+then it performs a full page reload. This strategy is simple and straight-forward, as
+any dynamic scripts tied to the cookie groups are then automatically initialized.
+
+However, this does not lead to the best user-experience. Consider a user filling out a
+long form and half-way they decide to get rid of the "annoying cookie bar". Either
+accepting or declining will make them lose their changes, providing a frustrating
+experience.
+
+Using the scripts we ship, you can provide a better user experience, at the cost of
+more development work.
+
+.. _showcookiebar_getting_started:
+
+Getting started
+===============
+
+Requirements
+------------
+
+The new script is designed for modern Javascript and modern browsers. It should also
+integrate with JS tooling like Webpack/Rollup/ESBuild... but we are not actively testing
+this. Please let us know via Github issues what your issues and/or wishes are!
+
+As such, the target browsers must support:
+
+* ``<script type="module">`` OR you must process the source code with a compiler (like
+  Babel_).
+* ``window.fetch``
+* ``async``/``await`` syntax OR use a compiler like Babel.
+* ES2020 (features like optional chaining are used)
+
+In your Django template
+-----------------------
+
+**Add a template element for your content**
+
+The ``<template>`` node is cloned and injected in the configured location. For example:
+
+.. code-block:: django
+
+    {% url "cookie_consent_cookie_group_list" as url_cookies %}
+
+    <template id="cookie-consent__cookie-bar">
+        <div class="cookie-bar">
+            This site uses cookies for better performance and user experience.
+            Do you agree to use these cookies?
+            {# Button is the more accessible role, but an anchor tag would also work #}
+            <button type="button" class="cookie-consent__accept">Accept</button>
+            <button type="button" class="cookie-consent__decline">Decline</button>
+            <a href="{{ url_cookies }}">Cookies info</a>
+        </div>
+    </template>
+
+This lets you, the developer, control the exact layout, styling and content of the
+cookie notice.
+
+.. note:: Avoid using (most) of the built in template tags if you want to use
+   template/view caching. For more background information, see:
+   :ref:`javascript_design_considerations`.
+
+**Include a script that calls the ``showCookieBar`` function**
+
+The most straight-forward way is to include this in your Django template:
+
+.. code-block:: django
+
+    {% load static cookie_consent_tags %}
+    {% static "cookie_consent/cookiebar.module.js" as cookiebar_src %}
+    {% url 'cookie_consent_status' as status_url %}
+    <script type="module">
+        import {showCookieBar} from '{{ cookiebar_src }}';
+        showCookieBar({
+          statusUrl: '{{ status_url|escapejs }}',
+          templateSelector: '#cookie-consent__cookie-bar',
+          cookieGroupsSelector: '#cookie-consent__cookie-groups',
+          onShow: () => document.querySelector('body').classList.add('with-cookie-bar'),
+          onAccept: () => document.querySelector('body').classList.remove('with-cookie-bar'),
+          onDecline: () => document.querySelector('body').classList.remove('with-cookie-bar'),
+        });
+    </script>
+
+You call the function with the necessary options, and on page-load the cookie bar will
+be properly initialized.
+
+The ``status_url`` is special - it points to a backend view which returns the
+user-specific cookie consent status, returning the appropriate accept and decline URLs
+and other details relevant to cookie consent.
+
+You can of course also import this function in your own Javascript entrypoint (if you
+use Babel/Webpack or similar tooling) and initialize the cookie bar that way.
+
+Options
+=======
+
+The ``showCookieBar`` function takes a few required options and many optional options to
+tweak the behaviour to your wishes.
+
+**Required options**
+
+* ``statusUrl``: URL to the ``CookieStatusView`` - essential to determine the
+  accept/decline URLs and CSRF token. Use ``{% url 'cookie_consent_status' as status_url %}``
+  for the correct value, irrespective of your urlconf.
+
+**Recommended options**
+
+These options have default values, but to prevent surprises and maximum flexibility, you
+should provide them. Please check the source code for their default values.
+
+* ``templateSelector`` - CSS selector to find the template element of the cookie bar.
+  This element will be cloned and ultimately added to the page.
+
+* ``cookieGroupsSelector`` - CSS selector to the element produced by
+  ``{% all_cookie_groups 'cookie-consent__cookie-groups' %}``. This provides all
+  configured cookie groups in a JSON script tag and is read by ``showCookieBar`` to
+  determine if a bar should be shown at all (e.g. if there are no cookie groups,
+  nothing is done).
+
+* ``acceptSelector`` - CSS selector to the element to accept all cookies. A ``click``
+  event listener is bound to this element to register the cookies accept action.
+
+* ``declineSelector`` - CSS selector to the element to decline all cookies. A ``click``
+  event listener is bound to this element to register the cookies decline action.
+
+**Optional**
+
+* ``insertBefore`` - A CSS selector, DOM node or ``null``. If provided, the cookie bar
+  is prepended before this node, otherwise it is appended to the body element.
+
+* ``onShow`` - an optional callback function, called right before the cookie bar is
+  added to the document.
+
+* ``onAccept`` - an optional callback, called when the "cookies accept" element is
+  clicked and when the cookie status is initially loaded. It receives the list of
+  all cookie groups that are (now) accepted and the click event (if there was one).
+
+* ``onDecline`` - an optional callback, called when the "cookies decline" element is
+  clicked and when the cookie status is initially loaded. It receives the list of
+  all cookie groups that are (now) declined and the click event (if there was one).
+
+* ``csrfHeaderName`` - HTTP header name for the CSRF Token. Defaults to Django's default
+  value, so if you have a non-default ``settings.CSRF_HEADER_NAME``, you must provide
+  this.
+
+Enabling other scripts after cookies were accepted
+==================================================
+
+The legacy version of ``showCookieBar`` supported emitting scripts with a custom type
+in the Django templates, which where then changed to ``type="text/javascript"`` to make
+them execute without a full page reload. The new version does not support this out of
+the box, as it may interfere with page caches, Content Security Policies and was poorly
+documented.
+
+We recommend hooking into the ``onAccept`` and ``onDecline`` hooks to perform these
+actions.
+
+E.g. in the django template:
+
+.. code-block:: django
+
+    <template id="analytics-scripts">
+        <script type="text/javascript">
+            // lots of interesting code
+        </script>
+        <script type="module" src="..."></script>
+    </template>
+
+and the Javascript function:
+
+.. code-block:: javascript
+
+    function onAccept(event, cookieGroups) {
+        const analyticsEnabled = cookieGroups.find(group => group.varname === 'analytics') != undefined;
+        if (analyticsEnabled) {
+            const template = document.getElementById('analytics-scripts').content;
+            const analyticsScripts = templateNode.content.cloneNode(true);
+            document.body.appendChild(analyticsScripts);
+        }
+    }
+
+Passing this ``onAccept`` callback then adds the scripts after the user accepted the
+cookies, causing them to execute. This way, there's no reliance on ``unsafe-eval``.
+
+.. _javascript_design_considerations:
+
+Considerations and design decisions made for the JS integration
+===============================================================
+
+We realize there is quite a bit of work to do to use this functionality. We've aimed for
+a trade-off where the simple things are easy to do and the complex set-ups are
+achievable.
+
+The :ref:`showcookiebar_getting_started` section should be close to plug-and-play by
+integrating well with Django's static files. Especially on modern browsers, we intend
+to have a working solution without intricate Javascript knowledge.
+
+For more advanced Javascript usage/developers, we expose hooks and options to tap into
+the life-cycle. The code may also serve as a reference for your own implementation.
+
+HttpOnly and CSRF
+-----------------
+
+The cookie-consent cookie itself can safely be set to ``HttpOnly`` so it cannot be
+tampered with (or even read) from Javascript. This follows security best practices. The
+new script no longer touches ``document.cookie``.
+
+Accepting and declining cookies must be CSRF-protected and use ``POST`` requests. This
+works out of the box with the async calls we make - the status endpoint provides the
+CSRF token to the Javascript so that it can include this via an HTTP header.
+
+This means that you can mark your CSRF cookies ``HttpOnly`` in Django.
+
+Content Security Policy (CSP)
+-----------------------------
+
+Content Security Policies aim to lock down which scripts, styles... can run in the
+browser. They are a good tool in helping prevent Cross-Site-Scripting attacks, by
+specifying from which sources scripts are allowed to run and usually by blocking
+``eval`` (which should be the bare minimum of what you block).
+
+The new scripts play well with this - you can include your analytics scripts inside
+``<template>`` nodes and inject them dynamically without resorting to ``eval``.
+Additionally, they are held against the configured CSP. Including these in the template
+also provide the option to set a ``nonce`` (e.g. when using django-csp).
+
+For more advanced setups, it's even possible a nonce is injected by a reverse proxy -
+with creative Javascript you can read this nonce (typically from a ``<meta>`` tag) and
+included it in the scripts you add in the ``onAccept`` hook.
+
+Page caches
+-----------
+
+You should now be able to use Django's page cache which caches the entire response for
+a given URL. The new script fetches the user-specific cookie status via an async call
+which bypasses the cache (or you configure it to ``Vary`` on the cookies).
+
+Localization
+------------
+
+The template element approach allows you to use Django's built in translation machinery,
+keeping your templates readable and properly HTML-escaped.
+
+Hooks
+-----
+
+The ``onShow``, ``onAccept`` and ``onDecline`` hooks allow you to perform additional
+actions on the main events. You can add your own markup and Javascript for more advanced
+user experiences.
+
+Integration with your Javascript stack
+--------------------------------------
+
+The source code is written in modern Javascript and you should be able to import the
+module in Webpack-based builds (or similar). Likely the most challenging aspect is
+getting the frontend-stack to pick up your files. Running ``manage.py collectstatic``
+could help in ensuring that the source files are in a deterministic location, like
+``<PROJECT_ROOT>/static/cookie_consent/cookiebar.module.js``.
+
+.. note:: We're looking into possibly publishing an NPM package *somewhere* to make this
+   easier to work with.
+
+Let us know how we can improve this though!
+
+.. _Babel: https://babeljs.io/
diff --git a/docs/usage.rst b/docs/usage.rst
index f408cf9..80eea36 100644
--- a/docs/usage.rst
+++ b/docs/usage.rst
@@ -40,6 +40,14 @@ domain. If cookie name with domain is used, format is
 Checking for 3rd party cookies dynamically
 ------------------------------------------
 
+.. warning::
+
+    .. deprecated:: 0.5.0
+
+    This approach does not work well with page-level caches and (strict) content
+    security policies. Instead, use the new :ref:`Javascript <javascript>` approach
+    with ``<template>`` nodes.
+
 Using ``js_type_for_cookie_consent`` templatetag for script type attribute
 would set ``x/cookie_consent`` thus making browser skip executing this block
 of javascript code.
@@ -58,6 +66,16 @@ without reloading page.
 Asking users for cookie consent in templates
 --------------------------------------------
 
+.. warning::
+
+   The instructions below refer to the legacy integration. See :ref:`javascript` for
+   an updated approach.
+
+   .. deprecated:: 0.5.0
+
+   The legacy integration is deprecated and will be removed in django-cookie-consent
+   1.0.0.
+
 ``django-cookie-consent`` can show website visitors a cookie consent message. This
 message informs users that the website uses cookies and requests their consent
 to store them. The script responsible for displaying the message is
@@ -68,16 +86,19 @@ In order to display the cookie consent message on your website:
 1. Load the ``cookiebar.js`` script in your HTML template. You can do this by
    adding the following line to the ``<head>`` section of your template:
 
-.. code-block:: html
+   .. code-block:: html
+
+      <script type="text/javascript" src="{% static 'cookie_consent/cookiebar.js' %}"></script>
 
-  <script type="text/javascript" src="{% static 'cookie_consent/cookiebar.js' %}"></script>
+   This script assigns ``window.legacyShowCookieBar`` and the alias ``showCookieBar`` (
+   the latter is for backwards compatibility).
   
-2. In your JavaScript code, call the ``showCookieBar`` function with the
+2. In your JavaScript code, call the ``legacyShowCookieBar`` function with the
    appropriate options object:
 
 .. code-block:: javascript
 
-  window.showCookieBar({
+  window.legacyShowCookieBar({
     content: 'your-cookie-bar-html',
     cookie_groups: ['your-cookie-group'],
     cookie_decline: 'your-decline-cookie-setting',
@@ -89,7 +110,7 @@ In order to display the cookie consent message on your website:
 Options
 =======
 
-The ``showCookieBar`` function accepts an options object with the following
+The ``legacyShowCookieBar`` function accepts an options object with the following
 properties:
 
 * ``content`` (required): A string containing the HTML for your cookie consent
@@ -106,11 +127,11 @@ properties:
 Example
 =======
 
-Here's an example of how to use the showCookieBar function:
+Here's an example of how to use the legacyShowCookieBar function:
 
 .. code-block:: javascript
 
-  showCookieBar({
+  legacyShowCookieBar({
     content: '<div class="cookie-bar"> <p>We use cookies to improve your browsing experience. By continuing to use our site, you agree to our use of cookies.</p> <a href="/accept_cookies" class="cc-cookie-accept">Accept</a> <a href="/decline_cookies" class="cc-cookie-decline">Decline</a> </div>',
     cookie_groups: ['analytics'],
     cookie_decline: '{% get_decline_cookie_groups_cookie_string request analytics %}',
@@ -119,7 +140,7 @@ Here's an example of how to use the showCookieBar function:
     },
   });
 
-One thing to keep in mind is that the showCookieBar function only adds the HTML
+One thing to keep in mind is that the legacyShowCookieBar function only adds the HTML
 template for the banner to your page - you still need to style it with CSS to
 make it work properly.
 
diff --git a/setup.cfg b/setup.cfg
index a7ae9d2..5ba0566 100644
--- a/setup.cfg
+++ b/setup.cfg
@@ -17,7 +17,7 @@ author = Informatika Mihelac
 author_email = bmihelac@mihelac.org
 keywords = cookies, cookie-consent, cookie bar
 classifiers =
-    Development Status :: 3 - Alpha
+    Development Status :: 4 - Beta
     Framework :: Django
     Framework :: Django :: 3.2
     Framework :: Django :: 4.1
@@ -44,6 +44,7 @@ install_requires =
 tests_require =
     pytest
     pytest-django
+    pytest-playwright
     tox
     isort
     black
@@ -58,6 +59,7 @@ include =
 tests =
     pytest
     pytest-django
+    pytest-playwright
     tox
     isort
     black
@@ -93,8 +95,20 @@ sections=FUTURE,STDLIB,DJANGO,THIRDPARTY,FIRSTPARTY,LOCALFOLDER
 [tool:pytest]
 testpaths = tests
 DJANGO_SETTINGS_MODULE=testapp.settings
+markers =
+    e2e: mark tests as end-to-end tests, using playwright (deselect with '-m "not e2e"')
 
 [pep8]
 [flake8]
 max-line-length=88
 exclude=env,.tox,docs
+
+[coverage:run]
+branch = True
+source = cookie_consent
+omit =
+    # migrations run while django initializes the test db
+    */migrations/*
+
+[coverage:report]
+skip_covered = True
diff --git a/testapp/settings.py b/testapp/settings.py
index f24fc23..f02ac63 100644
--- a/testapp/settings.py
+++ b/testapp/settings.py
@@ -1,4 +1,7 @@
 import os
+from pathlib import Path
+
+BASE_DIR = Path(__file__).resolve().parent
 
 INSTALLED_APPS = [
     "django.contrib.admin",
@@ -6,6 +9,7 @@
     "django.contrib.contenttypes",
     "django.contrib.sessions",
     "django.contrib.sites",
+    "django.contrib.staticfiles",
     "django.contrib.messages",
     "cookie_consent",
     "testapp",
@@ -19,6 +23,10 @@
 USE_TZ = True
 
 STATIC_URL = "/static/"
+STATICFILES_DIRS = [
+    BASE_DIR / "static",
+]
+
 TEMPLATES = [
     {
         "BACKEND": "django.template.backends.django.DjangoTemplates",
diff --git a/testapp/static/styles.css b/testapp/static/styles.css
new file mode 100644
index 0000000..6afa3e2
--- /dev/null
+++ b/testapp/static/styles.css
@@ -0,0 +1,13 @@
+body.with-cookie-bar {
+  padding-top: 35px;
+}
+
+.cookie-bar {
+  position: fixed;
+  width: 100%;
+  top: 0;
+  text-align: center;
+  height: 25px;
+  line-height: 25px;
+  background: #eee;
+}
diff --git a/testapp/templates/legacy_test_page.html b/testapp/templates/legacy_test_page.html
new file mode 100644
index 0000000..69a0e71
--- /dev/null
+++ b/testapp/templates/legacy_test_page.html
@@ -0,0 +1,71 @@
+{% load static %}
+{% load cookie_consent_tags %}
+<!DOCTYPE html>
+<html>
+  <head>
+    <link href="{% static 'styles.css' %}" rel="stylesheet" />
+    <script src="{% static 'cookie_consent/cookiebar.js' %}"></script>
+  </head>
+
+  <body>
+    <h1>Test page</h1>
+
+    <h2>Social cookies</h2>
+    <p>
+        sharing button is displayed below only if "Social" cookies are accepted.
+        <button id="share-button" type="button" style="display:none">SHARE</button>
+    </p>
+
+    <script type="{% js_type_for_cookie_consent request "social" "*:.google.com" %}" data-varname="social">
+      var btn = document.getElementById('share-button');
+      btn.style.display = 'block';
+    </script>
+
+    {% if request|cookie_consent_enabled %}
+        {% comment %}
+            LEGACY Javascript integration - use the new module approach for new projects!
+
+            Legacy showCookieBar support will be removed in v1.0.
+        {% endcomment %}
+        {% not_accepted_or_declined_cookie_groups request as cookie_groups %}
+
+        {% if cookie_groups %}
+            {% url "cookie_consent_cookie_group_list" as url_cookies %}
+            {% cookie_consent_accept_url cookie_groups as url_accept %}
+            {% cookie_consent_decline_url cookie_groups as url_decline %}
+            <script type="text/javascript">
+              var cookie_groups = [];
+              {% for cookie_group in cookie_groups %}
+                cookie_groups.push("{{ cookie_group.varname }}");
+              {% endfor %}
+
+              function ready(fn) {
+                  if (document.readyState != 'loading') {
+                    fn();
+                  } else if (document.addEventListener) {
+                    document.addEventListener('DOMContentLoaded', fn);
+                  } else {
+                    document.attachEvent('onreadystatechange', function() {
+                      if (document.readyState != 'loading')
+                        fn();
+                    });
+                  }
+              }
+
+              ready(function() {
+                  window.legacyShowCookieBar({
+                  content: "{% filter escapejs %}{% with cookie_groups=cookie_groups|join:", " %}<div class="cookie-bar">This site uses {{ cookie_groups }} cookies for better performance and user experience. Do you agree to use cookies? <a href="{{ url_accept }}" class="cc-cookie-accept">Accept</a> <a href="{{ url_decline }}" class="cc-cookie-decline">Decline</a> <a href="{{ url_cookies }}">Cookies info</a></div>{% endwith %}{% endfilter %}",
+                  cookie_groups: cookie_groups,
+                  cookie_decline: "{% get_decline_cookie_groups_cookie_string request cookie_groups %}",
+                  beforeDeclined: function() {
+                    document.cookie = "{% get_decline_cookie_groups_cookie_string request cookie_groups %}";
+                  }
+                });
+              });
+            </script>
+          {% endif %}
+
+    {% endif %}
+
+  </body>
+</html>
diff --git a/testapp/templates/show-cookie-bar-script.html b/testapp/templates/show-cookie-bar-script.html
new file mode 100644
index 0000000..269edf8
--- /dev/null
+++ b/testapp/templates/show-cookie-bar-script.html
@@ -0,0 +1,30 @@
+{% load static cookie_consent_tags %}
+{% static "cookie_consent/cookiebar.module.js" as cookiebar_src %}
+<script type="module">
+    import {showCookieBar} from '{{ cookiebar_src }}';
+
+    const showShareButton = () => {
+        const template = document.getElementById('show-share-button')
+        const showButtonScript = template.content.cloneNode(true);
+        document.body.appendChild(showButtonScript);
+    };
+
+    showCookieBar({
+      statusUrl: '{{ status_url|escapejs }}',
+      templateSelector: '#cookie-consent__cookie-bar',
+      cookieGroupsSelector: '#cookie-consent__cookie-groups',
+      onShow: () => document.querySelector('body').classList.add('with-cookie-bar'),
+      onAccept: (cookieGroups) => {
+        document.querySelector('body').classList.remove('with-cookie-bar');
+        const hasSocial = cookieGroups.find(g => g.varname == 'social') !== undefined;
+        hasSocial && showShareButton();
+      },
+      onDecline: () => document.querySelector('body').classList.remove('with-cookie-bar'),
+    });
+</script>
+
+<template id="show-share-button">
+    <script type="text/javascript">
+      document.getElementById('share-button').style.display = 'block';
+    </script>
+</template>
diff --git a/testapp/templates/test_page.html b/testapp/templates/test_page.html
index d01c4be..e57e3ac 100644
--- a/testapp/templates/test_page.html
+++ b/testapp/templates/test_page.html
@@ -1,110 +1,75 @@
 {% load static %}
 {% load cookie_consent_tags %}
+{% url "cookie_consent_cookie_group_list" as url_cookies %}
+<!DOCTYPE html>
 <html>
-  <head>
-    <style type="text/css" media="screen">
-      body.with-cookie-bar {
-        padding-top: 35px;
-      }
-      .cookie-bar {
-        position: fixed;
-        width: 100%;
-        top:0;
-        text-align:center;
-        height:25px;
-        line-height: 25px;
-        background: #eee;
-      }
-    </style>
-  </head>
-  <body>
+    <head>
+        <link href="{% static 'styles.css' %}" rel="stylesheet" />
+    </head>
 
+  <body>
     <h1>Test page</h1>
 
-    <h2>
-      Social cookies
-    </h2>
+    <h2>Social cookies</h2>
     <p>
-      sharing button is displayed below only if "Social" cookies are accepted.
+        sharing button is displayed below only if "Social" cookies are accepted.
+        <button id="share-button" type="button" style="display:none">SHARE</button>
     </p>
-    <div class="share-gplus"><g:plusone size="small" count="false"></g:plusone></div>
 
+    {# NOTE - this section is not compatible with django's full page cache #}
     <h2>Optional cookies</h2>
     {% if request|cookie_group_accepted:"optional" %}
-      <p>
-        "optional" cookies accepted
-      </p>
+        <p>"optional" cookies accepted</p>
     {% elif request|cookie_group_declined:"optional" %}
-      <p>
-        "optional" cookies declined
-      </p>
+        <p>"optional" cookies declined</p>
     {% else %}
-      <p>
-        "optional" cookies not accepted or declined
-      </p>
+        <p>"optional" cookies not accepted or declined</p>
     {% endif %}
 
     {# not existing cookie group #}
     {% if request|cookie_group_accepted:"foo=*:.foo.com" %}
-      <p>
-        None existing cookies
-      </p>
+        <p>None existing cookies</p>
     {% endif %}
+    {# END of section not compatible with page cache #}
 
     <p>
-      <a href="{% url "cookie_consent_cookie_group_list" %}">Cookies policy</a>
+        <a href="{{ url_cookies }}">Cookies policy</a>
     </p>
 
-    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" ></script>
-    <script type="text/javascript" src={% static "cookie_consent/cookiebar.js" %}></script>
-
-    <script type="{% js_type_for_cookie_consent request "social" "*:.google.com" %}" data-varname="social">
-      (function() {
-        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
-        po.src = 'https://apis.google.com/js/plusone.js';
-        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
-      })();
-    </script>
-
-
     {% if request|cookie_consent_enabled %}
-      {% not_accepted_or_declined_cookie_groups request as cookie_groups %}
+        {% not_accepted_or_declined_cookie_groups request as cookie_groups %}
 
-      {% if cookie_groups %}
-        {% url "cookie_consent_cookie_group_list" as url_cookies %}
         {% cookie_consent_accept_url cookie_groups as url_accept %}
         {% cookie_consent_decline_url cookie_groups as url_decline %}
-        <script type="text/javascript">
-          var cookie_groups = [];
-          {% for cookie_group in cookie_groups %}
-            cookie_groups.push("{{ cookie_group.varname }}");
-          {% endfor %}
 
-          function ready(fn) {
-	          if (document.readyState != 'loading') {
-	            fn();
-	          } else if (document.addEventListener) {
-	            document.addEventListener('DOMContentLoaded', fn);
-	          } else {
-	            document.attachEvent('onreadystatechange', function() {
-		          if (document.readyState != 'loading')
-		            fn();
-	            });
-	          }
-          }
+        {# Set up the data and template for dynamic JS cookie bar #}
+        {% all_cookie_groups 'cookie-consent__cookie-groups' %}
+        {% comment %}
+            NOTE: to make this work with page caches, you'd typically leave out the
+            dynamic parts (such as {{ cookie_groups }}) and handle that dynamically
+            in JS.
+
+            For example, by getting the information dynamically from a template, putting
+            that in the template fragment and eventually calling the code from
+            cookiebar.module.js.
+
+            FIXME: add this to the docs
+        {% endcomment %}
+        <template id="cookie-consent__cookie-bar">
+            {% with cookie_groups=cookie_groups|join:", " %}
+            <div class="cookie-bar">
+                This site uses {{ cookie_groups }} cookies for better performance and user experience.
+                Do you agree to use these cookies?
+                {# Button is the more accessible role, but an anchor tag would also work #}
+                <button type="button" class="cookie-consent__accept">Accept</button>
+                <button type="button" class="cookie-consent__decline">Decline</button>
+                <a href="{{ url_cookies }}">Cookies info</a>
+            </div>
+            {% endwith %}
+        </template>
+        {% url 'cookie_consent_status' as status_url %}
+        {% include "./show-cookie-bar-script.html" with status_url=status_url %}
 
-          ready(function() {
-	          showCookieBar({
-              content: "{% filter escapejs %}{% with cookie_groups=cookie_groups|join:", " %}<div class="cookie-bar">This site uses {{ cookie_groups }} cookies for better performance and user experience. Do you agree to use cookies? <a href="{{ url_accept }}" class="cc-cookie-accept">Accept</a> <a href="{{ url_decline }}" class="cc-cookie-decline">Decline</a> <a href="{{ url_cookies }}">Cookies info</a></div>{% endwith %}{% endfilter %}",
-              cookie_groups: cookie_groups,
-              cookie_decline: "{% get_decline_cookie_groups_cookie_string request cookie_groups %}",
-              beforeDeclined: function() {
-                document.cookie = "{% get_decline_cookie_groups_cookie_string request cookie_groups %}";
-              }
-            });
-          });
-        </script>
-      {% endif %}
     {% endif %}
 
   </body>
diff --git a/testapp/urls.py b/testapp/urls.py
index fcaeb42..e6b2b6c 100644
--- a/testapp/urls.py
+++ b/testapp/urls.py
@@ -8,6 +8,11 @@
     path("admin/", admin.site.urls),
     path("cookies/", include("cookie_consent.urls")),
     path("", TestPageView.as_view(), name="test_page"),
+    path(
+        "legacy/",
+        TestPageView.as_view(template_name="legacy_test_page.html"),
+        name="legacy_test_page",
+    ),
 ]
 
 urlpatterns += staticfiles_urlpatterns()
diff --git a/tests/conftest.py b/tests/conftest.py
index 02ac3f4..73a760c 100644
--- a/tests/conftest.py
+++ b/tests/conftest.py
@@ -1,7 +1,20 @@
+import os
+from io import StringIO
+from pathlib import Path
+
+from django.core.management import call_command
+
 import pytest
 
+from cookie_consent.cache import delete_cache
 from cookie_consent.models import Cookie, CookieGroup
 
+TEST_APP_DIR = Path(__file__).parent.parent.resolve() / "testapp"
+
+# otherwise pytest-playwright and pytest-django don't play nice :(
+# See https://github.com/microsoft/playwright-pytest/issues/46
+os.environ["DJANGO_ALLOW_ASYNC_UNSAFE"] = "1"
+
 
 @pytest.fixture
 def required_cookiegroup(db):
@@ -25,3 +38,15 @@ def optional_cookiegroup(db):
     )
     Cookie.objects.create(cookiegroup=group, name="evil-tracking")
     return group
+
+
+@pytest.fixture
+def load_testapp_fixture(transactional_db):
+    fixture = str(TEST_APP_DIR / "fixture.json")
+    call_command("loaddata", fixture, stdout=StringIO())
+
+
+@pytest.fixture(scope="function", autouse=True)
+def before_each_after_each():
+    yield
+    delete_cache()
diff --git a/tests/test_cache.py b/tests/test_cache.py
index 806e2ee..c3d12b1 100644
--- a/tests/test_cache.py
+++ b/tests/test_cache.py
@@ -1,12 +1,15 @@
 # -*- coding: utf-8 -*-
 from django.test import TestCase, override_settings
 
-from cookie_consent.cache import get_cookie, get_cookie_group
+from cookie_consent.cache import delete_cache, get_cookie, get_cookie_group
 from cookie_consent.models import Cookie, CookieGroup
 
 
 class CacheTest(TestCase):
     def setUp(self):
+        super().setUp()
+        self.addCleanup(delete_cache)
+
         self.cookie_group = CookieGroup.objects.create(
             varname="optional",
             name="Optional",
diff --git a/tests/test_javascript_cookiebar.py b/tests/test_javascript_cookiebar.py
new file mode 100644
index 0000000..50214e3
--- /dev/null
+++ b/tests/test_javascript_cookiebar.py
@@ -0,0 +1,76 @@
+"""
+Test the behaviour of the dynamic (JS based) cookiebar module.
+
+See docs: https://playwright.dev/python/docs/test-runners for CLI options.
+"""
+from django.urls import reverse
+
+import pytest
+from playwright.sync_api import Page, expect
+
+pytestmark = [pytest.mark.django_db, pytest.mark.e2e]
+
+
+COOKIE_BAR_CONTENT = """
+This site uses Social, Optional cookies for better performance and user experience.
+Do you agree to use these cookies?
+"""
+
+
+@pytest.fixture(scope="function", autouse=True)
+def before_each_after_each(live_server, page: Page, load_testapp_fixture):
+    test_page_url = f"{live_server.url}{reverse('test_page')}"
+    page.goto(test_page_url)
+    yield
+
+
+def test_cookiebar_shows_initially(page: Page):
+    cookiebar = page.get_by_text(COOKIE_BAR_CONTENT)
+    expect(cookiebar).to_be_visible()
+
+
+def test_cookiebar_accept_all(page: Page):
+    accept_button = page.get_by_role("button", name="Accept")
+    expect(accept_button).to_be_visible()
+
+    accept_button.click()
+
+    expect(page.get_by_text(COOKIE_BAR_CONTENT)).not_to_be_visible()
+    share_button = page.get_by_role("button", name="SHARE")
+    expect(share_button).to_be_visible()
+
+
+def test_cookiebar_decline_all(page: Page):
+    decline_button = page.get_by_role("button", name="Decline")
+    expect(decline_button).to_be_visible()
+
+    decline_button.click()
+
+    expect(page.get_by_text(COOKIE_BAR_CONTENT)).not_to_be_visible()
+    share_button = page.get_by_role("button", name="SHARE")
+    expect(share_button).not_to_be_visible()
+
+
+@pytest.mark.parametrize("btn_text", ["Accept", "Decline"])
+def test_cookiebar_not_shown_anymore_after_accept_or_decline(btn_text: str, page: Page):
+    expect(page.get_by_text(COOKIE_BAR_CONTENT)).to_be_visible()
+
+    button = page.get_by_role("button", name=btn_text)
+    expect(button).to_be_visible()
+
+    button.click()
+    expect(page.get_by_text(COOKIE_BAR_CONTENT)).not_to_be_visible()
+
+    page.reload()
+    expect(page.get_by_text(COOKIE_BAR_CONTENT)).not_to_be_visible()
+
+
+def test_on_accept_handler_runs_on_load(page: Page, live_server):
+    accept_button = page.get_by_role("button", name="Accept")
+    accept_button.click()
+
+    test_page_url = f"{live_server.url}{reverse('test_page')}"
+    page.goto(test_page_url)
+
+    share_button = page.get_by_role("button", name="SHARE")
+    expect(share_button).to_be_visible()
diff --git a/tests/test_legacy_javascript_cookiebar.py b/tests/test_legacy_javascript_cookiebar.py
new file mode 100644
index 0000000..f267e85
--- /dev/null
+++ b/tests/test_legacy_javascript_cookiebar.py
@@ -0,0 +1,77 @@
+"""
+These tests mostly exist to assert code coverage while giving library users time
+to transition to the new implementation.
+
+TODO: remove in django-cookie-consent 1.0
+"""
+from django.urls import reverse
+
+import pytest
+from playwright.sync_api import Page, expect
+
+pytestmark = [pytest.mark.django_db, pytest.mark.e2e]
+
+
+COOKIE_BAR_CONTENT = """
+This site uses Social, Optional cookies for better performance and user experience.
+Do you agree to use cookies?
+"""
+
+
+@pytest.fixture(scope="function", autouse=True)
+def before_each_after_each(live_server, page: Page, load_testapp_fixture):
+    test_page_url = f"{live_server.url}{reverse('legacy_test_page')}"
+    page.goto(test_page_url)
+    yield
+
+
+def test_cookiebar_shows_initially(page: Page):
+    cookiebar = page.get_by_text(COOKIE_BAR_CONTENT)
+    expect(cookiebar).to_be_visible()
+
+
+def test_cookiebar_accept_all(page: Page):
+    accept_link = page.get_by_role("link", name="Accept")
+    expect(accept_link).to_be_visible()
+
+    accept_link.click()
+
+    expect(page.get_by_text(COOKIE_BAR_CONTENT)).not_to_be_visible()
+    share_button = page.get_by_role("button", name="SHARE")
+    expect(share_button).to_be_visible()
+
+
+def test_cookiebar_decline_all(page: Page):
+    decline_link = page.get_by_role("link", name="Decline")
+    expect(decline_link).to_be_visible()
+
+    decline_link.click()
+
+    expect(page.get_by_text(COOKIE_BAR_CONTENT)).not_to_be_visible()
+    share_button = page.get_by_role("button", name="SHARE")
+    expect(share_button).not_to_be_visible()
+
+
+@pytest.mark.parametrize("btn_text", ["Accept", "Decline"])
+def test_cookiebar_not_shown_anymore_after_accept_or_decline(btn_text: str, page: Page):
+    expect(page.get_by_text(COOKIE_BAR_CONTENT)).to_be_visible()
+
+    link = page.get_by_role("link", name=btn_text)
+    expect(link).to_be_visible()
+
+    link.click()
+    expect(page.get_by_text(COOKIE_BAR_CONTENT)).not_to_be_visible()
+
+    page.reload()
+    expect(page.get_by_text(COOKIE_BAR_CONTENT)).not_to_be_visible()
+
+
+def test_on_accept_handler_runs_on_load(page: Page, live_server):
+    accept_link = page.get_by_role("link", name="Accept")
+    accept_link.click()
+
+    test_page_url = f"{live_server.url}{reverse('legacy_test_page')}"
+    page.goto(test_page_url)
+
+    share_button = page.get_by_role("button", name="SHARE")
+    expect(share_button).to_be_visible()
diff --git a/tests/test_models.py b/tests/test_models.py
index b26a638..3637708 100644
--- a/tests/test_models.py
+++ b/tests/test_models.py
@@ -2,11 +2,14 @@
 from django.core.exceptions import ValidationError
 from django.test import TestCase
 
+from cookie_consent.cache import delete_cache
 from cookie_consent.models import Cookie, CookieGroup, validate_cookie_name
 
 
 class CookieGroupTest(TestCase):
     def setUp(self):
+        self.addCleanup(delete_cache)
+
         self.cookie_group = CookieGroup.objects.create(
             varname="optional",
             name="Optional",
@@ -24,6 +27,8 @@ def test_get_version(self):
 
 class CookieTest(TestCase):
     def setUp(self):
+        self.addCleanup(delete_cache)
+
         self.cookie_group = CookieGroup.objects.create(
             varname="optional",
             name="Optional",
diff --git a/tox.ini b/tox.ini
index db65314..4f8ef89 100644
--- a/tox.ini
+++ b/tox.ini
@@ -34,7 +34,21 @@ deps =
   django42: Django~=4.2.0
 commands =
   pytest tests \
-   --junitxml=reports/junit.xml \
+   -m 'not e2e' \
+   --cov --cov-report xml:reports/coverage-{envname}.xml \
+   {posargs}
+
+[testenv:e2e]
+setenv =
+    DJANGO_SETTINGS_MODULE=testapp.settings
+    PYTHONPATH={toxinidir}
+extras =
+    tests
+    coverage
+deps =
+  Django~=4.2.0
+commands =
+  pytest tests \
    --cov --cov-report xml:reports/coverage-{envname}.xml \
    {posargs}