Styling Explicit-Consent-Prompt-Manager for 3 sites

[ryan_andrews]

Hello,

We have 3 sites attached to our Tealium Profile.  How do I go about adding a different instance of the Explicit-Consent-Prompt-Manager to each?  really I'll i need to do is make some minor styling adjustments.

Thanks

[LordLingham]

Hi @ryan_andrews

As you've said its mainly some styling changes, im assuming this would be primarly css changes.

You can either define all of the options within the css template in the profile - and then use the Javascript template to add in the required classes using a statement to check on the domain.

.example1 { 
    font-size: 0.9em; 
} ,
.example2 {
    font-size: 0.9em;
}

i.e 

if (utag.data['dom'domain'] == "example1.com"){
    var element = document.getElementById("myDIV");
    element.classList.add("example1");
} else if (utag.data['dom'domain'] == "example2.com") {
    var element = document.getElementById("myDIV");
    element.classList.add("example2");
}

Alternatively, you can defined the style in the javascript template, and then add whichever one is required based on a condition like the domain check again like the example above

var styles = `
    .example1 { font-size: 0.9em; } 
`
var styleSheet = document.createElement("style")
styleSheet.type = "text/css"
styleSheet.innerText = styles
document.head.appendChild(styleSheet)

Finally, the css is stored in the following property

utag.gdpr.consent_prompt.content.css

In theory you could overwrite this in an extension - but this wouldn't be the best way as you may run in to timing issues. I'd look in to the first two options above.

If you need to change the HTML, you could apply a similar approach - either creating the HTML for everything in the template, and using javascript to changes the css of the elements not needed to "hide them", or you could add the HTML elements dynamically through the Javascript (similar to how you could inject the css).

Hopefully this gives you enough of an idea with a few of the options you have to acheive something like this!