<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AI Voice Agent ROI Calculator</title>
<meta name="viewport" content="width=400, initial-scale=1">
<style>
body {
font-family: 'Segoe UI', Arial, sans-serif;
background: #f6f8fa;
margin: 0;
padding: 0;
}
.container {
max-width: 400px;
margin: 40px auto;
background: #fff;
padding: 30px 20px;
border-radius: 16px;
box-shadow: 0 4px 18px rgba(0,0,0,0.08);
}
h2 {
color: #274472;
font-size: 1.4rem;
margin-bottom: 10px;
}
label {
display: block;
margin: 16px 0 6px 0;
font-size: 1rem;
}
select, input[type="number"] {
width: 100%;
padding: 9px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 1rem;
}
button {
background: #3a6ea5;
color: #fff;
border: none;
padding: 12px 0;
width: 100%;
font-size: 1.08rem;
border-radius: 8px;
cursor: pointer;
margin-top: 14px;
}
.result {
margin-top: 25px;
background: #e7f3ff;
color: #003366;
padding: 18px;
border-radius: 8px;
font-weight: 500;
font-size: 1.1rem;
box-shadow: 0 2px 8px #d0e3fa;
}
</style>
</head>
<body>
<div class="container">
<h2>AI Voice Agent ROI Calculator</h2>
<label for="businessType">Business Type</label>
<select id="businessType">
<option value="hotel">Hotel</option>
<option value="restaurant">Restaurant</option>
<option value="clinic">Clinic</option>
</select>
<label for="monthlyCalls">Monthly Incoming Calls</label>
<input type="number" id="monthlyCalls" placeholder="e.g. 1000" min="0" required>
<label for="costPerCall">Average Labor Cost Per Call (in $)</label>
<input type="number" id="costPerCall" placeholder="e.g. 0.75" min="0" step="0.01" required>
<label for="autoPercent">% of Calls That Could Be Automated</label>
<input type="number" id="autoPercent" placeholder="e.g. 70" min="0" max="100" required>
<button onclick="calculateROI()">Calculate ROI</button>
<div class="result" id="result" style="display:none;"></div>
</div>
<script>
// Example: Set automation potential by business type
const automationDefault = {
hotel: 70,
restaurant: 60,
clinic: 50
};
document.getElementById('businessType').addEventListener('change', function() {
let type = this.value;
document.getElementById('autoPercent').value = automationDefault[type];
});
function formatNumber(n) {
return n.toLocaleString(undefined, {maximumFractionDigits:0});
}
function calculateROI() {
const businessType = document.getElementById('businessType').value;
const monthlyCalls = parseFloat(document.getElementById('monthlyCalls').value);
const costPerCall = parseFloat(document.getElementById('costPerCall').value);
const autoPercent = parseFloat(document.getElementById('autoPercent').value);
if (isNaN(monthlyCalls) || isNaN(costPerCall) || isNaN(autoPercent) || monthlyCalls <= 0 || costPerCall < 0 || autoPercent < 0 || autoPercent > 100) {
document.getElementById('result').style.display = "block";
document.getElementById('result').innerHTML = "Please enter valid numbers in all fields.";
return;
}
const annualCalls = monthlyCalls * 12;
const callsAutomated = annualCalls * (autoPercent / 100);
const annualSavings = callsAutomated * costPerCall;
let summary = `Estimated Annual Savings with an AI Voice Agent: <br>
<strong>$${formatNumber(annualSavings)}</strong> <br><br>
(${formatNumber(callsAutomated)} calls automated yearly @ $${costPerCall}/call)`;
document.getElementById('result').style.display = "block";
document.getElementById('result').innerHTML = summary;
}
// Initialize with default
document.getElementById('autoPercent').value = automationDefault['hotel'];
</script>
</body>
</html>
