🌐 UKTI Widget

✨ Features

• Beautiful Design: Modern UI with smooth animations and hover effects
• Responsive: Works perfectly on desktop, tablet, and mobile devices
• Multiple Sections: Services, Contact information, and Resources
• Easy Integration: Single line of code to add to any website
• CDN Ready: Optimized for CDN hosting and fast loading
• Lightweight: Minimal impact on website performance
• Customizable: Easy to modify colors, content, and behavior

🚀 Quick Start

Add these two lines to your HTML:

<link rel="stylesheet" href="https://your-cdn.com/ukti-widget.css">
<script src="https://your-cdn.com/ukti-widget.js"></script>
<script>
    initUKTIWidget({ agentId: 'your-agent-id' });
</script>

Or initialize manually in your JavaScript:

initUKTIWidget({ agentId: 'your-agent-id' });

🛠️ Development

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Setup

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build:all

Build Commands

• npm run dev - Start development server
• npm run build - Build widget for CDN hosting (produces only 2 files)
• npm run preview - Preview widget build

📁 Project Structure

ukti-widget/
├── src/
│   ├── components/
│   │   └── UKTIWidget.jsx      # Main widget component
│   ├── widget.jsx              # Widget entry point for CDN
│   └── index.css               # Tailwind CSS
├── vite.widget.config.js       # Widget-specific build config
└── dist-widget/                # Widget build output (after build)
    ├── ukti-widget.js          # Main widget file
    └── ukti-widget.css         # Widget styles

🌐 CDN Deployment

1. Build the widget:

   npm run build

2. Upload files from dist-widget/ to your CDN:

   • ukti-widget.js - Main widget JavaScript (200KB)
   • ukti-widget.css - Widget styles (24KB)

3. Use the widget on your website:

   <link rel="stylesheet" href="https://your-cdn.com/ukti-widget.css">
   <script src="https://your-cdn.com/ukti-widget.js"></script>
   <script>
       initUKTIWidget({ agentId: 'your-agent-id' });
   </script>

🎨 Customization

Styling

The widget uses Tailwind CSS for styling. You can customize:

• Colors: Modify the gradient and color classes in UKTIWidget.jsx
• Animations: Adjust transition classes and hover effects
• Layout: Change grid layouts and spacing
• Typography: Update font sizes and weights

Content

Update the widget content in src/components/UKTIWidget.jsx:

• Contact information
• Service descriptions
• Resource links
• Company branding

Configuration

The widget accepts options during initialization:

initUKTIWidget({
    // Custom options can be added here
    theme: 'light',
    position: 'bottom-right',
    // etc.
});