https://mpsweb.net/ms-clarity-consent/msClarityConsent.js

1const ms_htmlCode = `
2  <div class="ms_clarity_div" style="display: none;">
3      <p class="ms_clarity_msg"><strong>Do you consent to the collection of additional analytics data to help us improve your browsing experience and optimize our website&#x27;s performance?</strong>Your consent allows us to better understand user preferences and deliver a more tailored and seamless experience.</p>
4      <div class="ms_clarity_btns_wrapper">
5        <div id="clarity-yes-btn" role="button" class="ms_clarity_btn">Allow</div>
6        <div id="clarity-no-btn" role="button" class="ms_clarity_btn gray">Deny</div>
7      </div>
8    </div>
9  `;
10
11function setCookie(name, value, days) {
12  try {
13    const date = new Date();
14    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
15    const expires = "expires=" + date.toUTCString();
16    document.cookie = `${name}=${value}; ${expires}; path=/`;
17  } catch (error) {
18    console.log(error)
19  }
20}
21
22function getCookie(name) {
23  const cookies = document.cookie.split("; ");
24  for (let cookie of cookies) {
25    const [key, value] = cookie.split("=");
26    if (key === name) return value;
27  }
28  return null;
29}
30
31if (getCookie("MPS_MS_Consent") == "true") {
32  window.clarity("consent");
33} else if (!document.cookie.includes("MPS_MS_Consent")) {
34  document.body.insertAdjacentHTML("beforeend", ms_htmlCode);
35  const ms_clarity_div = document.querySelector(".ms_clarity_div");
36  const ms_yesBtn = document.querySelector("#clarity-yes-btn");
37  const ms_noBtn = document.querySelector("#clarity-no-btn");
38
39  // add style to head
40  const ms_cssLink = document.createElement("link");
41  ms_cssLink.rel = "stylesheet";
42  ms_cssLink.href =
43    "https://mpsweb.net/ms-clarity-consent/msClarityConsent.css"; // path to CSS file
44
45  ms_cssLink.onload = () => {
46    ms_clarity_div.style.display = "flex";
47  };
48  document.head.appendChild(ms_cssLink);
49
50  if (ms_yesBtn && ms_clarity_div) {
51    ms_yesBtn.addEventListener("click", () => {
52      try {
53        try {
54          setCookie('MPS_MS_Consent', 'true', 1)
55          window.clarity("consent");
56        } catch (error) {
57          console.error("MS Clarity not found");
58        }
59      } catch (error) {
60        console.error(error);
61      }
62      ms_clarity_div.style.display = "none";
63    });
64  }
65
66  if (ms_noBtn && ms_clarity_div) {
67    ms_noBtn.addEventListener("click", () => {
68      try {
69        setCookie('MPS_MS_Consent', 'false', 1)
70      } catch (error) {
71        console.error(error);
72      }
73      ms_clarity_div.style.display = "none";
74    });
75  }
76
77  // custom background color
78  const ms_bgColor = "darkgray";
79  const ms_textColor = "black";
80  // yes button colors
81  const ms_yesBtnBgColor = "black";
82  const ms_yesBtnColor = "white";
83  // no button colors
84  const ms_noBtnBgColor = "gray";
85  const ms_noBtnColor = "white";
86
87  // pop up div style
88  if (ms_clarity_div) {
89    ms_clarity_div.style.color = ms_textColor;
90    ms_clarity_div.style.backgroundColor = ms_bgColor;
91  }
92
93  // yes div style
94  if (ms_yesBtn) {
95    ms_yesBtn.style.backgroundColor = ms_yesBtnBgColor;
96    ms_yesBtn.style.color = ms_yesBtnColor;
97  }
98
99  // no div style
100  if (ms_noBtn) {
101    ms_noBtn.style.backgroundColor = ms_noBtnBgColor;
102    ms_noBtn.style.color = ms_noBtnColor;
103  }
104}