Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
thabofletcher merged 6 commits into from
Jan 16, 2026
Merged

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

thabofletcher merged 6 commits into from
Jan 16, 2026
+52 −0

Conversation

@thabofletcher
Copy link
Contributor

@thabofletcher thabofletcher commented Jan 14, 2026 •
edited
Loading

Ticket ENG-2305

Description Of Changes

Adds the experience config ID and property ID as classes to the <body> element in the embedded consent HTML page. This enables per-brand CSS styling for mobile TCF consent dialogs, matching the pattern already used on web pages.

When the FidesInitialized event fires:

  • The experience config ID (e.g., pri_62d0c439-ac62-4af5-a2e0-7829efa881cc) is added as a class to the body element
  • The property ID (e.g., FDS-MZQEFR) is added as a class to the body element

Existing CSS rules that target elements using these IDs will now apply to the embedded consent page.

Code Changes

  • Added logic to embedded-consent.html to extract window.Fides.experience.experience_config.id and window.Fides.experience.property_id and add them as classes to the body element on initialization

Steps to Confirm

  1. Start the Privacy Center locally
  2. Navigate to http://localhost:3001/embedded-consent.html?geolocation=de&property_id=<your-property-id>
  3. Open DevTools and inspect the <body> element
  4. Verify the experience config ID (e.g., pri_xxx-xxx-xxx) is present as a class on the body
  5. Verify the property ID (e.g., FDS-XXXXXX) is present as a class on the body
  6. Both classes can now be used for per-brand CSS targeting
Screenshot 2026-01-15 at 10 27 33 AM

Now with Property ID sanitization!

Screenshot 2026-01-15 at 11 57 31 AM

Pre-Merge Checklist

  • Issue requirements met
  • All CI pipelines succeeded
  • CHANGELOG.md updated
    • Add a db-migration This indicates that a change includes a database migration label to the entry if your change includes a DB migration
    • Add a high-risk This issue suggests changes that have a high-probability of breaking existing code label to the entry if your change includes a high-risk change (i.e. potential for performance impact or unexpected regression) that should be flagged
    • Updates unreleased work already in Changelog, no new entry necessary
  • UX feedback:
    • All UX related changes have been reviewed by a designer
    • No UX review needed
  • Followup issues:
    • Followup issues created
    • No followup issues
  • Database migrations:
    • Ensure that your downrev is up to date with the latest revision on main
    • Ensure that your downgrade() migration is correct and works
      • If a downgrade migration is not possible for this change, please call this out in the PR description!
    • No migrations
  • Documentation:
    • Documentation complete, PR opened in fidesdocs
    • Documentation issue created in fidesdocs
    • If there are any new client scopes created as part of the pull request, remember to update public-facing documentation that references our scope registry
    • No documentation updates required

@vercel
Copy link
Contributor

vercel bot commented Jan 14, 2026 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

2 Skipped Deployments
Project Deployment Review Updated (UTC)
fides-plus-nightly Ignored Ignored Preview Jan 16, 2026 4:39pm
fides-privacy-center Ignored Ignored Jan 16, 2026 4:39pm

Request Review

@thabofletcher thabofletcher force-pushed the ENG-2305-add-experience-config-class-to-embedded-consent branch from 8ce1a59 to ab00983 Compare January 14, 2026 23:48
@thabofletcher thabofletcher marked this pull request as ready for review January 14, 2026 23:59
@thabofletcher thabofletcher requested a review from a team as a code owner January 14, 2026 23:59
@thabofletcher thabofletcher requested review from lucanovera and removed request for a team January 14, 2026 23:59
@greptile-apps
Copy link
Contributor

greptile-apps bot commented Jan 15, 2026

Greptile Summary

Adds the experience config ID (e.g., pri_62d0c439-ac62-4af5-a2e0-7829efa881cc) as a class to the <body> element in the embedded consent HTML page. This enables per-brand CSS styling for mobile TCF consent dialogs by allowing CSS rules to target specific experience configurations.

  • The experience config ID is extracted from window.Fides.experience.experience_config.id after the FidesInitialized event fires
  • Uses optional chaining and conditional checks to safely add the class only when the ID exists
  • The ID format is safe for CSS class names (alphanumeric with hyphens and underscores)

Confidence Score: 5/5

  • This PR is safe to merge with minimal risk
  • The change is small, well-contained, and follows defensive programming practices with optional chaining and conditional checks. Experience config IDs are generated server-side with a safe UUID format, eliminating XSS concerns. The implementation is straightforward and only affects the embedded consent page.
  • No files require special attention

Important Files Changed

Filename Overview
clients/privacy-center/public/embedded-consent.html Adds experience config ID as CSS class to body element for per-brand styling
changelog/7228.yaml Changelog entry documenting the new feature

@thabofletcher thabofletcher force-pushed the ENG-2305-add-experience-config-class-to-embedded-consent branch 5 times, most recently from 7260070 to ea980a8 Compare January 15, 2026 18:35
@thabofletcher thabofletcher force-pushed the ENG-2305-add-experience-config-class-to-embedded-consent branch from ea980a8 to d19df0d Compare January 15, 2026 18:35
@thabofletcher thabofletcher changed the title ENG-2305: Add experience config ID class to embedded consent for per-brand CSS ENG-2305: Add experience config ID and Property ID class to embedded consent for per-brand CSS Jan 15, 2026
@thabofletcher thabofletcher force-pushed the ENG-2305-add-experience-config-class-to-embedded-consent branch from 58b1a76 to fb42fdb Compare January 15, 2026 19:42
@thabofletcher thabofletcher added this pull request to the merge queue Jan 16, 2026
Merged via the queue into main with commit 5158edb Jan 16, 2026
42 checks passed
@thabofletcher thabofletcher deleted the ENG-2305-add-experience-config-class-to-embedded-consent branch January 16, 2026 17:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@tvandort tvandort tvandort approved these changes

@lucanovera lucanovera Awaiting requested review from lucanovera lucanovera is a code owner automatically assigned from ethyca/frontend

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@thabofletcher @tvandort