MCP Soup

Overview

MCPlog provides two embeddable widgets that can be integrated into your website using iframes:

Client Widget - Customer-facing chat interface for logistics inquiries
Company Admin Panel - Administrative interface for managing widget settings

Widget URLs

Client Widget (Customer Chat)

https://mcplog-client-widget.web.app/

Company Admin Panel

https://mcplog-company-admin.web.app/

Client Widget Integration

Add this iframe code to your website where you want the customer chat widget to appear:

<iframe
  src="https://mcplog-client-widget.web.app/"
  width="400"
  height="600"
  frameborder="0"
  style="border: none; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);"
  title="MCPlog Customer Chat Widget"
  allow="clipboard-write; web-share"
  sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-modals">
</iframe>

Company Admin Panel Integration

Add this iframe code to your admin dashboard or internal tools:

<iframe
  src="https://mcplog-company-admin.web.app/"
  width="100%"
  height="800"
  frameborder="0"
  style="border: none; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);"
  title="MCPlog Company Admin Panel"
  allow="clipboard-write; web-share"
  sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-modals">
</iframe>

Advanced Integration Options

Responsive Client Widget

For mobile-friendly integration:

<div style="width: 100%; max-width: 400px; margin: 0 auto;">
  <iframe
    src="https://mcplog-client-widget.web.app/"
    width="100%"
    height="600"
    frameborder="0"
    style="border: none; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); min-height: 500px;"
    title="MCPlog Customer Chat Widget"
    allow="clipboard-write; web-share"
    sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-modals">
  </iframe>
</div>

Floating Widget Button

For a floating chat button that expands to show the widget:

<div id="mcplog-widget-container" style="position: fixed; bottom: 20px; right: 20px; z-index: 1000;">
  <button id="mcplog-toggle" onclick="toggleWidget()" 
          style="background: #3B82F6; color: white; border: none; border-radius: 50%; width: 60px; height: 60px; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.2);">
    💬
  </button>
  <div id="mcplog-widget" style="display: none; position: absolute; bottom: 70px; right: 0; width: 400px; height: 600px;">
    <iframe
      src="https://mcplog-client-widget.web.app/"
      width="100%"
      height="100%"
      frameborder="0"
      style="border: none; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);"
      title="MCPlog Customer Chat Widget"
      allow="clipboard-write; web-share"
      sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-modals">
    </iframe>
  </div>
</div>

<script>
function toggleWidget() {
  const widget = document.getElementById('mcplog-widget');
  const button = document.getElementById('mcplog-toggle');
  
  if (widget.style.display === 'none') {
    widget.style.display = 'block';
    button.innerHTML = '✕';
  } else {
    widget.style.display = 'none';
    button.innerHTML = '💬';
  }
}
</script>

Widget Communication (Advanced)

The widgets support postMessage communication for advanced integrations:

Listening to Widget Events

window.addEventListener('message', function(event) {
  // Security check - adjust origin as needed
  if (event.origin !== 'https://mcplog-client-widget.web.app') return;
  
  if (event.data.source === 'mcplog-client-widget') {
    switch (event.data.type) {
      case 'widget-ready':
        console.log('Client widget is ready');
        break;
      case 'widget-resize':
        // Adjust iframe height if needed
        const iframe = document.querySelector('iframe[src*="mcplog-client-widget"]');
        if (iframe) {
          iframe.style.height = event.data.payload.height + 'px';
        }
        break;
      case 'route-change':
        console.log('Widget navigated to:', event.data.payload.route);
        break;
    }
  }
  
  if (event.data.source === 'mcplog-admin-panel') {
    switch (event.data.type) {
      case 'admin-ready':
        console.log('Admin panel is ready');
        break;
      case 'auth-status':
        console.log('Admin auth status:', event.data.payload.isAuthenticated);
        break;
    }
  }
});

Customization

Widget Styling

The client widget appearance can be customized through the Company Admin Panel:

Colors (primary, secondary, background, text)
Fonts (heading and body font families)
Border radius and button styles
Input placeholder colors

Company-Specific Configuration

Each widget is configured for your specific company through:

Agent rules and behavior
Customer email whitelists
Domain-specific rules
Order management settings

Security Considerations

Content Security Policy

Add these directives to your CSP if needed:

frame-src https://mcplog-client-widget.web.app https://mcplog-company-admin.web.app;

Sandbox Attributes

The recommended sandbox attributes are:

allow-scripts - Required for widget functionality
allow-same-origin - Required for API calls
allow-forms - Required for email capture and chat
allow-popups - Required for authentication flows
allow-modals - Required for order confirmations

MCPlog Widget Integration Documentation