Embeddable Widget Documentation

Integrate Music People Hub into any website

🎯 Embed URL Format

https://musicpeoplehub.base44.app/Embed?tenant_id=YOUR_TENANT_ID&event_id=OPTIONAL&theme=auto&locale=en

tenant_id

Your unique identifier (required)

event_id

Specific event (optional, uses current if omitted)

theme

light, dark, or auto (default: auto)

locale

Language code (default: en)

🔧 Option 1: Standard iframe Embed (Recommended)

Copy and paste this complete snippet into any HTML page:

<!-- Music People Hub Widget -->
<div id="music-pool-widget" style="width: 100%; max-width: 1200px; margin: 0 auto;">
  <iframe 
    id="music-pool-iframe"
    src="https://musicpeoplehub.base44.app/Embed?tenant_id=YOUR_TENANT_ID&theme=auto&locale=en"
    title="Music People Hub Widget"
    width="100%"
    height="600"
    frameborder="0"
    loading="lazy"
    allow="clipboard-write"
    style="border: 2px solid #000; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"
  ></iframe>
</div>

<!-- Auto-resize Script -->
<script>
(function() {
  const iframe = document.getElementById('music-pool-iframe');
  if (!iframe) return;

  window.addEventListener('message', function(event) {
    if (event.origin !== 'https://musicpeoplehub.base44.app') return;
    
    if (event.data && event.data.type === 'widgetHeight') {
      iframe.style.height = event.data.value + 'px';
    }
  });
})();
</script>

<!-- Fallback for no JavaScript -->
<noscript>
  <a href="https://musicpeoplehub.base44.app/Embed?tenant_id=YOUR_TENANT_ID" 
     target="_blank" 
     rel="noopener noreferrer"
     style="display: inline-block; padding: 12px 24px; background: #000; color: #FFFF00; text-decoration: none; border-radius: 8px; font-weight: bold;">
    View Music People Hub Profiles →
  </a>
</noscript>

⚠️ Replace:

YOUR_TENANT_ID with your actual tenant ID

📝 Option 2: WordPress Integration

Method A: Custom HTML Block (Gutenberg)

Edit your WordPress page/post
Click + to add a block
Search for "Custom HTML"
Paste the iframe snippet above
Update/Publish

Method B: WordPress Shortcode

Step 1: Add this to your theme's functions.php:

<?php
/**
 * Music People Hub Widget Shortcode
 * Add this to your theme's functions.php
 */
function music_pool_hub_widget_shortcode($atts) {
    $atts = shortcode_atts(array(
        'tenant_id' => '',
        'event_id' => '',
        'theme' => 'auto',
        'locale' => 'en',
        'height' => '600'
    ), $atts);

    if (empty($atts['tenant_id'])) {
        return '<p style="color: red;">Error: tenant_id required</p>';
    }

    $embed_url = 'https://musicpeoplehub.base44.app/Embed?tenant_id=' . urlencode($atts['tenant_id']) . 
                 '&theme=' . urlencode($atts['theme']) . 
                 '&locale=' . urlencode($atts['locale']);
    
    if (!empty($atts['event_id'])) {
        $embed_url .= '&event_id=' . urlencode($atts['event_id']);
    }

    $widget_id = 'music-pool-' . uniqid();
    
    return '<div style="width: 100%; max-width: 1200px; margin: 0 auto;">
        <iframe 
            id="' . $widget_id . '"
            src="' . esc_url($embed_url) . '"
            width="100%"
            height="' . esc_attr($atts['height']) . '"
            frameborder="0"
            loading="lazy"
            style="border: 2px solid #000; border-radius: 12px;"
        ></iframe>
    </div>
    <script>
    (function() {
        const iframe = document.getElementById("' . $widget_id . '");
        window.addEventListener("message", function(e) {
            if (e.origin !== "https://musicpeoplehub.base44.app") return;
            if (e.data && e.data.type === "widgetHeight") {
                iframe.style.height = e.data.value + "px";
            }
        });
    })();
    </script>';
}
add_shortcode('music_pool_hub', 'music_pool_hub_widget_shortcode');
?>

Step 2: Use in posts/pages:

[music_pool_hub tenant_id="YOUR_TENANT_ID"]

// With optional parameters:
[music_pool_hub tenant_id="YOUR_TENANT_ID" event_id="EVENT_123" theme="light" locale="de-DE"]

🔒 Security & Privacy

Content Security Policy (CSP)

Add to your site's CSP header:

Content-Security-Policy: frame-src https://musicpeoplehub.base44.app;

GDPR Compliance

✅ No cookies until user interaction
✅ No tracking by default
✅ All data within your tenant

♿ Accessibility

✅ Keyboard navigation supported
✅ ARIA labels on all elements
✅ Focus trap within widget
✅ Screen reader friendly
✅ High contrast mode support

🐛 Troubleshooting

Widget not loading?

Check browser console for errors
Verify tenant_id is correct
Ensure iframe src URL is accessible

Height not adjusting?

Ensure auto-resize script is included
Check browser console for postMessage errors
Verify origin in script matches embed URL

📋 Quick Reference

Minimum Working Example

<iframe src="https://musicpeoplehub.base44.app/Embed?tenant_id=YOUR_ID" 
        width="100%" height="600"></iframe>

WordPress Shortcode

[music_pool_hub tenant_id="YOUR_ID"]