const tg = window.Telegram.WebApp;
tg.ready();
tg.expand();

// Configure buttons
tg.BackButton.show();
tg.MainButton.setText('Send').show();
tg.MainButton.onClick(() => {
  tg.showAlert('Button pressed!');
});

<script src="https://telegram.org/js/telegram-web-app.js?59"></script>

const tg = window.Telegram.WebApp;
tg.ready();    // Notify Telegram app is ready
tg.expand();   // Expand to full screen

const user = tg.initDataUnsafe.user;
console.log(user.id, user.first_name, user.username);

// ⚠️ SECURITY: Always validate initData on server!
// Use tg.initData string for server-side validation

const mainBtn = tg.MainButton;
mainBtn.setText('Send');
mainBtn.show();
mainBtn.onClick(() => {
  mainBtn.showProgress();
  // Your action here
  mainBtn.hideProgress();
});

tg.BackButton.show();
tg.BackButton.onClick(() => {
  // Navigate back or close
  tg.close();
});

// Cloud storage
tg.CloudStorage.setItem('key', 'value', (error) => {
  if (!error) console.log('Saved');
});

tg.CloudStorage.getItem('key', (error, value) => {
  console.log('Value:', value);
});

console.log(tg.colorScheme);      // "light" or "dark"
console.log(tg.themeParams);      // Color theme object

tg.onEvent('themeChanged', () => {
  console.log('Theme updated');
});

// Lifecycle
tg.onEvent('activated', () => {});
tg.onEvent('deactivated', () => {});

// UI
tg.onEvent('mainButtonClicked', () => {});
tg.onEvent('backButtonClicked', () => {});
tg.onEvent('themeChanged', () => {});

const haptic = tg.HapticFeedback;
haptic.impactOccurred('light');
haptic.notificationOccurred('success');
haptic.selectionChanged();