Fix browser phone Twilio SDK loading and CSS layout issues

- Update Twilio SDK URL from sdk.twilio.com to unpkg CDN (same as backend)
- Change SDK version from 2.11.1 to 2.11.0 for consistency
- Fix dial number input overflow by adding box-sizing: border-box
- Ensure all elements use border-box sizing model

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-08-13 15:03:08 -07:00
parent e3fab38d01
commit 3bdfc3f490
2 changed files with 9 additions and 4 deletions

View File

@@ -7,6 +7,11 @@
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
box-sizing: border-box;
}
.twp-browser-phone-container * {
box-sizing: border-box;
}
.twp-browser-phone-container.compact {

View File

@@ -26,12 +26,12 @@ class TWP_Shortcodes {
global $post;
if (is_a($post, 'WP_Post') && has_shortcode($post->post_content, 'twp_browser_phone')) {
// Enqueue Twilio Voice SDK with multiple fallbacks
// Enqueue Twilio Voice SDK from unpkg CDN (same as backend)
wp_enqueue_script(
'twilio-voice-sdk',
'https://sdk.twilio.com/js/voice/2.11.1/twilio.min.js',
'https://unpkg.com/@twilio/voice-sdk@2.11.0/dist/twilio.min.js',
array(),
'2.11.1',
'2.11.0',
false // Load in head to ensure it's available
);
@@ -41,7 +41,7 @@ class TWP_Shortcodes {
if (typeof Twilio === 'undefined') {
console.warn('Primary Twilio SDK failed, attempting fallback load');
var script = document.createElement('script');
script.src = 'https://sdk.twilio.com/js/voice/2.11.1/twilio.min.js';
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);