EmbedPing — TimeoutBadge

EmbedPing (also known as TimeoutBadge) is a tiny, zero‑config uptime badge you can embed on any website using a single <script> tag. It pings your server every few seconds and displays a floating badge showing live latency.

🚀 Quick Start (CDN)

Use the official CDN:

<script src="https://timeoutbadge.pages.dev/timeout.js"
        data-url="https://yourserver.com"></script>

That's it — a floating badge appears automatically.

📦 Local Installation

Download the two files:

timeout.js
timeout.css

Then include them like this:

<link rel="stylesheet" href="timeout.css">
<script src="timeout.js" data-url="https://yourserver.com"></script>

⚙️ Configuration Options

Required

• data-url — the server to ping

<script src="https://timeoutbadge.pages.dev/timeout.js"
        data-url="https://api.example.com"></script>

Optional Attributes

• data-position — top-left, top-right, bottom-left, bottom-right
• data-theme — light, dark, auto
• data-size — sm, md, lg
• data-interval — ping interval in ms (default: 4000)

Full Example

<script src="https://timeoutbadge.pages.dev/timeout.js"
        data-url="https://yourserver.com"
        data-position="top-left"
        data-theme="dark"
        data-size="lg"
        data-interval="3000"></script>

🧪 Live Demo

This demo pings https://example.com every 4 seconds.

📘 How It Works

TimeoutBadge uses a smart multi‑layer ping engine:

• Attempts a HEAD request
• Falls back to fetch(..., { mode: "no-cors" })
• Falls back to Image() ping

This ensures it works even on servers with strict CORS settings.

📝 License

MIT License — free for personal and commercial use.