Mashallah we got telegram now :o

web/app.js

@@ -850,9 +850,18 @@ async function buildSettings() {
     class: 'btn' + (currentTheme() === id ? ' primary' : ''), on: { click: () => { applyTheme(id); buildSettings(); } },
   }, h('span', { class: 'sw', style: 'background:' + c }), id)));
 
-  const kind = h('select', { id: 'wk' }, [['json', 'Generic JSON'], ['discord', 'Discord'], ['slack', 'Slack'], ['ntfy', 'ntfy']]
+  const kind = h('select', { id: 'wk' }, [['json', 'Generic JSON'], ['discord', 'Discord'], ['telegram', 'Telegram'], ['slack', 'Slack'], ['ntfy', 'ntfy']]
     .map(([v, l]) => h('option', { value: v, selected: st.webhook_kind === v }, l)));
-  const url = h('input', { type: 'text', id: 'wu', value: st.webhook_url, placeholder: 'https://ntfy.example.com/homelab', spellcheck: false });
+  const HOOK_HELP = {
+    json: ['https://example.com/hook', 'POSTs {title, message, status, time, source} as JSON.'],
+    discord: ['https://discord.com/api/webhooks/<id>/<token>', 'Discord: channel settings > Integrations > Webhooks > New Webhook > Copy Webhook URL.'],
+    telegram: ['https://api.telegram.org/bot<TOKEN>/sendMessage?chat_id=<CHAT_ID>', 'Telegram: create a bot with @BotFather for the token, send the bot a message, then find your chat id via https://api.telegram.org/bot<TOKEN>/getUpdates (result > message > chat > id). Groups have negative ids.'],
+    slack: ['https://hooks.slack.com/services/T000/B000/XXXX', 'Slack: create an Incoming Webhook app and copy its URL.'],
+    ntfy: ['https://ntfy.sh/my-homelab-alerts', 'ntfy: the full topic URL.'],
+  };
+  const url = h('input', { type: 'text', id: 'wu', value: st.webhook_url, placeholder: HOOK_HELP[st.webhook_kind]?.[0] || '', spellcheck: false });
+  const hookHelp = h('p', { class: 'dim' }, HOOK_HELP[st.webhook_kind]?.[1] || '');
+  kind.addEventListener('change', () => { url.placeholder = HOOK_HELP[kind.value][0]; hookHelp.textContent = HOOK_HELP[kind.value][1]; });
   const saveHook = async () => { await api('PUT', '/api/settings', { webhook_url: url.value, webhook_kind: kind.value }); };
 
   const snipList = h('div', null, S.snippets.length ? S.snippets.map(sn => h('div', { class: 'row' },
@@ -881,6 +890,7 @@ async function buildSettings() {
     h('section', { class: 'section' }, h('h2', null, 'Alerts'),
       h('p', null, 'Get a message when a service goes down or recovers, or when a certificate is about to expire.'),
       h('div', { class: 'row' }, h('div', { style: 'width:180px' }, kind), h('div', { class: 'grow' }, url)),
+      hookHelp,
       h('div', { class: 'row' },
         h('button', { class: 'btn primary', on: { click: async () => { try { await saveHook(); toast('Alert settings saved.'); } catch (e) { fail(e); } } } }, 'Save'),
         h('button', { class: 'btn', on: { click: async () => { try { await saveHook(); await api('POST', '/api/settings/test-webhook'); toast('Test message sent.'); } catch (e) { fail(e); } } } }, 'Send test message'))),