See It In Action
PLuG seamlessly integrated into the MLB Yankees website
Chrome Extension for DevRev PLuG Integration
Enable DevRev PLuG widgets on any website using advanced "green screen" masking technology that bypasses CSP restrictions and provides perfect click-through functionality. Supports both anonymous and identified user experiences with email and display name integration.
PLuG seamlessly integrated into the MLB Yankees website
Everything you need for seamless PLuG integration
Uses iframe overlay technique to completely bypass Content Security Policy restrictions on any website.
Automatically activates PLuG on configured sites with forced reactivation on SPA navigation.
Shows only PLuG widgets while allowing clicks through to the underlying website.
Automatically detects when PLuG chat opens and dynamically expands the visible overlay area.
Monitors navigation in single-page applications (React, Vue, Angular) for seamless integration.
Real-time configuration management with instant updates and pattern-based site matching.
Support for identified users with email and display name for personalized PLuG experiences.
Get up and running in minutes
Download the extension files to your local machine.
Download and extract the extension files
Open Chrome and navigate to chrome://extensions/ and enable "Developer mode" in the top right corner.
Click "Load unpacked" and select the Chrome Extensions/plug-overlay-manager folder.
Right-click the extension icon and select "Options" to configure your PLuG-enabled sites.
Set up your PLuG-enabled sites
Friendly name for identification (e.g., "Yankees Website")
Wildcard pattern to match sites (e.g., "*yankees*")
Your DevRev PLuG application identifier
User email for identified PLuG experiences
Friendly name shown in conversations
yankees.com → Matches yankees.com and all subpages*.yankees.com → Matches any subdomain*yankees* → Matches any URL containing "yankees"mlb.com/yankees → Matches specific path onlyEnable personalized PLuG experiences with identified users
PLuG works without user identification. Conversations are not linked to specific users in DevRev.
Users are identified by email and display name. Conversations are tracked and linked to specific users in DevRev.
RevUser Email (Optional)
User's email address for identification in DevRev conversations
Display Name (Optional)
Friendly name shown in PLuG conversations (only used when email is provided)
window.plugSDK.init({
app_id: "your-app-id",
identity: {
user_ref: "user@example.com",
user_traits: {
email: "user@example.com",
display_name: "John Doe"
}
}
})Personalized conversation history
User tracking in DevRev analytics
Contextual support experiences
Better customer relationship management
How to use the extension effectively
Click the extension icon to manually toggle PLuG overlay on/off for the current site.
Enable in settings to automatically show PLuG on configured sites. Reactivates on navigation.
Right-click the extension icon to access configuration options and site management.
How the green screen masking works
Iframe Overlay: Creates isolated environment that bypasses CSP restrictions
CSS Masking: Green screen technique shows only PLuG elements
Click Forwarding: Transparent overlay allows clicks through to website
Dynamic Sizing: Real-time adjustment to PLuG widget dimensions
// Anonymous Mode
{
app_id: "your-devrev-app-id",
target: domElement
}
// Identified Mode
{
app_id: "your-devrev-app-id",
identity: {
user_ref: "user@example.com",
user_traits: {
email: "user@example.com",
display_name: "John Doe"
}
}
}Common issues and solutions
Check: Extension is enabled and site configuration exists
Verify: URL pattern matches current site
Debug: Open browser console for PLuG initialization logs
Try: Manual toggle with extension icon click
Enable: Auto-activation in extension settings
Pattern: Use broader URL patterns like "*domain*"
Monitor: Extension detects pushState/replaceState navigation
Enable: Debug mode in extension options
Console: Detailed logs with 🚀 🔍 📝 emojis
Monitor: Real-time widget size and position tracking