const widget = new RampWidget({
  apiKey: 'your_api_key',
  projectId: 'your_project_id',
  externalUserId: 'user_123',

  theme: {
    primaryColor: '#6366F1',
    backgroundColor: '#FFFFFF',
    textColor: '#1F2937',
    borderRadius: '12px',
  },
});

const widget = new RampWidget({
  // ...
  theme: {
    primaryColor: '#818CF8',
    backgroundColor: '#111827',
    surfaceColor: '#1F2937',
    textColor: '#F9FAFB',
    textSecondary: '#9CA3AF',
    borderColor: '#374151',
  },
});

const widget = new RampWidget({
  // ...
  theme: {
    fontFamily: '"Inter", sans-serif',
  },
});

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">

// Compact
const widget = new RampWidget({
  // ...
  layout: 'compact', // 360x500
});

// Standard (default)
const widget = new RampWidget({
  // ...
  layout: 'standard', // 400x600
});

// Full
const widget = new RampWidget({
  // ...
  layout: 'full', // 100% width, min 600px height
});

<iframe
  src="..."
  width="450"
  height="650"
  style="max-width: 100%;"
></iframe>

const widget = new RampWidget({
  // ...
  locale: 'es', // Spanish
});

const widget = new RampWidget({
  // ...
  locale: navigator.language.split('-')[0], // Browser language
});

const widget = new RampWidget({
  // ...
  allowedCryptoCurrencies: ['BTC', 'ETH', 'USDC'],
  allowedFiatCurrencies: ['USD', 'EUR'],
});

const widget = new RampWidget({
  // ...
  defaultCrypto: 'ETH',
  defaultFiat: 'USD',
  defaultAmount: '100',
});

const widget = new RampWidget({
  // ...
  skipWalletStep: true, // Pre-fill wallet required
  walletAddress: '0x...',
});

const widget = new RampWidget({
  // ...
  closeOnComplete: true,
  closeDelay: 3000, // ms
});

widget.on('orderComplete', () => {
  // Widget closes automatically after 3s
});

const widget = new RampWidget({
  // ...
  animations: false,
});

<style>
  .widget-wrapper {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 420px;
    margin: 0 auto;
  }

  .widget-wrapper iframe {
    display: block;
    width: 100%;
    height: 620px;
    border: none;
  }

  @media (max-width: 480px) {
    .widget-wrapper {
      border-radius: 0;
      box-shadow: none;
    }

    .widget-wrapper iframe {
      height: 100vh;
    }
  }
</style>

<div class="widget-wrapper">
  <iframe src="..." />
</div>

const widget = new RampWidget({
  apiKey: 'ramp_test_abc123', // Sandbox key
  projectId: 'project_xyz789',
  externalUserId: 'test_user',
  // Your customizations
});