Up until February 2025, customization of the base Preference Center in Customer Insights was problematic because of limitations enforced in editing the HTML Preference Center.
When editing Javascript in your preference center, regardless of the code you wrote, it would be subsequently encased within a <safe-script> javascript tag, preventing more complex javascript from being executed.
With the latest release of v1.154652.144, this limitation no longer exists, and code you add to your Preference Centers now executes as correctly.
Custom JavaScript Code
Take the following snippet which adds an event handler to the “Submit” button.
function AlertMe() {
alert("You clicked this button.");
}
const searchParams = new URLSearchParams(window.location.href);
document.getElementById("submitme").addEventListener("click", AlertMe);
}
This code is pretty simple but previously would have been ignored, however, now when accessed from your Preference Center, the page operates as intended.
Bilingual Preference Centers
A further extension of using JavaScript without the safe-script tags can now be extended to creating your own bilingual Preference Centers and embedding the code directly into your preference center (as opposed to having to create your own Portal via an External Link. This will greatly simplify your implementation if you don’t have the resources to create something this large and instead will only need to write some custom JavaScript to
- Detect the language of the user.
- Store the labels and text for your fields and content.
- Provide a way to render the page accordingly.
With the added support of Event Listeners as indicated above, you will not be able to implement onClick toggling functionality that will allow users to switch between languages and update their preferences on the fly.
Currently, Microsoft’s documentation still points to information about the <SAFE-SCRIPT> tag, which is odd but is still a good read on how to use JavaScript in your Preference Center.