Sleep Calculator
Sleep Calculator
Embed our scientifically-based sleep calculator on your website for free. Increase engagement and provide value to your health-conscious audience.
Copy and paste one line of code. No complex setup or API keys required.
Basic, Professional, Scenario, and Recovery calculators all in one widget.
Perfectly optimized for all devices and screen sizes with adaptive layouts.
Uses proven 90-minute sleep cycle research and professional sleep medicine guidelines.
Full-featured widget (520x700) or compact version (420x450) for tight spaces.
Track user engagement and calculator usage with detailed analytics support.
Add our sleep calculator to your website in under 2 minutes:
Full-featured sleep calculator with 4 calculation modes. Just copy and paste this code:
<iframe src="https://sleepcalculator.link/embed-widget.html"
width="520"
height="700"
frameborder="0"
title="Complete Sleep Calculator Widget"
style="border-radius: 16px; box-shadow: 0 10px 25px rgba(0,0,0,0.1);">
</iframe>
<iframe src="https://sleepcalculator.link/embed-widget.html?compact=true"
width="420"
height="450"
frameborder="0"
title="Basic Sleep Calculator Widget">
</iframe>
For more customization options:
<div id="sleep-calculator-widget"></div>
<script>
(function() {
var script = document.createElement('script');
script.src = 'https://sleepcalculator.link/widget.js';
script.onload = function() {
SleepCalculator.init({
containerId: 'sleep-calculator-widget',
theme: 'light', // 'light' or 'dark'
primaryColor: '#3b82f6'
});
};
document.head.appendChild(script);
})();
</script>
For developers who want full control:
// Fetch calculation via API
fetch('https://api.sleepcalculator.link/calculate', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
age: 'youngAdult',
wakeTime: '07:00',
sleepQuality: 'good'
})
})
.then(response => response.json())
.then(data => {
console.log('Recommended bedtime:', data.bedtime);
console.log('Sleep hours:', data.sleepHours);
});
// URL Parameters for customization https://sleepcalculator.link/embed-widget.html?compact=true&theme=dark // Available parameters: - compact=true // Show only basic calculator - theme=dark // Color theme (light/dark) - defaultCalc=professional // Default calculator tab - hideFooter=true // Hide powered by footer - primaryColor=ff6b6b // Custom brand color (hex)
Track widget usage with your existing analytics:
// Google Analytics 4 tracking
SleepCalculator.init({
containerId: 'widget',
onCalculate: function(data) {
gtag('event', 'sleep_calculation', {
'age_group': data.age,
'sleep_quality': data.quality,
'calculated_hours': data.sleepHours
});
}
});
Yes! Our basic widget is completely free. We only ask that you keep the small "Powered by" link.
Absolutely! You can customize colors, fonts, and styling to match your website's design.
Our calculations are based on sleep science research and National Sleep Foundation guidelines.