Real-time Collaboration

Transform your SEO workflow with powerful real-time collaboration features that keep your entire team in sync. Choose from multiple WebSocket providers, see who's working on what, prevent editing conflicts, and communicate seamlessly—all within ProRank SEO's modern tabbed interface.

What's New in Version 2.0

Interface Overview

Navigation Tabs

The collaboration interface is organized into four main tabs for easy access to all features:

Connection Status Bar

The status bar at the top shows your real-time connection status with color-coded indicators:

• 🟢 Green - Connected and active
• 🟡 Yellow - Testing connection
• 🔴 Red - Connection error
• ⚪ Gray - Not configured

Active user avatars appear on the right side of the status bar, showing who's currently online.

Available Providers

Collaboration Features

Quick Start Guide

Step 1: Choose Your Provider

Navigate to Agency Hub → Collaboration and click the Provider Setup tab. Review the available providers and click on your preferred option. We recommend Socket.IO for full control or Pusher for quick setup.

Step 2: Configure Provider Credentials

Based on your selected provider:

1. Sign up at https://pusher.com (free account available)
2. Create a new Channels app
3. Copy your credentials:
   - App ID: Found in App Keys section
   - Key: Your public key
   - Secret: Your private key (keep secure)
   - Cluster: Select closest to your users
4. Enter credentials in ProRank SEO
5. Click "Test Connection"

1. For hosted Socket.IO:
   - Enter your server URL
   - Specify port (default: 3000)
   - Enable SSL if using HTTPS

2. For local Socket.IO:
   - Leave URL empty for auto-setup
   - Enable "Auto-start server"
   - Ensure Node.js is installed

Step 3: Enable Features

Switch to the Collaboration Settings tab and enable your desired features:

• ✅ Edit Locking - Recommended for all teams
• ✅ Live Presence - See who's online
• ✅ Inline Comments - For team communication
• ✅ Cursor Tracking - For visual collaboration
• ✅ Typing Indicators - See real-time activity
• ✅ Version History - Track all changes

Step 4: Test Your Setup

1. Click “Test Connection” to verify provider setup
2. Open ProRank SEO in another browser or incognito window
3. Navigate to the same page in both windows
4. You should see presence indicators showing both sessions
5. Try editing a field - it should lock in the other window

Activity Monitor

The Activity Monitor tab provides real-time visibility into team collaboration:

Active Users Section

• Shows all currently connected users with avatars
• Displays user status (🟢 Active or 🟡 Idle)
• Shows which page each user is viewing
• Updates automatically as users join/leave

Active Locks Section

• Lists all current edit locks
• Shows who owns each lock
• Displays remaining time before auto-release
• Allows admins to force-release locks if needed

Recent Comments Section

• Shows latest 5 comments across all areas
• Displays comment author, timestamp, and content
• Click to jump to comment location
• Real-time updates as new comments are added

Advanced Configuration

The Advanced tab provides fine-tuning options for power users:

Slack Integration

1. Create Slack Webhook:
   - Go to api.slack.com/apps
   - Create new app → From scratch
   - Add "Incoming Webhooks" feature
   - Activate and add to workspace
   - Copy webhook URL

2. Configure in ProRank:
   - Paste webhook URL in Advanced tab
   - Enable Slack Notifications
   - Choose notification events

Performance Settings

• Update Interval: How often to sync (default: 1000ms)
• Max Reconnect Attempts: Retry limit for connection failures (default: 5)
• Heartbeat Interval: Keep-alive ping frequency (default: 30000ms)

Fallback Provider

Enable automatic failover to a backup provider if the primary connection fails. Useful for mission-critical environments requiring high availability.

Security & Privacy

Data Handling by Provider

• Pusher/Ably/Scaledrone: Message routing only, no content storage
• Socket.IO (self-hosted): Complete data control on your server
• Local WebSocket: All data stays within your WordPress installation

Common Issues & Solutions

Best Practices

Developer Reference

For developers integrating with the collaboration system:

REST API Endpoints

POST   /wp-json/prorank-seo/v1/collaboration/auth
POST   /wp-json/prorank-seo/v1/collaboration/lock
DELETE /wp-json/prorank-seo/v1/collaboration/lock
GET    /wp-json/prorank-seo/v1/collaboration/locks
POST   /wp-json/prorank-seo/v1/collaboration/presence
GET    /wp-json/prorank-seo/v1/collaboration/comments
POST   /wp-json/prorank-seo/v1/collaboration/comments
POST   /wp-json/prorank-seo/v1/collaboration/test-connection
POST   /wp-json/prorank-seo/v1/settings/collaboration

WebSocket Events

// Listen for events
channel.bind('lock-acquired', (data) => {
  console.log('Lock acquired:', data);
});

channel.bind('presence-update', (data) => {
  console.log('User presence changed:', data);
});

// Trigger events
channel.trigger('client-cursor-move', {
  x: mouseX,
  y: mouseY,
  element: elementId
});

Version History