Squarespace Integration Issue

More detailed description

I have a page https://cececosmetica.com.au/face-scan
there is a button that people can click
- accept camera & mic permissions
- do the facescan
- ill use a webhook to send data to gohighlevel

--

current code I used for the button:

<button onclick="enrollNewUser()">Enroll New User</button>
<div id="faceio-modal"></div>

<script src="https://cdn.faceio.net/fio.js"></script>

<script type="text/javascript">
const faceio = new faceIO("fioaaff2"); // Replace with your Public ID

function enrollNewUser() {
faceio.enroll({
locale: "en" // Default locale for the interface
}).then(userInfo => {
console.log("User enrolled successfully:", userInfo);
alert("Face scan successful!");
}).catch(errCode => {
console.error("Error during enrollment:", errCode);
handleFaceScanError(errCode);
});
}

// Error handler
function handleFaceScanError(errCode) {
switch (errCode) {
case 10:
alert("Bad request. Check your API key and domain authorization.");
break;
case 11:
alert("Network issue. Please check your internet connection.");
break;
case 12:
alert("Face scan was interrupted. Please try again.");
break;
case 17:
alert("Permissions issue. Ensure camera and microphone are enabled.");
break;
case 20:
alert("No face detected. Ensure you're properly positioned.");
break;
default:
alert("Face scan failed with error code: " + errCode);
break;
}
}
</script>

--

I installed:

<div id="faceio-modal"></div>
<script src="https://cdn.faceio.net/fio.js"></script>

in the header using code injection