n/a
Unable to create a custom Consent API modal
I have read the documentation, and tried the adding and modifying example scripts in Zaraz → Consent → Consent Modal Text.
I am trying to replicate the consent modal shared as the screenshot. I am unable to trigger the consent modal after entering it from Zaraz → Consent → Consent Modal Text.
Code I have in the Consent Modal Text:
<h2 id="consent_modal_title">Manage Consent</h2>
<p>
To provide the best experiences, we use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us to process data such as browsing behavior or unique IDs on this site. Not consenting or withdrawing consent, may adversely affect certain features and functions.
</p>
<script>
function getCookie(name) {
const value = '; ' + document.cookie;
return value?.split('; '+name+'=')[1]?.split(";")[0]
}
function handleZarazConsentAPIReady() {
const consent_cookie = getCookie("zaraz-consent");
if (!consent_cookie) {
zaraz.consent.modal = true;
}
}
if (zaraz.consent?.APIReady) {
handleZarazConsentAPIReady()
} else {
document.addEventListener("zarazConsentAPIReady", handleZarazConsentAPIReady)
}
</script>
I have also obviously tried initialising the consent modal from Zaraz -> Settings -> Endpoints -> Initialization script and Zaraz -> Settings -> Endpoints -> Main script using the below code:
function getCookie(name) {
const value = '; ' + document.cookie;
return value?.split('; '+name+'=')[1]?.split(";")[0]
}
function handleZarazConsentAPIReady() {
const consent_cookie = getCookie("zaraz-consent");
if (!consent_cookie) {
zaraz.consent.modal = true;
}
}
if (zaraz.consent?.APIReady) {
handleZarazConsentAPIReady()
} else {
document.addEventListener("zarazConsentAPIReady", handleZarazConsentAPIReady)
}
It’s impossible for us to help without seeing the website live, but it sounds like you have the zaraz-consent cookie set, so the modal isn’t displayed. You can also open the browser devtools and type zaraz.consent.modal = true just to make sure Zaraz is loaded correctly.
Thanks for the response @yoav_zaraz.
Please bear with me, since I am not in the liberty share the url. I am looking for these answers:
Enable Consent Management in Zaraz → Consent.Show consent modal in Zaraz → Consent.I have the HTML. with the below javascript:
function getCookie(name) {
const value = `; ${document.cookie}`
return value?.split(`; ${name}=`)[1]?.split(";")[0]
}
function handleZarazConsentAPIReady() {
const consent_cookie = getCookie("cf_consent")
const isEUCountry = "{{system.device.location.isEUCountry}}" === "1"
if (!consent_cookie) {
if (isEUCountry) {
zaraz.consent.modal = true
} else {
zaraz.consent.setAll(true)
zaraz.consent.sendQueuedEvents()
}
}
}
if (zaraz.consent?.APIReady) {
handleZarazConsentAPIReady()
} else {
document.addEventListener("zarazConsentAPIReady", handleZarazConsentAPIReady)
}
Q1. Should the above js trigger consent modal automatically without me changing the Zaraz -> Settings -> Endpoints -> Initialization script or Zaraz -> Settings -> Endpoints -> Main script? If not, in which end point should I trigger the custom js? Main script or initialization script? Or should I manually load as shown in Load Zaraz manually | Cloudflare Zaraz docs ?
Q2. How do I get all the custom preferences through consent api? All the checkboxes and it’s text. Will it get auto populated or am I correct to assume I get it from zaraz.consent.getAll();. ?
Thanks in advance.
Hey,
1 - I don’t see the relation between the endpoints to your consent issues. You don’t need to set any endpoints. It’s only used if you want to customize the URLs Zaraz is using.
2 - You can get all the preferences from getAll() indeed. Not sure what you mean by “will it get auto populated”. The modal itself is auto-populated and you don’t need to build it yourself.
Hi Thanks for taking the time to reply.
I was able to trigger the modal properly.
Not sure what you mean by “will it get auto populated”. The modal itself is auto-populated and you don’t need to build it yourself.
No. My understanding was that I can write the custom html in the below area in Zaraz->Consent->Consent Modal Text and use the consent API to handle the behaviour.
But if my understanding is right, now, for a fully customised consent modal. i have to write the HTML in my website and use the consent api to handle the checkbox and other consent behaviours along with vendor information. Like below (I am unable to upload images hence the html):
<details open="">
<summary>Targetting Cookies</summary>
<div>
<p>These cookies may be set through our site by our advertising partners. They may be used by those companies to build a profile of your interests and show you relevant adverts on other sites. They do not store directly personal information, but are based on uniquely identifying your browser and internet device. If you do not allow these cookies, you will experience less targeted advertising.</p>
<p></p>
<details>
<summary>1 partners</summary>
<ul class="cf_consent-vendors-list cf_consent-compact"><li><span>Vendor</span><span class="cf_label">not IAB TCF</span></li></ul>
</details>
</div>
</details>
Which is why I was asking if vendor text and partners info will be auto populated or not through consent api calls. Or should I manually copy the vendor data text like above info from the default consent modal and use consent api to to handle the rest of the behaviour? I couldn’t figure out where in consent api to get this.
You can use the “Consent Modal Text” to put some details that explain your use cases, but if you’re doing a fully customized consent modal with your own HTML, you’re on your own and yes you’ll have the use the APIs. Vendor text etc will not be populated automatically because Zaraz doesn’t know where to put it.
Perfect. This is what I was looking for. Thanks a lot for your time.
This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.