169 lines
No EOL
4.7 KiB
Markdown
169 lines
No EOL
4.7 KiB
Markdown
# Plusvibe/Pipl.ai Integration Setup Guide
|
|
|
|
## Overview
|
|
Your Auto-Draft extension now supports Plusvibe/Pipl.ai's Unibox! The extension automatically detects when you're on Pipl.ai and provides the same auto-draft functionality as Gmail and Instantly.
|
|
|
|
## Key Features
|
|
- **Automatic Platform Detection**: Extension recognizes when you're on app.pipl.ai
|
|
- **Smart DOM Extraction**: Works without API key by extracting messages from the page
|
|
- **API Support (Optional)**: Enhanced extraction with Plusvibe API key if available
|
|
- **Familiar UI**: Same green/gold interface as Gmail and Instantly
|
|
|
|
## Installation & Setup
|
|
|
|
### 1. Basic Setup (No API Key Required)
|
|
1. **Reload the Extension**
|
|
- Go to `chrome://extensions/`
|
|
- Find your Auto-Draft extension
|
|
- Click the refresh icon
|
|
|
|
2. **Navigate to Plusvibe**
|
|
- Go to https://app.pipl.ai/v2/unibox/inbox/
|
|
- Open any conversation
|
|
|
|
3. **Use the Extension**
|
|
- Click on the reply/compose area
|
|
- The Auto-Draft UI should appear in the bottom-right corner
|
|
- Or click the extension icon to toggle the UI
|
|
|
|
### 2. Enhanced Setup with API Key (Optional)
|
|
If you have a Plusvibe API key:
|
|
|
|
1. **Open Extension Options**
|
|
- Right-click the extension icon
|
|
- Select "Options"
|
|
|
|
2. **Configure API Settings**
|
|
- Scroll to "Plusvibe/Pipl.ai API Configuration"
|
|
- Enter your API key
|
|
- Optionally adjust the API base URL
|
|
- Click "Save Settings"
|
|
|
|
3. **Benefits of API Access**
|
|
- More accurate thread extraction
|
|
- Faster message retrieval
|
|
- Better handling of complex threads
|
|
|
|
## How It Works
|
|
|
|
### Message Extraction Methods
|
|
|
|
#### 1. DOM Extraction (Default)
|
|
The extension searches for messages using multiple selectors:
|
|
- `.message`, `.email-message`, `.thread-message`
|
|
- `.conversation-message`, `[data-message]`
|
|
- `.pipl-message`, `.plusvibe-message`, `.unibox-message`
|
|
|
|
#### 2. API Extraction (With API Key)
|
|
If configured, the extension will:
|
|
- Use your API key to fetch thread messages
|
|
- Fall back to DOM extraction if API fails
|
|
- Provide more structured data
|
|
|
|
### Reply Box Detection
|
|
The extension looks for:
|
|
- `div[contenteditable="true"]`
|
|
- `textarea` elements
|
|
- `.reply-box`, `.compose-box`, `.message-input`
|
|
- `[role="textbox"]`
|
|
|
|
## Troubleshooting
|
|
|
|
### UI Doesn't Appear
|
|
1. **Check Console for Errors**
|
|
- Open DevTools (F12)
|
|
- Look for "Plusvibe platform detected" message
|
|
- Check for any red errors
|
|
|
|
2. **Verify URL**
|
|
- Ensure you're on `app.pipl.ai`
|
|
- The path should include `/unibox` or `/inbox`
|
|
|
|
3. **Manual Toggle**
|
|
- Click the extension icon to manually show/hide UI
|
|
|
|
### Messages Not Extracted
|
|
1. **Inspect Page Structure**
|
|
- Right-click on a message
|
|
- Select "Inspect"
|
|
- Note the class names and structure
|
|
- Report if different from expected selectors
|
|
|
|
2. **Check API Configuration**
|
|
- If using API key, verify it's correct
|
|
- Check network tab for API errors
|
|
|
|
### Draft Not Inserting
|
|
1. **Find Reply Box**
|
|
- Console should show "Found Plusvibe reply box"
|
|
- If not, the reply box selector may need updating
|
|
|
|
2. **Check for Errors**
|
|
- Look for "Failed to insert draft" errors
|
|
- May need to trigger additional events for some frameworks
|
|
|
|
## API Configuration
|
|
|
|
### Setting Up API Access
|
|
```javascript
|
|
// In plusvibe_extractor.js
|
|
apiConfig: {
|
|
apiKey: null, // Set from storage
|
|
baseUrl: 'https://app.pipl.ai/api/v2',
|
|
endpoints: {
|
|
threads: '/threads',
|
|
messages: '/messages',
|
|
conversations: '/conversations'
|
|
}
|
|
}
|
|
```
|
|
|
|
### API Response Format
|
|
The extension expects API responses in this format:
|
|
```json
|
|
{
|
|
"messages": [
|
|
{
|
|
"from": "sender@email.com",
|
|
"sender_name": "Sender Name",
|
|
"timestamp": "2024-01-01T12:00:00Z",
|
|
"content": "Message content",
|
|
"subject": "Email subject"
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|
|
## Development & Debugging
|
|
|
|
### Enable Verbose Logging
|
|
Open console and run:
|
|
```javascript
|
|
window.PLUSVIBE_DEBUG = true;
|
|
```
|
|
|
|
### Test Extraction
|
|
```javascript
|
|
// Test thread extraction
|
|
PlusvibeExtractor.extractThreadMessages().then(console.log);
|
|
|
|
// Test reply box detection
|
|
console.log(PlusvibeExtractor.findReplyBox());
|
|
```
|
|
|
|
### Report Issues
|
|
If the extension doesn't work properly:
|
|
1. Note the exact URL
|
|
2. Take a screenshot of the page structure
|
|
3. Copy any console errors
|
|
4. Check which selectors failed
|
|
|
|
## Privacy & Security
|
|
- API keys are stored locally in Chrome storage
|
|
- No data is sent to external servers (except OpenAI for drafts)
|
|
- DOM extraction happens entirely in your browser
|
|
|
|
## Next Steps
|
|
- Test the extension on Plusvibe
|
|
- Configure API key if available
|
|
- Report any selector mismatches for updates |