“How can I change the theme inside the iframe once it’s already loaded?”
Use the following example. As of right now you send an message to the Iframe — And let our app know “Please switch the theme to this theme mode” — So when your customers change their theme to dark, you will change it into the iframe too.
<script>
window.changeTheme = (value) => {
// Get the ID of the Iframe so the code knows where to send this message to.
const doc = document.getElementById("privacy-policy-iframe");
if (!doc || (doc && !doc.contentWindow)) return false; // Safety
// Send the message
doc.contentWindow.postMessage(
{
type: "changeTheme",
payload: {
mode: value, // can be either "light" or "dark"
},
},
"*"
);
};
</script>
<button onclick="window.changeTheme('light')">Change theme light</button>
<button onclick="window.changeTheme('dark')">Change theme dark</button>
What if I want to Iframe to load with a specific theme right at the start?
<iframe
title="Privasee"
id="privacy-policy-iframe"
frameborder="0"
src="http://localhost:3000/embedded-privacy-portal/{companyId}?theme=dark"
style="width: 100%; height: 100vh"
></iframe>
As you can see in the example above all you have to do is add to the iframe’s src a ?theme=dark or ?theme=light
And then the privacy portal will load with that theme mode.
Example of scenario:
The website is now in light mode.
The user taps to change it to dark mode.
Now he goes to homepage.
He comes back to privacy policy and now he needs to see the portal in dark mode so you have to add ?theme=dark to the src.