1const amplitudeKey = document.querySelector(
 2  'meta[name="amplitude-key"]',
 3)?.content;
 4const consentInstance = document.querySelector(
 5  'meta[name="consent-io-instance"]',
 6)?.content;
 7
 8document.addEventListener("DOMContentLoaded", () => {
 9  if (!consentInstance || consentInstance.length === 0) return;
10  const { getOrCreateConsentRuntime } = window.c15t;
11
12  const { consentStore } = getOrCreateConsentRuntime({
13    mode: "c15t",
14    backendURL: consentInstance,
15    consentCategories: ["necessary", "measurement", "marketing"],
16    storageConfig: {
17      crossSubdomain: true,
18    },
19    scripts: [
20      {
21        id: "amplitude",
22        src: `https://cdn.amplitude.com/script/${amplitudeKey}.js`,
23        category: "measurement",
24        onLoad: () => {
25          window.amplitude.init(amplitudeKey, {
26            fetchRemoteConfig: true,
27            autocapture: true,
28          });
29        },
30      },
31    ],
32  });
33
34  let previousActiveUI = consentStore.getState().activeUI;
35  const banner = document.getElementById("c15t-banner");
36  const configureSection = document.getElementById("c15t-configure-section");
37  const configureBtn = document.getElementById("c15t-configure-btn");
38  const measurementToggle = document.getElementById("c15t-toggle-measurement");
39  const marketingToggle = document.getElementById("c15t-toggle-marketing");
40
41  const toggleConfigureMode = () => {
42    const currentConsents = consentStore.getState().consents;
43    measurementToggle.checked = currentConsents
44      ? (currentConsents.measurement ?? false)
45      : false;
46    marketingToggle.checked = currentConsents
47      ? (currentConsents.marketing ?? false)
48      : false;
49    configureSection.style.display = "flex";
50    configureBtn.innerHTML = "Save";
51    configureBtn.className = "c15t-button secondary";
52    configureBtn.title = "";
53  };
54
55  consentStore.subscribe((state) => {
56    const hideBanner =
57      state.activeUI === "none" ||
58      (state.activeUI === "banner" && state.model === "opt-out");
59    banner.style.display = hideBanner ? "none" : "block";
60
61    if (state.activeUI === "dialog" && previousActiveUI !== "dialog") {
62      toggleConfigureMode();
63    }
64
65    previousActiveUI = state.activeUI;
66  });
67
68  configureBtn.addEventListener("click", () => {
69    if (consentStore.getState().activeUI === "dialog") {
70      consentStore
71        .getState()
72        .setConsent("measurement", measurementToggle.checked);
73      consentStore.getState().setConsent("marketing", marketingToggle.checked);
74      consentStore.getState().saveConsents("custom");
75    } else {
76      consentStore.getState().setActiveUI("dialog");
77    }
78  });
79
80  document.getElementById("c15t-accept").addEventListener("click", () => {
81    consentStore.getState().saveConsents("all");
82  });
83
84  document.getElementById("c15t-decline").addEventListener("click", () => {
85    consentStore.getState().saveConsents("necessary");
86  });
87
88  document
89    .getElementById("c15t-manage-consent-btn")
90    .addEventListener("click", () => {
91      consentStore.getState().setActiveUI("dialog");
92    });
93});