Security enhancement: Remove frontend browser phone interface

- Updated shortcode to redirect to admin browser phone page for enhanced security
- Removed frontend browser phone assets (108KB total):
  - assets/js/browser-phone-frontend.js (85KB)
  - assets/css/browser-phone-frontend.css (23KB)
- Modified shortcode to show secure redirect interface with authentication checks
- Added new shortcode attributes: title, button_text, target
- Enhanced documentation with security improvements and new behavior
- Reduced frontend attack surface by eliminating JavaScript exposure
- Improved performance with minimal asset loading for shortcode pages

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

CLAUDE.md

@@ -154,7 +154,7 @@ twilio-wp-plugin/
 
 #### TWP_Shortcodes
 - **Purpose**: WordPress shortcodes for frontend features
-- **Shortcode**: `[twp_browser_phone]` - Browser phone interface
+- **Shortcode**: `[twp_browser_phone]` - Admin browser phone redirect interface
 
 ## 💾 Database Schema
 
@@ -240,7 +240,7 @@ twilio-wp-plugin/
 - `/smart-routing-fallback` - Routing error handler
 - `/browser-fallback` - Browser phone fallback
 
-## 🎛️ AJAX Endpoints (Admin & Frontend)
+## 🎛️ AJAX Endpoints (Admin Only)
 
 ### Total: 68 AJAX Actions
 
@@ -271,12 +271,31 @@ All call control functions (`twp_toggle_hold`, `twp_transfer_call`, `twp_requeue
 
 ## 🎨 Frontend Components
 
+### Shortcode Implementation
+The `[twp_browser_phone]` shortcode now provides a **redirect interface** instead of a full browser phone:
+
+#### Shortcode Attributes
+- **`title`**: Display title (default: "Browser Phone")
+- **`button_text`**: Button text (default: "Access Browser Phone")
+- **`target`**: Link target (default: "_blank" - opens in new tab)
+
+#### Security Features
+- **Login Required**: Users must be logged in to see the redirect
+- **Permission Check**: Requires `twp_access_browser_phone` or `manage_options` capability
+- **Error Messages**: Clear feedback for unauthorized access
+
+#### Styling
+- **Inline CSS Only**: No external CSS files loaded
+- **Minimal Assets**: Reduces frontend bloat
+- **Responsive Design**: Works on all device sizes
+
 ### JavaScript Files
 1. **admin.js** (116KB) - Admin interface functionality
-2. **browser-phone-frontend.js** (85KB) - Browser phone implementation
-3. **twp-service-worker.js** (2.5KB) - Push notifications
+2. **twp-service-worker.js** (2.5KB) - Push notifications
 
-### Browser Phone Features
+### Browser Phone Features (Admin Only)
+- **Enhanced Security**: All browser phone functionality restricted to admin area
+- **Admin URL**: `admin.php?page=twilio-wp-browser-phone`
 - Twilio Device SDK integration
 - Real-time call controls (hold, transfer, record)
 - Queue monitoring dashboard
@@ -285,11 +304,36 @@ All call control functions (`twp_toggle_hold`, `twp_transfer_call`, `twp_requeue
 - Visual call state indicators
 
 ### CSS Files
-- **admin.css** - Admin interface styling
-- **browser-phone-frontend.css** - Browser phone UI
+- **admin.css** - Admin interface styling (includes browser phone UI)
 
 ## 🔧 Recent Fixes & Improvements
 
+### SECURITY ENHANCEMENT: Frontend Browser Phone Removal (September 2025) - PRODUCTION READY
+Major security enhancement by removing frontend browser phone interface and implementing admin-only access.
+
+#### Browser Phone Security Enhancement
+- **Frontend Interface Removed**: Eliminated full browser phone interface from frontend shortcode
+- **Admin-Only Access**: All browser phone functionality moved to secure admin area
+- **Asset Reduction**: Removed 108KB of frontend assets (browser-phone-frontend.js and browser-phone-frontend.css)
+- **Redirect Interface**: Shortcode now provides secure redirect to admin browser phone page
+- **Enhanced Permissions**: Strict capability checking with clear error messages for unauthorized users
+- **Reduced Attack Surface**: Minimized frontend JavaScript exposure and potential security vectors
+- **Performance Improvement**: Reduced frontend asset loading and improved page load times
+
+#### Shortcode Transformation
+- **Security-First Design**: Login and permission validation before any functionality access
+- **Minimal Asset Loading**: Only essential inline CSS for redirect interface styling
+- **Responsive Redirect**: Professional redirect interface works on all devices
+- **Customizable Attributes**: title, button_text, and target attributes for flexibility
+- **Clear Error Messaging**: Informative error messages for authentication and authorization failures
+
+#### Technical Implementation
+- **File Removal**: `assets/js/browser-phone-frontend.js` and `assets/css/browser-phone-frontend.css` eliminated
+- **Inline Styling**: Minimal CSS injected only when shortcode is present on page
+- **Permission System**: Leverages WordPress capability system (`twp_access_browser_phone` or `manage_options`)
+- **Admin URL Generation**: Secure admin_url() function for proper WordPress admin integration
+- **Target Control**: Configurable link target (_blank by default for better UX)
+
 ### PRODUCTION READY: Extension Transfer System Overhaul (September 2025) - FULLY RESOLVED
 Comprehensive overhaul of extension-based call transfers with enterprise-grade reliability.
 

README.md

@@ -46,7 +46,8 @@ This plugin **requires** the Twilio PHP SDK v8.7.0 to function. The plugin will
 - **Queue Notifications**: SMS alerts to designated numbers when calls enter queues
 
 ### 🌐 Browser Phone (WebRTC)
-- **In-Browser Calling**: Make and receive calls directly from WordPress admin or frontend
+- **Admin-Only Access**: Secure browser phone interface available only in WordPress admin area
+- **Enhanced Security**: All browser phone functionality moved from frontend for improved security
 - **Twilio Voice SDK v2**: Uses latest SDK for WebRTC functionality
 - **Visual Dialpad**: Click-to-dial interface with DTMF support
 - **Call Controls**: Mute, hold indicators, call timer
@@ -54,7 +55,7 @@ This plugin **requires** the Twilio PHP SDK v8.7.0 to function. The plugin will
 - **Queue Integration**: Accept calls from specific queues
 - **Token Management**: Automatic token refresh for uninterrupted service
 - **Mobile-Friendly**: Responsive design optimized for smartphones and tablets
-- **Shortcode Support**: Embed browser phone on any page with `[twp_browser_phone]`
+- **Shortcode Redirect**: `[twp_browser_phone]` shortcode provides secure redirect to admin interface
 
 ### 🕒 Business Hours Management
 - **Schedule-based Routing**: Different call flows for business hours vs after-hours
@@ -113,7 +114,15 @@ This plugin **requires** the Twilio PHP SDK v8.7.0 to function. The plugin will
 ## Recent Updates
 
 ### MAJOR RELEASE v2.3.0 (September 2025) - Enterprise Ready
-Comprehensive system overhaul with production-ready reliability improvements.
+Comprehensive system overhaul with production-ready reliability improvements and enhanced security.
+
+#### 🔒 Security Enhancement: Frontend Browser Phone Removal
+- **Security-First Approach**: Removed full browser phone interface from frontend shortcode
+- **Admin-Only Access**: All browser phone functionality now restricted to secure WordPress admin area
+- **Asset Reduction**: Eliminated 108KB of frontend assets (browser-phone-frontend.js and CSS)
+- **Reduced Attack Surface**: Minimized frontend JavaScript exposure and potential security vectors
+- **Performance Boost**: Improved page load times with reduced frontend asset loading
+- **Professional Redirect**: Shortcode now provides clean redirect interface to admin browser phone
 
 #### 🚀 Extension Transfer System - Complete Solution
 - **FIXED: Direct Voicemail Issue**: Extension transfers no longer go directly to voicemail for available agents
@@ -326,11 +335,16 @@ Comprehensive redesign of hold, transfer, and requeue functionality with profess
    - Enter TwiML App SID
    - Save settings
 
-3. **Access Browser Phone**:
-   - Navigate to **Twilio** → **Browser Phone**
+3. **Access Browser Phone** (Admin Only):
+   - Navigate to **WordPress Admin** → **Twilio** → **Browser Phone**
    - Select caller ID from available numbers
    - Start making/receiving calls
 
+4. **Frontend Access** (Optional):
+   - Use `[twp_browser_phone]` shortcode on any page
+   - Shortcode provides secure redirect to admin interface
+   - Requires user login and appropriate permissions
+
 ### Agent Configuration
 1. **Create Agent Groups** (Twilio → Agent Groups)
 2. **Add Agents** to groups with priorities
@@ -356,37 +370,41 @@ Comprehensive redesign of hold, transfer, and requeue functionality with profess
    - **Queue Timeouts**: Alert when calls wait too long (configurable threshold)
    - **Missed Calls**: Alert when calls are abandoned or timeout
 
-## Frontend Browser Phone
+## Browser Phone Access
 
-### Shortcode Usage
-The browser phone can be embedded on any WordPress page using the `[twp_browser_phone]` shortcode. This is perfect for creating dedicated agent pages or customer service portals.
+### Shortcode Usage (Redirect Interface)
+The `[twp_browser_phone]` shortcode now provides a **secure redirect interface** that directs users to the WordPress admin browser phone page for enhanced security.
 
 **Basic Usage:**
 ```
 [twp_browser_phone]
 ```
 
-**With Options:**
+**With Custom Options:**
 ```
-[twp_browser_phone title="Customer Service Phone" show_title="true" compact="false"]
+[twp_browser_phone title="Customer Service Phone" button_text="Access Phone System" target="_blank"]
 ```
 
 ### Shortcode Parameters
-- **title**: Custom title for the phone widget (default: "Browser Phone")
-- **show_title**: Display the title above the phone (default: "true")
-- **compact**: Use compact layout for smaller spaces (default: "false")
+- **title**: Custom title for the redirect interface (default: "Browser Phone")
+- **button_text**: Text for the admin link button (default: "Access Browser Phone")
+- **target**: Link target behavior (default: "_blank" - opens in new tab)
 
-### Permission Requirements
-- Users must be **logged in** to access the browser phone
-- Users need the **`twp_access_browser_phone`** capability or **`manage_options`**
-- Phone Agent role users have access by default
+### Security Features
+- **Authentication Required**: Users must be logged in to see the redirect interface
+- **Permission Validation**: Requires `twp_access_browser_phone` capability or `manage_options`
+- **Clear Error Messages**: Informative feedback for unauthorized access attempts
+- **Admin-Only Interface**: All browser phone functionality restricted to WordPress admin area
 
-### Mobile Optimization
-- **Responsive Design**: Adapts to all screen sizes
-- **Touch-Friendly**: Large buttons optimized for mobile devices
-- **Haptic Feedback**: Vibration on button press (where supported)
-- **Auto-Zoom Prevention**: Proper viewport handling for mobile browsers
-- **Dark Mode Support**: Automatically adapts to user's system preference
+### Browser Phone Interface (Admin Area)
+Access the full browser phone interface at: **WordPress Admin → Twilio → Browser Phone**
+
+#### Features:
+- **Enhanced Security**: Protected by WordPress admin authentication
+- **Full Functionality**: Complete browser phone features available in secure environment
+- **Responsive Design**: Adapts to all screen sizes within admin interface
+- **Professional Interface**: Integrated with WordPress admin styling
+- **No Frontend Assets**: Eliminates security risks from frontend JavaScript exposure
 
 ## Voice Configuration
 
@@ -407,10 +425,12 @@ The browser phone can be embedded on any WordPress page using the `[twp_browser_
 
 ### Common Issues
 
-#### Browser Phone "Client version not supported"
-- **Fixed in latest version**: Upgraded to Voice SDK v2
-- Clear browser cache and reload page
-- Check TwiML App SID is configured
+#### Browser Phone Access Issues
+- **Access via Admin Only**: Browser phone moved to WordPress admin area for security
+- **Shortcode Redirect**: Frontend shortcode now provides redirect to admin interface
+- **Permission Required**: Ensure user has `twp_access_browser_phone` or `manage_options` capability
+- **Login Required**: Users must be logged in to access browser phone functionality
+- Check TwiML App SID is configured in WordPress admin settings
 
 #### "Twilio SDK classes not available"
 ```bash
@@ -519,6 +539,10 @@ All webhooks are REST API endpoints under `/wp-json/twilio-webhook/v1/`:
 - **Mobile Browsers**: Limited WebRTC support
 
 ### Security Considerations
+- **Admin-Only Browser Phone**: All browser phone functionality restricted to WordPress admin area
+- **Frontend Asset Elimination**: Removed 108KB of frontend JavaScript and CSS to reduce attack surface
+- **Authentication Required**: Shortcode requires user login and appropriate permissions
+- **Secure Redirects**: Frontend shortcode provides authenticated redirect to admin interface
 - All webhooks use WordPress nonce verification
 - Phone numbers validated and sanitized
 - SQL queries use prepared statements
@@ -528,6 +552,10 @@ All webhooks are REST API endpoints under `/wp-json/twilio-webhook/v1/`:
 ## Version History
 
 ### v2.3.0 (Current - September 2025) - ENTERPRISE READY
+- **SECURITY ENHANCEMENT**: Removed frontend browser phone interface, moved to admin-only access for enhanced security
+- **ASSET REDUCTION**: Eliminated 108KB of frontend assets (browser-phone-frontend.js and CSS files)
+- **SHORTCODE SECURITY**: Browser phone shortcode now provides secure redirect with authentication checks
+- **ATTACK SURFACE REDUCTION**: Minimized frontend JavaScript exposure and potential security vectors
 - **EXTENSION TRANSFER SYSTEM**: Complete overhaul with queue-based routing, 2-minute timeout, and automatic voicemail fallback
 - **BROWSER PHONE UNIVERSAL**: Firefox support, permission management, call stability, and cross-browser compatibility
 - **AGENT STATUS AUTOMATION**: 1-minute auto-revert system with WordPress cron job integration

includes/class-twp-shortcodes.php

@@ -21,67 +21,44 @@ class TWP_Shortcodes {
     
     /**
      * Enqueue frontend assets when shortcode is present
+     * Since we now redirect to admin, only basic styling is needed
      */
     public static function enqueue_frontend_assets() {
         global $post;
         
         if (is_a($post, 'WP_Post') && has_shortcode($post->post_content, 'twp_browser_phone')) {
-            // Enqueue Twilio Voice SDK from unpkg CDN (same as backend)
-            wp_enqueue_script(
-                'twilio-voice-sdk',
-                'https://unpkg.com/@twilio/voice-sdk@2.11.0/dist/twilio.min.js',
-                array(),
-                '2.11.0',
-                false // Load in head to ensure it's available
-            );
-            
-            // Add backup SDK loading
-            wp_add_inline_script('twilio-voice-sdk', "
-                window.twpLoadTwilioSDK = function() {
-                    if (typeof Twilio === 'undefined') {
-                        console.warn('Primary Twilio SDK failed, attempting fallback load');
-                        var script = document.createElement('script');
-                        script.src = 'https://unpkg.com/@twilio/voice-sdk@2.11.0/dist/twilio.min.js';
-                        script.onload = function() { console.log('Fallback Twilio SDK loaded'); };
-                        script.onerror = function() { console.error('Fallback Twilio SDK failed'); };
-                        document.head.appendChild(script);
-                    }
-                };
-                
-                // Try loading after a delay if not available
-                setTimeout(window.twpLoadTwilioSDK, 2000);
-            ", 'after');
-            
-            // Enqueue our browser phone script
-            wp_enqueue_script(
-                'twp-browser-phone-frontend',
-                TWP_PLUGIN_URL . 'assets/js/browser-phone-frontend.js',
-                array('jquery', 'twilio-voice-sdk'),
-                TWP_VERSION,
-                true
-            );
-            
-            // Enqueue mobile-friendly styles
-            wp_enqueue_style(
-                'twp-browser-phone-frontend',
-                TWP_PLUGIN_URL . 'assets/css/browser-phone-frontend.css',
-                array(),
-                TWP_VERSION
-            );
-            
-            // Localize script with AJAX data
-            wp_localize_script('twp-browser-phone-frontend', 'twp_frontend_ajax', array(
-                'ajax_url' => admin_url('admin-ajax.php'),
-                'admin_url' => admin_url(),
-                'nonce' => wp_create_nonce('twp_frontend_nonce'),
-                'user_id' => get_current_user_id(),
-                'is_logged_in' => is_user_logged_in()
-            ));
+            // Add basic styling for the redirect interface
+            wp_add_inline_style('wp-admin', '
+                .twp-browser-phone-redirect {
+                    padding: 20px;
+                    border: 1px solid #ddd;
+                    border-radius: 5px;
+                    background: #f9f9f9;
+                    text-align: center;
+                    margin: 20px 0;
+                }
+                .twp-browser-phone-redirect h3 {
+                    margin-top: 0;
+                    color: #333;
+                }
+                .twp-browser-phone-redirect p {
+                    margin-bottom: 15px;
+                }
+                .twp-error {
+                    padding: 10px;
+                    border: 1px solid #dc3232;
+                    border-radius: 3px;
+                    background: #fbeaea;
+                    color: #dc3232;
+                    margin: 10px 0;
+                }
+            ');
         }
     }
     
     /**
      * Browser phone shortcode handler
+     * Redirects users to the admin browser phone page
      */
     public static function browser_phone_shortcode($atts) {
         // Check if user is logged in
@@ -97,174 +74,24 @@ class TWP_Shortcodes {
         // Parse shortcode attributes
         $atts = shortcode_atts(array(
             'title' => 'Browser Phone',
-            'show_title' => 'true',
-            'compact' => 'false'
+            'button_text' => 'Access Browser Phone',
+            'target' => '_blank'
         ), $atts, 'twp_browser_phone');
         
-        $show_title = ($atts['show_title'] === 'true');
-        $compact_mode = ($atts['compact'] === 'true');
+        // Generate admin URL for browser phone page
+        $admin_url = admin_url('admin.php?page=twilio-wp-browser-phone');
+        $target = ($atts['target'] === '_blank') ? 'target="_blank"' : '';
         
         ob_start();
         ?>
-        <div id="twp-frontend-browser-phone" class="twp-browser-phone-container <?php echo $compact_mode ? 'compact' : ''; ?>">
-            <?php if ($show_title): ?>
-                <h3 class="twp-browser-phone-title"><?php echo esc_html($atts['title']); ?></h3>
-            <?php endif; ?>
-            
-            <!-- Connection Status -->
-            <div class="twp-connection-status">
-                <span class="status-indicator offline" id="twp-status-indicator"></span>
-                <span class="status-text" id="twp-status-text">Connecting...</span>
-            </div>
-            
-            <!-- Phone Number Selection -->
-            <div class="twp-phone-selection">
-                <label for="twp-caller-id">Caller ID:</label>
-                <select id="twp-caller-id" class="twp-select">
-                    <option value="">Loading...</option>
-                </select>
-            </div>
-            
-            <!-- Dial Pad -->
-            <div class="twp-dialpad">
-                <div class="twp-number-display">
-                    <input type="tel" id="twp-dial-number" placeholder="Enter number to dial" />
-                    <button id="twp-clear-number" class="twp-btn-clear" title="Clear">×</button>
-                </div>
-                
-                <div class="twp-dial-grid">
-                    <button class="twp-dial-btn" data-digit="1">1<span></span></button>
-                    <button class="twp-dial-btn" data-digit="2">2<span>ABC</span></button>
-                    <button class="twp-dial-btn" data-digit="3">3<span>DEF</span></button>
-                    <button class="twp-dial-btn" data-digit="4">4<span>GHI</span></button>
-                    <button class="twp-dial-btn" data-digit="5">5<span>JKL</span></button>
-                    <button class="twp-dial-btn" data-digit="6">6<span>MNO</span></button>
-                    <button class="twp-dial-btn" data-digit="7">7<span>PQRS</span></button>
-                    <button class="twp-dial-btn" data-digit="8">8<span>TUV</span></button>
-                    <button class="twp-dial-btn" data-digit="9">9<span>WXYZ</span></button>
-                    <button class="twp-dial-btn" data-digit="*">*</button>
-                    <button class="twp-dial-btn" data-digit="0">0<span>+</span></button>
-                    <button class="twp-dial-btn" data-digit="#">#</button>
-                </div>
-            </div>
-            
-            <!-- Call Controls -->
-            <div class="twp-call-controls">
-                <button id="twp-call-btn" class="twp-btn twp-btn-primary">
-                    <span class="call-icon">📞</span>
-                    <span class="call-text">Call</span>
-                </button>
-                <button id="twp-hangup-btn" class="twp-btn twp-btn-danger" style="display: none;">
-                    <span class="hangup-icon">📞</span>
-                    <span class="hangup-text">Hang Up</span>
-                </button>
-                <button id="twp-resume-btn" class="twp-btn twp-btn-warning" style="display: none;">
-                    <span class="resume-icon">▶️</span>
-                    <span class="resume-text">Resume Call</span>
-                </button>
-            </div>
-            
-            <!-- Call Info -->
-            <div class="twp-call-info" id="twp-call-info" style="display: none;">
-                <div class="call-timer">
-                    <span class="timer-label">Call Duration:</span>
-                    <span class="timer-value" id="twp-call-timer">00:00</span>
-                </div>
-                <div class="call-status">
-                    <span id="twp-call-status">Connecting...</span>
-                </div>
-            </div>
-            
-            <!-- Call Control Panel (shown during active calls) -->
-            <div class="twp-call-controls-panel" id="twp-call-controls-panel" style="display: none;">
-                <div class="call-control-buttons">
-                    <button id="twp-hold-btn" class="twp-btn twp-btn-control" title="Put call on hold">
-                        Hold
-                    </button>
-                    <button id="twp-transfer-btn" class="twp-btn twp-btn-control" title="Transfer to another agent">
-                        Transfer
-                    </button>
-                    <button id="twp-requeue-btn" class="twp-btn twp-btn-control" title="Put call back in queue">
-                        Requeue
-                    </button>
-                    <button id="twp-record-btn" class="twp-btn twp-btn-control" title="Start/stop recording">
-                        Record
-                    </button>
-                </div>
-            </div>
-            
-            <!-- Queue Management Section -->
-            <div class="twp-queue-section" id="twp-queue-section">
-                <h4>Your Queues</h4>
-                <div class="twp-queue-list" id="twp-queue-list">
-                    <div class="queue-loading">Loading queues...</div>
-                </div>
-                
-                <!-- Queue Actions (Always Visible) -->
-                <div class="queue-global-actions" id="twp-queue-global-actions" style="display: none;">
-                    <div class="global-queue-actions">
-                        <button id="twp-refresh-queues" class="twp-btn twp-btn-secondary">
-                            Refresh
-                        </button>
-                        <button id="twp-alert-toggle" class="twp-btn twp-btn-secondary alert-off">
-                            🔕 Alerts OFF
-                        </button>
-                    </div>
-                </div>
-                
-                <!-- Queue Controls (Only When Call Selected) -->
-                <div class="twp-queue-controls" id="twp-queue-controls" style="display: none;">
-                    <div class="selected-queue-info">
-                        <h5 id="selected-queue-name">No queue selected</h5>
-                        <div class="queue-stats">
-                            <span class="waiting-count">Waiting: <span id="twp-waiting-count">0</span></span>
-                            <span class="queue-size">Max: <span id="twp-queue-max-size">-</span></span>
-                        </div>
-                    </div>
-                    <div class="queue-actions">
-                        <button id="twp-accept-queue-call" class="twp-btn twp-btn-success">
-                            Accept Next Call
-                        </button>
-                    </div>
-                </div>
-            </div>
-            
-            <!-- Voicemail Section -->
-            <div class="twp-voicemail-section" id="twp-voicemail-section">
-                <div class="voicemail-header" id="twp-voicemail-header">
-                    <h4>Recent Voicemails</h4>
-                    <div class="voicemail-summary">
-                        <span class="summary-stats">
-                            Total: <span id="twp-total-voicemails">0</span> | 
-                            Today: <span id="twp-today-voicemails">0</span>
-                        </span>
-                        <button class="voicemail-toggle" id="twp-voicemail-toggle">
-                            <span class="toggle-icon">▼</span>
-                        </button>
-                    </div>
-                </div>
-                
-                <div class="voicemail-content" id="twp-voicemail-content" style="display: none;">
-                    <div class="twp-voicemail-list" id="twp-voicemail-list">
-                        <div class="voicemail-loading">Loading voicemails...</div>
-                    </div>
-                    
-                    <div class="voicemail-actions">
-                        <button id="twp-refresh-voicemails" class="twp-btn twp-btn-secondary">
-                            Refresh
-                        </button>
-                        <button id="twp-view-all-voicemails" class="twp-btn twp-btn-secondary">
-                            View All
-                        </button>
-                    </div>
-                </div>
-            </div>
-            
-            <!-- Audio elements for incoming calls handled by browser -->
-            <audio id="twp-ringtone" style="display: none;"></audio>
-            
-            <!-- Error/Success Messages -->
-            <div class="twp-messages" id="twp-messages"></div>
+        <div class="twp-browser-phone-redirect">
+            <h3><?php echo esc_html($atts['title']); ?></h3>
+            <p>The browser phone interface has been moved to the WordPress admin area for enhanced security and functionality.</p>
+            <p>
+                <a href="<?php echo esc_url($admin_url); ?>" <?php echo $target; ?> class="button button-primary">
+                    <?php echo esc_html($atts['button_text']); ?>
+                </a>
+            </p>
         </div>
         <?php
         return ob_get_clean();