Code to set up a privacy policy popup

Hello community

I need your help...
Does anyone know or have an example of how to create a privacy policy popup in a survey project?

From what I've been researching, you need to add CSS code and code in the JavaScript session of the survey ...

Can you help me with that...

Thank you very much!
Regards

Page 1 / 1

hey @Aine

can you provide more infomation like - when the popup should appear (what should be the trigger condition)? where should the popup be placed within the survey window?

Hello @omkarkewat

Thank you for wanting to help me...

I spoke with the user, and what is intended is that if we click on a link that appears in a question in the survey, we pop up...
As I show you in the image...

Thanks again

@omkarkewat

I forgot to comment that the pop up will contain the information of the privacy policies and a button Accept...

Hi Aine,

try this-:

JS code

Qualtrics.SurveyEngine.addOnReady(function()
{
	/*Place your JavaScript here to run when the page is fully displayed*/

   var popup = document.getElementById("documentPopup");
   var closeBtn = document.getElementById("closePopup");
   var openLink = document.getElementById("openPopupLink");
   var iframe = document.getElementById("documentIframe");

   var documentUrl = "https://example.com/your-document.pdf"; //change the URL here

	// Show the popup when the link is clicked
        openLink.onclick = function(event) {
            event.preventDefault(); 
            iframe.src = documentUrl; 
            popup.style.display = "block"; // Show the popup
        }

    // Close the popup when the user clicks on the "X" button
        closeBtn.onclick = function() {
            popup.style.display = "none"; // Hide the popup
            iframe.src = ""; // Clear iframe
        }


	// Optionally, close the popup if the user clicks anywhere outside the popup content
        window.onclick = function(event) {
            if (event.target == popup) {
                popup.style.display = "none"; // Hide popup
                iframe.src = ""; // Clear iframe content
            }
        }


});

CSS code:

/*Style -> custom CSS*/

.popup {
            display: none; /* Hidden by default */
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5); /* Black with transparency */
            padding-top: 60px;
        }

        /* Popup content box */
        .popup-content {
            background-color: #fff;
            margin: 5% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 800px;
            height: 80%;
            overflow: auto;
            text-align: center;
        }

        /* Close button */
        .close-btn {
            color: #aaa;
            font-size: 28px;
            font-weight: bold;
            position: absolute;
            top: 10px;
            right: 15px;
            cursor: pointer;
        }

        /* Close button hover */
        .close-btn:hover,
        .close-btn:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;

HTML editor:

<a href="#" id="openPopupLink">Click here to view the document</a>

<div id="documentPopup" class="popup">
        <div class="popup-content">
            <span id="closePopup" class="close-btn">&times;</span>
            <h2>Privacy Policy</h2>
            <iframe id="documentIframe" width="100%" height="400px" src=""></iframe>
        </div>
 </div>

Let me know if this works.

Hi @omkarkewat

Look I put together the following, as we are not going to have a pdf document, but now I am asked to add a checkbox next to the Privacy Policy link, so that if the respondent does not want to access the link by just ticking the checkbox they can continue.…

Por favor, revisa nuestras <a href="#" class="popup-link">Políticas de Privacidad</a> antes de continuar.

//CSS

.LanguageSelectorContainer {
display: none;
}
/* Estilo del fondo del popup */
.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: none;
z-index: 1000;
}

/* Estilo del contenido del popup */
.popup-content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
z-index: 1001;
width: 90%;
max-width: 500px;
}

/* Botón para cerrar el popup */
.popup-close {
background: #007ac1;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
display: block;
text-align: center;
}

//JavaScript

Qualtrics.SurveyEngine.addOnload(function() {
// Crear los elementos del popup
const overlay = document.createElement('div');
overlay.className = 'popup-overlay';

const popup = document.createElement('div');
popup.className = 'popup-content';
popup.innerHTML = `
<h2>Política de Privacidad</h2>
<p>Por favor, lea y acepte nuestras políticas de privacidad antes de continuar con la encuesta.</p>
<button class="popup-close">Aceptar</button>
`;

// Agregar los elementos del popup al DOM (pero inicialmente ocultos)
document.body.appendChild(overlay);
document.body.appendChild(popup);

// Ocultar el popup inicialmente
overlay.style.display = 'none';
popup.style.display = 'none';

// Esperar a que el vínculo esté disponible
const interval = setInterval(function() {
const link = document.querySelector('a.popup-link'); // Buscar el vínculo en la pregunta
if (link) {
// Detener el intervalo una vez que el enlace exista
clearInterval(interval);

// Mostrar el popup al hacer clic en el enlace
link.addEventListener('click', function(event) {
event.preventDefault(); // Evita que el navegador siga el enlace
overlay.style.display = 'block';
popup.style.display = 'block';
});
}
}, 100); // Revisa cada 100 ms si el enlace está disponible

// Cerrar el popup al hacer clic en el botón "Aceptar"
document.querySelector('.popup-close').addEventListener('click', function() {
overlay.style.display = 'none';
popup.style.display = 'none';
});
});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Coloque su JavaScript aquí para ejecutarlo cuando se muestre la página completamente*/

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Coloque su JavaScript aquí para ejecutarlo cuando se descargue la página*/

});

Can you help me to correct this same code to add a checkbox?
thank you very much

@aine, can you provide a layout or template on how the question is shown?

Hi @resh_kr

Thank you very much for participating and helping me ...

yes yes of course...
As I show you in the images I need a check next to the link ... so if the respondent doesn't want to open the link, he/she should just check the check box and continue with the survey ...
And as you see in the second image, if he clicks on the Privacy Policy link, it will take him to a long text (now you only see an example) where he can read and accept the policy...