Log In with VoltoxHow to Use Age Estimation Script
Step 1: Get Token
To obtain the token, an administrator needs to create a client in
the admin panel. You will receive an email containing the necessary
details, including the token required for age estimation.
Step 2: Include Script
Include the following script in the HTML file of your web
application:
<script>
const data = {
shouldOpenApp: true,
url: 'https://customer.voltox.ai',
params: {
token: 'your_token_here'
}
};
if (data.shouldOpenApp) {
const urlWithParams = new URL(data.url);
Object.keys(data.params).forEach(key => urlWithParams.searchParams.append(key, data.params[key]));
const iframe = document.createElement('iframe');
iframe.src = urlWithParams.toString();
iframe.allow = 'camera *; microphone *';
const messageHandler = (event) => {
const response = event.data;
if (response && response.type === 'age-estimation') {
iframe.remove();
document.body.classList.remove('blur');
if (response.data && response.data.settings && response.data.settings.success) {
// add redirect url here where you want to redirect after age estimation success
window.location.href = '/test.com';
}
else{
// add redirect url here where you want to redirect after age estimation failure
window.location.href = '/error';
}
}
};
window.addEventListener('message', messageHandler);
document.body.appendChild(iframe);
document.body.classList.add('blur');
}
</script>
Step 3: Include CSS
Add the following CSS styles to your base CSS file:
<style>
iframe {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
max-width: 1204px;
width: 100%;
height: 85vh;
border: none;
}
.blur {
background: #1f1e1e;
overflow: hidden;
}
@media screen and (max-width: 1240px) {
iframe {
max-width: 96%;
}
}
@media screen and (max-width: 479px) {
iframe {
height: 80vh;
}
}
</style>
Step 4: Trigger Age Estimation
Use the following code to trigger the age estimation functionality
in your application:
<button id="estimateAgeBtn">Estimate Age</button>
<script>
const estimateAgeBtn = document.getElementById('estimateAgeBtn');
estimateAgeBtn.addEventListener('click', () => {
// Code to trigger age estimation script
// Example: sendDataToAgeEstimationScript();
});
</script>
Example Usage
Here’s an example of how you can integrate the age estimation script
into your application:
<html>
<head>
<title>Age Estimation App</title>
<style>
iframe {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
max-width: 1204px;
width: 100%;
height: 85vh;
border: none;
}
.blur {
background: #1f1e1e;
overflow: hidden;
}
@media screen and (max-width: 1240px) {
iframe {
max-width: 96%;
}
}
@media screen and (max-width: 479px) {
iframe {
height: 80vh;
}
}
</style>
</head>
<body>
<h1>Age Estimation App</h1>
<button id="estimateAgeBtn">Estimate Age</button>
<script>
const estimateAgeBtn = document.getElementById('estimateAgeBtn');
estimateAgeBtn.addEventListener('click', () => {
const data = {
shouldOpenApp: true,
url: 'https://customer.voltox.ai',
params: {
token: 'your_token_here'
}
};
if (data.shouldOpenApp) {
const urlWithParams = new URL(data.url);
Object.keys(data.params).forEach(key => urlWithParams.searchParams.append(key, data.params[key]));
const iframe = document.createElement('iframe');
iframe.src = urlWithParams.toString();
iframe.allow = 'camera *; microphone *';
const messageHandler = (event) => {
const response = event.data;
if (response && response.type === 'age-estimation') {
iframe.remove();
document.body.classList.remove('blur');
if (response.data && response.data.settings && response.data.settings.success) {
// add redirect url here where you want to redirect after age estimation success
window.location.href = '/test.com';
}
else{
// add redirect url here where you want to redirect after age estimation failure
window.location.href = '/error';
}
}
};
window.addEventListener('message', messageHandler);
document.body.appendChild(iframe);
document.body.classList.add('blur');
}
});
</script>
</body>
</html>
Additional Information
Dependencies
Ensure that your web application meets the following requirements:
- Compatible browsers with support for the necessary JavaScript
features. - Access to camera and microphone permissions for the age estimation
functionality. - No conflicting scripts or CSS styles that may affect the behavior
of the age estimation script.