HTML Frontend for a Telegram Bot
HTML is ideal for dashboards, forms, mini tools and bot management interfaces—but a browser must never own the Telegram bot token. Your frontend calls your backend; your backend calls Telegram.
Never place a Telegram bot token in browser JavaScript
Anyone can inspect page source, DevTools and network requests. A leaked token gives control of the bot. Keep secrets server-side.
01
Secure architecture
Use this request flow.
Browser UIYour Backend APITelegram Bot API
02
Responsive HTML control form
This example sends a message request to your own backend endpoint.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bot Control</title>
</head>
<body>
<main>
<h1>Send a Bot Message</h1>
<form id="messageForm">
<input id="chatId" inputmode="numeric" placeholder="Telegram chat ID" required>
<textarea id="message" placeholder="Message" required></textarea>
<button type="submit">Send</button>
</form>
<p id="result" aria-live="polite"></p>
</main>
<script>
document.querySelector('#messageForm').addEventListener('submit', async (event) => {
event.preventDefault();
const response = await fetch('/api/bot/send-message', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
credentials: 'same-origin',
body: JSON.stringify({
chat_id: document.querySelector('#chatId').value,
text: document.querySelector('#message').value
})
});
const data = await response.json();
document.querySelector('#result').textContent = data.message || 'Done';
});
</script>
</body>
</html>03
Matching PHP backend endpoint
The backend validates input and uses the private token.
send-message.php
<?php
header('Content-Type: application/json');
$input = json_decode(file_get_contents('php://input') ?: '[]', true) ?: [];
$chatId = trim((string) ($input['chat_id'] ?? ''));
$text = trim((string) ($input['text'] ?? ''));
if ($chatId === '' || $text === '' || mb_strlen($text) > 4000) {
http_response_code(422);
echo json_encode(['message' => 'Invalid input']);
exit;
}
$token = getenv('TELEGRAM_BOT_TOKEN');
// Send to Telegram from the server here.
echo json_encode(['message' => 'Request accepted']);
04
Frontend production checklist
A secure UI needs more than attractive HTML.