Files
ukaiautomation/tools/cost-calculator.php

563 lines
21 KiB
PHP
Raw Normal View History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Scraping Cost Calculator | UK Data Services</title>
<meta name="description" content="Estimate your web scraping project cost instantly. Our free calculator helps UK businesses budget for data extraction, pricing intelligence, and market research projects.">
<meta name="keywords" content="web scraping cost, data extraction pricing, scraping quote, web scraping calculator UK">
<link rel="canonical" href="https://ukdataservices.co.uk/tools/cost-calculator">
<!-- Open Graph -->
<meta property="og:title" content="Free Web Scraping Cost Calculator">
<meta property="og:description" content="Get an instant estimate for your web scraping project. Used by 500+ UK businesses.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://ukdataservices.co.uk/tools/cost-calculator">
<link rel="stylesheet" href="../assets/css/main.css">
<style>
.calculator-container {
max-width: 800px;
margin: 0 auto;
padding: 40px 20px;
}
.calculator-header {
text-align: center;
margin-bottom: 40px;
}
.calculator-header h1 {
font-size: 2.2em;
color: #1a1a2e;
margin-bottom: 15px;
}
.calculator-header p {
color: #666;
font-size: 1.1em;
max-width: 600px;
margin: 0 auto;
}
.calculator-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
padding: 40px;
}
.form-group {
margin-bottom: 30px;
}
.form-group label {
display: block;
font-weight: 600;
color: #1a1a2e;
margin-bottom: 10px;
font-size: 1em;
}
.form-group .hint {
font-weight: 400;
color: #888;
font-size: 0.85em;
display: block;
margin-top: 4px;
}
.option-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px;
}
.option-card {
border: 2px solid #e0e0e0;
border-radius: 8px;
padding: 15px;
text-align: center;
cursor: pointer;
transition: all 0.2s;
}
.option-card:hover {
border-color: #0066cc;
background: #f8fbff;
}
.option-card.selected {
border-color: #0066cc;
background: #e8f4fd;
}
.option-card .icon {
font-size: 1.8em;
margin-bottom: 8px;
}
.option-card .label {
font-weight: 600;
color: #333;
}
.option-card .desc {
font-size: 0.8em;
color: #888;
margin-top: 4px;
}
input[type="number"], select {
width: 100%;
padding: 14px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 1em;
transition: border-color 0.2s;
}
input[type="number"]:focus, select:focus {
border-color: #0066cc;
outline: none;
}
.slider-container {
margin-top: 10px;
}
input[type="range"] {
width: 100%;
margin: 10px 0;
}
.slider-labels {
display: flex;
justify-content: space-between;
font-size: 0.85em;
color: #888;
}
.result-section {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
border-radius: 12px;
padding: 30px;
margin-top: 30px;
color: #fff;
text-align: center;
}
.result-section h3 {
margin: 0 0 10px 0;
font-size: 1em;
font-weight: 400;
opacity: 0.8;
}
.estimate-range {
font-size: 2.5em;
font-weight: 700;
margin: 10px 0;
}
.estimate-note {
font-size: 0.9em;
opacity: 0.7;
margin-bottom: 25px;
}
.result-cta {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}
.btn-primary {
background: #00cc66;
color: #fff;
padding: 14px 28px;
border: none;
border-radius: 8px;
font-size: 1em;
font-weight: 600;
cursor: pointer;
text-decoration: none;
display: inline-block;
}
.btn-primary:hover {
background: #00b359;
}
.btn-secondary {
background: transparent;
color: #fff;
padding: 14px 28px;
border: 2px solid rgba(255,255,255,0.3);
border-radius: 8px;
font-size: 1em;
cursor: pointer;
text-decoration: none;
}
.btn-secondary:hover {
border-color: #fff;
}
.trust-signals {
display: flex;
justify-content: center;
gap: 30px;
margin-top: 30px;
flex-wrap: wrap;
}
.trust-item {
text-align: center;
color: #666;
font-size: 0.9em;
}
.trust-item .number {
font-size: 1.5em;
font-weight: 700;
color: #0066cc;
display: block;
}
.email-capture {
display: none;
background: #f8f9fa;
border-radius: 8px;
padding: 25px;
margin-top: 20px;
}
.email-capture.show {
display: block;
}
.email-capture h4 {
margin: 0 0 15px 0;
}
.email-capture input[type="email"] {
width: 100%;
padding: 12px;
border: 2px solid #e0e0e0;
border-radius: 6px;
margin-bottom: 10px;
box-sizing: border-box;
}
@media (max-width: 600px) {
.calculator-card { padding: 25px; }
.estimate-range { font-size: 1.8em; }
.result-cta { flex-direction: column; }
}
</style>
</head>
<body>
<!-- Header would be included here -->
<div class="calculator-container">
<div class="calculator-header">
<h1>🧮 Web Scraping Cost Calculator</h1>
<p>Get an instant estimate for your data extraction project. Answer a few questions and we'll show you typical pricing.</p>
</div>
<div class="calculator-card">
<form id="calculator-form">
<!-- Project Type -->
<div class="form-group">
<label>What type of data do you need?</label>
<div class="option-grid" data-field="projectType">
<div class="option-card" data-value="pricing">
<div class="icon">💰</div>
<div class="label">Competitor Pricing</div>
<div class="desc">Product prices & stock</div>
</div>
<div class="option-card" data-value="leads">
<div class="icon">👥</div>
<div class="label">Lead Generation</div>
<div class="desc">Business contacts</div>
</div>
<div class="option-card" data-value="market">
<div class="icon">📊</div>
<div class="label">Market Research</div>
<div class="desc">Reviews, trends, content</div>
</div>
<div class="option-card" data-value="property">
<div class="icon">🏠</div>
<div class="label">Property Data</div>
<div class="desc">Listings & valuations</div>
</div>
<div class="option-card" data-value="custom">
<div class="icon">⚙️</div>
<div class="label">Custom Project</div>
<div class="desc">Something else</div>
</div>
</div>
</div>
<!-- Number of Sources -->
<div class="form-group">
<label>
How many websites do you need to scrape?
<span class="hint">Each unique website counts as one source</span>
</label>
<div class="slider-container">
<input type="range" id="numSources" min="1" max="50" value="5" oninput="updateSourcesLabel(this.value); calculate();">
<div class="slider-labels">
<span>1 site</span>
<span id="sources-value">5 sites</span>
<span>50+ sites</span>
</div>
</div>
</div>
<!-- Data Volume -->
<div class="form-group">
<label>
How many records/items do you need?
<span class="hint">Products, listings, contacts, etc.</span>
</label>
<div class="option-grid" data-field="volume">
<div class="option-card" data-value="small">
<div class="label">< 1,000</div>
<div class="desc">Small dataset</div>
</div>
<div class="option-card" data-value="medium">
<div class="label">1K - 10K</div>
<div class="desc">Medium dataset</div>
</div>
<div class="option-card" data-value="large">
<div class="label">10K - 100K</div>
<div class="desc">Large dataset</div>
</div>
<div class="option-card" data-value="enterprise">
<div class="label">100K+</div>
<div class="desc">Enterprise scale</div>
</div>
</div>
</div>
<!-- Frequency -->
<div class="form-group">
<label>
How often do you need the data updated?
<span class="hint">Recurring scrapes have ongoing monthly costs</span>
</label>
<div class="option-grid" data-field="frequency">
<div class="option-card" data-value="once">
<div class="label">One-time</div>
<div class="desc">Single extraction</div>
</div>
<div class="option-card" data-value="weekly">
<div class="label">Weekly</div>
<div class="desc">Updated each week</div>
</div>
<div class="option-card" data-value="daily">
<div class="label">Daily</div>
<div class="desc">Fresh data daily</div>
</div>
<div class="option-card" data-value="realtime">
<div class="label">Real-time</div>
<div class="desc">Continuous monitoring</div>
</div>
</div>
</div>
<!-- Complexity -->
<div class="form-group">
<label>
How complex are the target websites?
<span class="hint">JavaScript-heavy sites and those with anti-bot measures cost more</span>
</label>
<div class="option-grid" data-field="complexity">
<div class="option-card" data-value="simple">
<div class="label">Simple</div>
<div class="desc">Static HTML pages</div>
</div>
<div class="option-card" data-value="moderate">
<div class="label">Moderate</div>
<div class="desc">Some JavaScript</div>
</div>
<div class="option-card" data-value="complex">
<div class="label">Complex</div>
<div class="desc">Heavy JS, logins</div>
</div>
<div class="option-card" data-value="extreme">
<div class="label">Very Complex</div>
<div class="desc">Anti-bot, CAPTCHAs</div>
</div>
</div>
</div>
</form>
<!-- Results -->
<div class="result-section" id="results" style="display:none;">
<h3>Estimated Project Cost</h3>
<div class="estimate-range" id="estimate-range">£500 - £1,500</div>
<div class="estimate-note" id="estimate-note">One-time setup cost</div>
<div class="estimate-note" id="monthly-note" style="display:none;">+ <span id="monthly-cost">£200</span>/month ongoing</div>
<div class="result-cta">
<a href="/quote" class="btn-primary" onclick="trackCalculator('get_quote')">Get Exact Quote</a>
<button type="button" class="btn-secondary" onclick="showEmailCapture()">Email Me This Estimate</button>
</div>
</div>
<!-- Email Capture -->
<div class="email-capture" id="email-capture">
<h4>📧 Get your estimate + our pricing guide</h4>
<input type="email" id="calc-email" placeholder="Enter your email">
<button type="button" class="btn-primary" onclick="submitEmail()" style="width:100%;">Send My Estimate</button>
</div>
</div>
<div class="trust-signals">
<div class="trust-item">
<span class="number">500+</span>
Projects Delivered
</div>
<div class="trust-item">
<span class="number">99.8%</span>
Data Accuracy
</div>
<div class="trust-item">
<span class="number">24hr</span>
Quote Turnaround
</div>
</div>
</div>
<script>
var formData = {
projectType: null,
numSources: 5,
volume: null,
frequency: null,
complexity: null
};
// Option card selection
document.querySelectorAll('.option-grid').forEach(function(grid) {
grid.querySelectorAll('.option-card').forEach(function(card) {
card.addEventListener('click', function() {
var field = this.parentElement.dataset.field;
this.parentElement.querySelectorAll('.option-card').forEach(function(c) {
c.classList.remove('selected');
});
this.classList.add('selected');
formData[field] = this.dataset.value;
calculate();
});
});
});
function updateSourcesLabel(value) {
document.getElementById('sources-value').textContent = value + (value == 1 ? ' site' : ' sites');
formData.numSources = parseInt(value);
}
function calculate() {
if (!formData.projectType || !formData.volume || !formData.frequency || !formData.complexity) {
return;
}
// Base costs by project type
var baseCosts = {
pricing: 600,
leads: 400,
market: 500,
property: 700,
custom: 800
};
// Volume multipliers
var volumeMultipliers = {
small: 1,
medium: 1.5,
large: 2.5,
enterprise: 4
};
// Complexity multipliers
var complexityMultipliers = {
simple: 1,
moderate: 1.5,
complex: 2.5,
extreme: 4
};
// Calculate base
var base = baseCosts[formData.projectType];
base *= volumeMultipliers[formData.volume];
base *= complexityMultipliers[formData.complexity];
base *= (1 + (formData.numSources - 1) * 0.3); // Each additional source adds 30%
// Round to nice numbers
var low = Math.round(base / 100) * 100;
var high = Math.round((base * 1.8) / 100) * 100;
// Monthly costs for recurring
var monthlyLow = 0;
var monthlyHigh = 0;
if (formData.frequency !== 'once') {
var freqMultipliers = { weekly: 0.15, daily: 0.25, realtime: 0.5 };
monthlyLow = Math.round((low * freqMultipliers[formData.frequency]) / 50) * 50;
monthlyHigh = Math.round((high * freqMultipliers[formData.frequency]) / 50) * 50;
}
// Display results
document.getElementById('results').style.display = 'block';
document.getElementById('estimate-range').textContent = '£' + low.toLocaleString() + ' - £' + high.toLocaleString();
if (formData.frequency === 'once') {
document.getElementById('estimate-note').textContent = 'One-time project cost';
document.getElementById('monthly-note').style.display = 'none';
} else {
document.getElementById('estimate-note').textContent = 'Initial setup cost';
document.getElementById('monthly-note').style.display = 'block';
document.getElementById('monthly-cost').textContent = '£' + monthlyLow + ' - £' + monthlyHigh;
}
// Track calculation
if (typeof gtag !== 'undefined') {
gtag('event', 'calculator_result', {
event_category: 'Calculator',
event_label: formData.projectType,
value: low
});
}
}
function showEmailCapture() {
document.getElementById('email-capture').classList.add('show');
trackCalculator('show_email_capture');
}
function submitEmail() {
var email = document.getElementById('calc-email').value;
if (!email || !email.includes('@')) {
alert('Please enter a valid email');
return;
}
var estimate = document.getElementById('estimate-range').textContent;
fetch('/api/lead-capture.php', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
email: email,
source: 'calculator',
estimate: estimate,
formData: formData,
page: window.location.pathname
})
});
document.getElementById('email-capture').innerHTML = '<h4>✅ Sent! Check your inbox.</h4><p>We have also sent our detailed pricing guide.</p>';
trackCalculator('email_submitted');
}
function trackCalculator(action) {
if (typeof gtag !== 'undefined') {
gtag('event', action, { event_category: 'Calculator' });
}
console.log('Calculator:', action);
}
</script>
</body>
</html>
<!-- SoftwareApplication Schema - Added by Emma -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Web Scraping Cost Calculator",
"description": "Free tool to estimate web scraping project costs for UK businesses",
"url": "https://ukdataservices.co.uk/tools/cost-calculator",
"applicationCategory": "BusinessApplication",
"operatingSystem": "Web Browser",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "GBP"
},
"provider": {
"@type": "Organization",
"name": "UK Data Services",
"url": "https://ukdataservices.co.uk"
}
}
</script>