Customization

const triagly = new Triagly({
  apiKey: 'pub_live_abc123',

  // Appearance
  theme: 'dark',
  position: 'bottom-left',          // or 'edge-left' for sidebar placement
  buttonShape: 'pill',              // 'rounded' | 'circular' | 'square' | 'pill' | 'expandable'
  buttonText: 'Share feedback',
  orientation: 'horizontal',        // 'horizontal' | 'vertical'
  offsetX: '20px',                  // Custom horizontal offset
  offsetY: '20px',                  // Custom vertical offset

  // Localized copy
  placeholderText: 'Tell us what you think...',
  successMessage: 'Thanks! Our team will take a look shortly.',
});

:root {
  /* Floating button */
  --triagly-button-bg: linear-gradient(135deg, #6366f1, #a855f7);
  --triagly-button-bg-hover: linear-gradient(135deg, #4f46e5, #9333ea);
  --triagly-button-text: #ffffff;
  --triagly-button-radius: 999px;

  /* Modal */
  --triagly-modal-bg: #0f172a;
  --triagly-modal-radius: 20px;
  --triagly-modal-shadow: 0 30px 60px -15px rgba(15, 23, 42, 0.45);
  --triagly-modal-backdrop: rgba(15, 23, 42, 0.65);

  /* Form controls */
  --triagly-input-bg: rgba(15, 23, 42, 0.7);
  --triagly-input-border: rgba(148, 163, 184, 0.4);
  --triagly-input-focus: #a855f7;

  /* Accent */
  --triagly-primary: #a855f7;
  --triagly-success: #34d399;
  --triagly-danger: #f87171;
}

const triagly = new Triagly({
  apiKey: 'pub_live_abc123',
  buttonText: '',  // Empty to hide default button
});

// Custom button trigger
const trigger = document.getElementById('feedback-btn');
trigger?.addEventListener('click', () => triagly.open());

// Keyboard shortcut (Cmd+K or Ctrl+K)
document.addEventListener('keydown', (event) => {
  if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
    event.preventDefault();
    triagly.open();
  }
});