Skip to content

Instantly share code, notes, and snippets.

@tadaspi

tadaspi/embed-widget.html

Created March 15, 2026 03:33
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tadaspi/9f5a9a276b9cc3229e31a4f8624c8c5d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tadaspi/9f5a9a276b9cc3229e31a4f8624c8c5d to your computer and use it in GitHub Desktop.
Download ZIP
Embeddable freelance hourly rate calculator widget - add to your website
Raw
embed-widget.html
<!DOCTYPE html>
<html>
<head>
<title>Embeddable Freelance Rate Calculator Widget</title>
<meta name="description" content="Free embeddable hourly rate calculator widget for freelancers. Add to your site with one line of code.">
</head>
<body>
<h1>Embeddable Freelance Rate Calculator</h1>
<h2>Demo</h2>
<div id="rate-calc-demo" style="max-width:400px;font-family:system-ui,sans-serif;">
<div style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:20px;">
<h3 style="margin:0 0 15px 0;color:#1e293b;">Hourly Rate Calculator</h3>
<label style="display:block;margin-bottom:5px;font-size:14px;color:#475569;">Desired Annual Income ($)</label>
<input type="number" id="income" value="80000" style="width:100%;padding:8px;border:1px solid #cbd5e1;border-radius:4px;margin-bottom:10px;box-sizing:border-box;">
<label style="display:block;margin-bottom:5px;font-size:14px;color:#475569;">Non-Billable Time (%)</label>
<input type="number" id="nonbill" value="30" style="width:100%;padding:8px;border:1px solid #cbd5e1;border-radius:4px;margin-bottom:15px;box-sizing:border-box;">
<button onclick="calc()" style="width:100%;padding:10px;background:#2563eb;color:white;border:none;border-radius:4px;cursor:pointer;font-weight:600;">Calculate Rate</button>
<div id="result" style="margin-top:15px;padding:15px;background:#0f172a;border-radius:4px;text-align:center;display:none;">
<div style="color:#94a3b8;font-size:12px;">Minimum Hourly Rate</div>
<div id="rate" style="color:#22c55e;font-size:28px;font-weight:700;">$0/hr</div>
</div>
<p style="margin:15px 0 0 0;font-size:12px;color:#64748b;text-align:center;"><a href="https://hourly-rate-calculator.tp-business.workers.dev" style="color:#2563eb;">Full Calculator</a> with tax breakdown & PDF export</p>
</div>
</div>
<script>
function calc(){
var i=parseFloat(document.getElementById('income').value)||80000;
var n=parseFloat(document.getElementById('nonbill').value)||30;
var t=i*0.153+i*0.25+8000+5000;
var h=(52-3)*40*(1-n/100);
var r=Math.ceil((i+t)/h);
document.getElementById('rate').textContent='$'+r+'/hr';
document.getElementById('result').style.display='block';
}
</script>
<h2>Embed Code</h2>
<p>Copy this code to add the calculator to your website:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:15px;border-radius:4px;overflow-x:auto;"><code>&lt;iframe src="https://hourly-rate-calculator.tp-business.workers.dev/embed" width="400" height="350" frameborder="0"&gt;&lt;/iframe&gt;</code></pre>
<h2>Why Freelancers Undercharge</h2>
<p>Most freelancers forget to account for:</p>
<ul>
<li>Self-employment tax (15.3%)</li>
<li>Income tax (~25%)</li>
<li>Health insurance ($6-12k/year)</li>
<li>Non-billable hours (30-40%)</li>
</ul>
<p>If you want $80k take-home, you need to charge ~$100/hr, not $40/hr.</p>
<h2>Full Calculator</h2>
<p><a href="https://hourly-rate-calculator.tp-business.workers.dev">https://hourly-rate-calculator.tp-business.workers.dev</a></p>
<p>Get the complete calculator with:</p>
<ul>
<li>Full tax breakdown by bracket</li>
<li>State-specific calculations</li>
<li>PDF export for clients</li>
<li>Save multiple scenarios</li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment