# Instantly.ai Integration Setup Guide

## Overview
Your Auto-Draft extension now supports both Gmail and Instantly.ai's Unibox! The extension automatically detects which platform you're on and loads the appropriate handlers.

## How It Works

### Architecture
- **Gmail**: Uses your existing `content.js` (unchanged)
- **Instantly**: Uses new `content_wrapper.js` with platform detection
- **Shared**: Both platforms use the same background script and GPT integration

### No Breaking Changes
- All Gmail functionality remains exactly the same
- The extension only activates on Instantly when you're in the Unibox (`/app/unibox`)
- Platform detection happens automatically

## Installation

1. **Reload the Extension**
   - Go to `chrome://extensions/`
   - Find your extension
   - Click the refresh icon
   
2. **Test on Gmail First** (ensure nothing broke)
   - Open Gmail
   - Reply to an email
   - The extension should work exactly as before

3. **Test on Instantly**
   - Go to https://app.instantly.ai/app/unibox
   - Open a conversation
   - Click reply or compose
   - The Auto-Draft UI should appear (same look as Gmail)

## Using on Instantly.ai

1. **Open a Conversation**
   - Navigate to Instantly's Unibox
   - Click on any conversation to open it

2. **Start Replying**
   - Click the reply button or compose area
   - The Auto-Draft UI will appear in the bottom-right corner

3. **Generate Draft**
   - Add any context-specific prompt (optional)
   - Click "Auto-Draft with GPT"
   - The draft will be inserted into Instantly's reply box

## Features on Instantly

- ✅ Extract conversation messages
- ✅ Generate contextual replies
- ✅ Insert draft directly into reply box
- ✅ Same UI as Gmail version
- ✅ Toggle/minimize functionality
- ✅ Error handling

## Troubleshooting

### UI Not Appearing on Instantly
1. Make sure you're on the Unibox page (`/app/unibox`)
2. Check console for errors (F12 → Console)
3. Try clicking the extension icon to toggle UI

### Draft Not Inserting
- The extractor tries multiple selectors to find Instantly's reply box
- If it fails, check console for "Could not find Instantly reply box"
- Report the issue with the console output

### Messages Not Extracting
- The extractor looks for common class names in Instantly's UI
- If message extraction fails, check console for extraction logs
- Look for "Extracted 0 messages from Instantly"

## DOM Selectors Used

The extension looks for these elements on Instantly:

**Reply Box:**
- `div[contenteditable="true"]`
- `.reply-input`
- `.message-composer`
- `.compose-area`

**Messages:**
- `.message-item`
- `.conversation-message`
- `.email-message`

**Thread Info:**
- `.conversation-item`
- `.thread-item`
- `[data-conversation-id]`

## Development Notes

### Adding New Selectors
If Instantly updates their UI, you can add new selectors in `instantly_extractor.js`:
- `findReplyBox()` - Add reply box selectors
- `extractThreadMessages()` - Add message container selectors
- `extractContent()` - Add message body selectors

### Testing Extraction
Open console and run:
```javascript
// Test message extraction
InstantlyExtractor.extractThreadMessages()

// Test reply box detection
InstantlyExtractor.findReplyBox()

// Test thread ID extraction
InstantlyExtractor.getCurrentThreadId()
```

## Future Enhancements

Possible improvements:
- Batch draft generation for Instantly
- Save drafts to Instantly's draft system
- Extract recipient details from Instantly
- Support for Instantly's template system

## Support

If you encounter issues:
1. Check the browser console for errors
2. Verify you're on a supported page
3. Try refreshing the page
4. Toggle the extension with the icon

The extension is designed to fail gracefully - if Instantly's UI changes significantly, it will show appropriate error messages rather than breaking.