docs.examples.title

<script src="https://widget.chask.io/widget.js"></script>
<script>
  ChaskWidget.init({
    apiKey: 'your-api-key',
    organizationId: 'your-org-id'
  });
</script>

ChaskWidget.init({
  apiKey: 'your-api-key',
  organizationId: 'your-org-id',
  user: {
    id: 'user-123',
    name: 'John Doe',
    email: 'john@example.com',
    phone: '+1234567890',
    avatarUrl: 'https://example.com/avatar.jpg',
    metadata: {
      plan: 'premium',
      company: 'Acme Inc',
      signupDate: '2024-01-15'
    }
  }
});

ChaskWidget.init({
  apiKey: 'your-api-key',
  organizationId: 'your-org-id',
  theme: {
    // Your brand colors
    primaryColor: '#6366f1',
    primaryTextColor: '#ffffff',
    backgroundColor: '#fafafa',
    textColor: '#18181b',

    // Position and size
    position: 'bottom-left',
    borderRadius: '16px',
    launcherSize: 65,

    // Branding
    logoUrl: 'https://yourcompany.com/logo.png',
    launcherIconUrl: 'https://yourcompany.com/chat-icon.svg',
    title: 'Help Center',
    subtitle: 'We reply within 5 minutes',

    // Theme mode
    mode: 'auto',

    // Custom styles
    customCss: `
      .chask-window {
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
      }
    `
  }
});

ChaskWidget.init({
  apiKey: 'your-api-key',
  organizationId: 'your-org-id',
  callbacks: {
    onReady: () => {
      console.log('Widget is ready!');
    },

    onOpen: () => {
      // Track in analytics
      gtag('event', 'chat_opened');
    },

    onClose: () => {
      // Track in analytics
      gtag('event', 'chat_closed');
    },

    onMessageSent: (message) => {
      console.log('User sent:', message.content);
    },

    onMessageReceived: (message) => {
      // Show desktop notification
      if (Notification.permission === 'granted') {
        new Notification('New message', {
          body: message.content,
          icon: '/favicon.ico'
        });
      }
    },

    onError: (error) => {
      // Report to error tracking
      Sentry.captureException(error);
    }
  }
});

// HTML
<button id="open-chat">Need Help?</button>
<button id="contact-support">Contact Support</button>

// JavaScript
await ChaskWidget.init({
  apiKey: 'your-api-key',
  organizationId: 'your-org-id',
  options: {
    showLauncher: false  // Hide default launcher
  }
});

// Open chat with custom button
document.getElementById('open-chat').addEventListener('click', () => {
  ChaskWidget.open();
});

// Open and send initial message
document.getElementById('contact-support').addEventListener('click', async () => {
  ChaskWidget.open();
  await ChaskWidget.send('Hi, I need help with my account.');
});