<!-- 1. Add the script -->
<script defer src="https://unpkg.com/@opencx/widget@latest/dist-embed/script.js"></script>

<!-- 2. Initialize the widget -->
<script>
  initOpenScript({
    token: 'YOUR_BOT_TOKEN',
    initialMessages: ['How can I help you today?'],
    settings: {
      persistSession: true,
      useSoundEffects: true
    }
  });
</script>

{
  // Required
  token: string;                // Your bot authentication token
  initialMessages: string[];    // Welcome messages
  
  // Optional
  apiUrl?: string;             // Custom API endpoint
  socketUrl?: string;          // Custom WebSocket URL
  debug?: boolean;             // Enable debug mode
  language?: string;           // Interface language (default: "en")
}

{
  // API Configuration
  apiUrl?: string;             // Custom API endpoint
  socketUrl?: string;          // Custom WebSocket URL
}

{
  // Action Request Parameters
  headers?: {                  // Headers for action requests
    "Authorization": "Bearer token",
    "Custom-Header": "value"
  },
  queryParams?: {              // Query parameters for action URLs
    "workspace": "default",
    "environment": "prod"
  },
  pathParams?: {               // Path parameters for action URLs
    "version": "v1",
    "region": "us-east"
  }
}

{
  headers: {
    "Authorization": "Bearer YOUR_API_TOKEN",
    "X-API-Version": "2023-01"
  },
  queryParams: {
    "include_details": "true"
  },
  pathParams: {
    "store_id": "main"
  }
}

{
  user?: {
    external_id?: string;     // External user ID
    name?: string;            // User's name
    email?: string;           // User's email
    phone?: string;           // User's phone
    avatarUrl?: string;       // User's avatar URL
    customData?: {            // Additional user data
      [key: string]: string
    }
  },
  collectUserData?: boolean   // Show user data form before chat
}

{
  theme?: {
    primaryColor: string;     // Primary color for the widget
    triggerOffset: string;    // Distance from edges for the widget button
  },
  
  // Assets
  assets?: {
    organizationLogo?: string; // URL to your organization's logo
  }
}

{
  bot?: {
    name?: string;           // Bot's display name
    avatarUrl?: string;      // Bot's avatar URL
  }
}

{
  settings?: {
    persistSession?: boolean;    // Keep chat history
    useSoundEffects?: boolean;   // Enable sound notifications
  },
  
  // Sound Effects
  soundEffectFiles?: {
    messageArrived?: string;     // Custom sound file URL for new messages
  }
}

const config = {
  // Required
  token: "YOUR_BOT_TOKEN",
  initialMessages: ["Hello! How can I help?"],
  
  // Network
  apiUrl: "https://api.example.com",
  headers: { "Custom-Header": "value" },
  queryParams: { "source": "website" },
  
  // User
  user: {
    name: "John Doe",
    email: "john@example.com",
    customData: {
      userId: "123"
    }
  },
  
  // Theme
  theme: {
    primaryColor: "#0066ff",
    triggerOffset: "20px"
  },
  
  // Bot
  bot: {
    name: "AI Assistant",
    avatarUrl: "/bot-avatar.png"
  },
  
  // Settings
  settings: {
    persistSession: true,
    useSoundEffects: true
  },
  
  // Debug
  debug: false,
  language: "en"
};

// Initialize widget
initOpenScript(config);

// Message events
window.addEventListener('opencx:message', (event) => {
  const { message, type } = event.detail;
  console.log(`New ${type} message:`, message);
});

// State changes
window.addEventListener('opencx:state', (event) => {
  const { state } = event.detail;
  console.log('Widget state:', state);
});

// User events
window.addEventListener('opencx:user', (event) => {
  const { action, data } = event.detail;
  console.log(`User ${action}:`, data);
});