Terms and conditions / privacy policy help

Ask for Help
1

Noloco supports custom code so it’s possible that we could get a nice banner/pop-up T&Cs or privacy policy click-wrap experience. However, is it possible for custom code in Noloco to manipulate the signup screen? It would be amazing if the banner or checkbox could appear in the same screen as the signup/registration form.

1 Like
2

Yep! Custom code can run on any page in your app.

You would need to detect that page yourself though.

It’s a great idea though

1 Like
3

Hey @darragh - Would you be able to point me in the right direction here? No matter the troubleshooting I do with help from ChatGPT, my script simply won’t affect the login page at all (adding a checkbox and some hyperlinked text). After troubleshooting extensively, my final tests ended with this:

    // Find the login form with a more specific selector
    var loginForm = document.querySelector("form.mt-6[action='#']");

This is what ChatGPT gave me after helping me identify the right form using some JS directly in my browser console.

4

That looks correct to me?

image
image1521×684 32 KB

5

Isn’t affecting my page at all, strangely. Here’s the full script (the eventlistener bit was added by ChatGPT during my troubleshooting since the script wasn’t working). I know there’s some placeholders in there (my own privacy page lol and optional styling bits) but none of that should be breaking it I don’t think… Also, I’ve published and refreshed before attempting.

<script>
document.addEventListener("DOMContentLoaded", function() {
    console.log("Script Loaded");

    // Create the checkbox element
    var checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.id = "termsCheckbox";

    // Create the label element
    var label = document.createElement("label");
    label.htmlFor = "termsCheckbox";

    // Create the hyperlink element
    var link = document.createElement("a");
    link.href = "https://internyl.com/privacy-policy";
    link.textContent = "Terms & Conditions";
    link.target = "_blank"; // Open in a new tab

    // Append the link to the label
    label.appendChild(link);

    // Create a container div for the checkbox and label
    var container = document.createElement("div");
    container.id = "termsContainer";
    container.appendChild(checkbox);
    container.appendChild(label);

    // Add some styling to the container (optional)
    container.style.marginTop = "10px";

    // Find the login form with a more specific selector
    var loginForm = document.querySelector("form.mt-6[action='#']");
    
    if (loginForm) {
        console.log("Login form found");
        // Append the container to the login form
        loginForm.appendChild(container);

        // Optional: Add validation to ensure the checkbox is checked before form submission
        loginForm.addEventListener("submit", function(event) {
            if (!checkbox.checked) {
                event.preventDefault();
                alert("Please agree to the Terms & Conditions.");
            }
        });
    } else {
        console.log("Login form not found");
    }
});
</script>