ENG-2305: Add experience config ID and Property ID class to embedded consent for per-brand CSS

changelog/7228.yaml

@@ -0,0 +1,5 @@
+type: Fixed
+description: Added experience config ID and property ID classes to embedded consent body
+pr: 7228
+labels: []
+

clients/privacy-center/public/embedded-consent.html

@@ -81,7 +81,54 @@ <h3 id="fides-embed-no-results" class="no-results no-results--is-hidden">
       </h3>
     </main>
     <script>
+      /**
+       * Sanitize a string to be a valid CSS class name.
+       * - Replaces invalid characters with hyphens
+       * - Collapses multiple hyphens
+       * - Trims leading/trailing hyphens
+       * - Prefixes with underscore if starts with digit or hyphen+digit
+       */
+      const toValidClassName = (str) => {
+        let result = str
+          .replace(/[^A-Za-z0-9_-]/g, "-")
+          .replace(/-+/g, "-")
+          .replace(/^-|-$/g, "");
+        if (/^[0-9]/.test(result) || /^-[0-9]/.test(result)) {
+          result = "_" + result;
+        }
+        return result;
+      };
+
       const onInitialized = () => {
+        // Add experience config ID and property ID as classes to the body for per-brand CSS styling
+        const experienceConfigId =
+          window.Fides?.experience?.experience_config?.id;
+        if (experienceConfigId) {
+          try {
+            window.document.body.classList.add(
+              toValidClassName(experienceConfigId),
+            );
+          } catch (e) {
+            window.fidesDebugger?.(
+              "Failed to add experience config ID as class:",
+              experienceConfigId,
+              e,
+            );
+          }
+        }
+        const propertyId = window.Fides?.experience?.property_id;
+        if (propertyId) {
+          try {
+            window.document.body.classList.add(toValidClassName(propertyId));
+          } catch (e) {
+            window.fidesDebugger?.(
+              "Failed to add property ID as class:",
+              propertyId,
+              e,
+            );
+          }
+        }
+
         let fidesUIShown = false;
         window.addEventListener("FidesUIShown", () => {
           fidesUIShown = true;