luca-chatbot-embed/README.md

Luca AI Chatbot - Non-intrusive popup widget for websites

# Luca AI Chatbot

A modern, responsive AI chatbot with dark/light mode support, designed for seamless integration into websites.

## 🚀 Features

- **Modern UI/UX** with smooth animations and transitions
- **Dark/Light Mode** toggle with persistent preferences
- **Responsive Design** that works on all devices
- **Accessibility** compliant with proper contrast ratios
- **Performance Optimized** with 60fps animations
- **Easy Integration** for embedding in any website

## 📦 Deployment to Netlify

### Option 1: Drag & Drop (Easiest)
1. Go to [netlify.com](https://netlify.com)
2. Sign up/login to your account
3. Drag and drop the entire project folder to the Netlify dashboard
4. Your site will be deployed automatically!

### Option 2: Git Integration
1. Push your code to GitHub/GitLab
2. Connect your repository to Netlify
3. Deploy automatically on every push

## 🔗 Embedding in Framer Website

### Method 1: iFrame Embed (Recommended)
Add this code to your Framer website:

```html
<iframe 
  src="YOUR_NETLIFY_URL" 
  style="
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 100%;
    height: 100%;
    border: none;
    z-index: 9999;
    pointer-events: none;
  "
  allow="microphone"
  title="Luca AI Assistant"
></iframe>
```

### Method 2: Direct Script Embed
Add this script to your Framer website's HTML:

```html
<script>
  // Create chatbot container
  const chatbotContainer = document.createElement('div');
  chatbotContainer.id = 'luca-chatbot-container';
  chatbotContainer.style.cssText = `
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
  `;
  document.body.appendChild(chatbotContainer);

  // Load chatbot
  const iframe = document.createElement('iframe');
  iframe.src = 'YOUR_NETLIFY_URL';
  iframe.style.cssText = `
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: auto;
  `;
  iframe.allow = 'microphone';
  iframe.title = 'Luca AI Assistant';
  
  chatbotContainer.appendChild(iframe);
</script>
```

## ⚙️ Configuration

### Customizing the Chatbot
- **Colors**: Modify CSS variables in `style.css`
- **API Key**: Update the OpenAI API key in `script.js`
- **Assistant ID**: Change the assistant ID in `script.js`

### Environment Variables (Optional)
For production, consider using environment variables:

```javascript
// In script.js, replace the hardcoded API key with:
const API_KEY = process.env.OPENAI_API_KEY || "your-api-key";
```

## 🎨 Customization

### Changing Colors
Edit the CSS variables in `style.css`:

```css
:root {
  --accent-primary: #512feb;    /* Main purple */
  --accent-secondary: #6a5acd;  /* Secondary purple */
  --accent-hover: #4a1fd1;      /* Hover state */
}
```

### Modifying Animations
Adjust animation timing and easing in `style.css`:

```css
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
```

## 🔧 Troubleshooting

### Common Issues

1. **Chatbot not appearing**: Check z-index and pointer-events
2. **API errors**: Verify your OpenAI API key is valid
3. **Styling conflicts**: Ensure no CSS conflicts with your main site

### Performance Tips

- Use the iframe method for better isolation
- Consider lazy loading for better initial page load
- Test on different devices and browsers

## 📱 Mobile Optimization

The chatbot is fully responsive and optimized for:
- ✅ iOS Safari
- ✅ Android Chrome
- ✅ All modern browsers
- ✅ Touch interactions

## 🔒 Security

- API calls are made directly from the client
- Consider implementing a backend proxy for production
- Use environment variables for sensitive data

## 📄 License

This project is open source and available under the MIT License.

## 🤝 Support

For issues or questions:
1. Check the troubleshooting section
2. Review the code comments
3. Test in different environments

---

**Ready to deploy!** 🚀