module PrivacyWire - Cookie Management & async external asset loading

[Tiberium]

I put the styles for it in the head section of my html/_main.php manual in a <style>-tag. For example:

<style>
	/* Cookie Banner */
	.show-banner>.privacywire-page-wrapper,
	.show-options>.privacywire-page-wrapper,
	.show-message>.privacywire-page-wrapper {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		backdrop-filter: blur(5px);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.privacywire {
		display: none;
	}

	.show-banner .privacywire.privacywire-banner,
	.show-options .privacywire.privacywire-options,
	.show-message .privacywire.privacywire-message {
		display: block;
		position: relative;
		left: auto;
		right: auto;
		bottom: auto;
		max-width: 850px;
		padding: 2rem;
		color: #000;
		background-color: #fff;
	}

	.privacywire-page-wrapper input {
		margin-right: 0.5rem;
	}

	.privacywire-page-links {
		margin-top: 1rem;
	}

	.privacywire-buttons button,
	.privacywire-page-links a {
		margin: 0.5rem 0.5rem 0.5rem 0;
	}

	@media screen and (min-width: 992px) {

		.privacywire-buttons button,
		.privacywire-page-links a {
			margin: 0.5rem;
		}

		/* Don't give the first button margin-left */
		.privacywire-buttons button:first-child,
		.privacywire-page-links a:first-child {
			margin-left: 0;
		}
	}
</style>

So it loaded as first. That resolved it for my sites. (Also with fixed/relative notation)

[thomas]

Hi @joshua,

I am getting the following error while trying to implement cookie consent for a Youtube iFrame:

Uncaught TypeError: "text/javascript".poster is undefined

What am I doing wrong? I tried both Ryan's TextFormatterVideoEmbed and manually adding all the attributes. All works fine but the src of the iframe is never resolved which I guess is due to the error above.

Any help is appreciated

thanks

 

Edit:
I am pretty sure this is caused by an error/missing semicolon in the PrivacyWire JS. Not sure how this works for anyone??

 

[ngrmm]

On 3/20/2025 at 9:11 AM, thomas said:

Hi @joshua,

I am getting the following error while trying to implement cookie consent for a Youtube iFrame:

Uncaught TypeError: "text/javascript".poster is undefined

Edit:
I am pretty sure this is caused by an error/missing semicolon in the PrivacyWire JS. Not sure how this works for anyone??

 

@thomas had the same error. AI told me to change this:
 

updateAllowedElementOther(e) {
    const {
        dataset: t
    } = e;
    (e.type =
        t.type ??
        "text/javascript".poster.forEach((s) => {
            void 0 !== t[s] && (e[s] = t[s]);
        })),
    this.removeUnusedAttributesFromElement(e);
}

to this

updateAllowedElementOther(e) {
    const {
        dataset: t
    } = e;
    e.type = t.type ?? "text/javascript";
    ["src", "async", "defer"].forEach((s) => {
        if (t[s] !== undefined) e[s] = t[s];
    });
    this.removeUnusedAttributesFromElement(e);
}

It's working now. But I'm sure it's not the correct way and @joshua knows how deal with this problem and will update the code!

[thomas]

35 minutes ago, ngrmm said:

It's working now. But I'm sure it's not the correct way and @joshua knows how deal with this problem and will update the code!

Thanks! I changed it to this and added the Javascript src to my package. Works fine but isn't really the proper way to use a ProcessWire Module I suppose. Let's hope @joshua fixes this 🙂

	updateAllowedElementOther(el) {
		const { dataset } = el;
		el.type = dataset.type ?? "text/javascript";
		["src", "srcset", "srcdoc", "poster"].forEach((k) => {
			if (dataset[k] !== undefined) {
				el[k] = dataset[k];
			}
		});
		this.removeUnusedAttributesFromElement(el);
	}

 

[tires]

I embed youtube videos and google maps into my site in various ways. To make the site privacy compliant, I would like to display an overlay above each video and map with a button “Load content” (loads the content once) and “Always load content” (sets the corresponding privacy wire cookie an loads the contents always).
Is there already a solution for this?
What is the best way to do this?

Edited June 19 by tires

[tires]

On 6/19/2025 at 11:37 PM, tires said:

I embed youtube videos and google maps into my site in various ways. To make the site privacy compliant, I would like to display an overlay above each video and map with a button “Load content” (loads the content once) and “Always load content” (sets the corresponding privacy wire cookie an loads the contents always).
Is there already a solution for this?
What is the best way to do this?

Ok, I have now found out that you can create a Consent banner with button, with the attributes: class="require-consent" data-src="https://www.youtube-nocookie.com/embed/abcd" data-category="external_media" data-ask-consent="1".
This also works wonderfully, BUT only for 1 element.
I have a YouTube video (iframe) and a google map (div) on my website. Unfortunately, a banner with a consent button is only displayed for the first element.

Only when I comment out the iframe, the banner for the div #standortmap is displayed.

echo '<iframe class="require-consent" data-src="https://www.youtube-nocookie.com/embed/123" data-category="external_media" data-ask-consent="1" data-ask-consent-message="Externere Inhalte von google.com und youtube.com werden aus Datenschutz&shy;gründen erst nach expliziter Zustimmung geladen."  data-ask-consent-button-label="Video laden" id="youtube-video" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen  width="100%" height="100%"   ></iframe> <br><br>';  

echo '<div id="standortmap" data-lat="11.123" data-lng="1.123" data-zoom="12" data-category="external_media" data-ask-consent="1" data-ask-consent-message="Externere Inhalte von google.com und youtube.com werden aus Datenschutz&shy;gründen erst nach expliziter Zustimmung geladen." data-ask-consent-button-label="Karte laden" style="height: 300px;"></div>'; 

Is this an error? Or can the module only display one banner at a time?