MPS Chatbot Widget

A standalone chatbot widget that third-party websites can embed via a single <script> tag.

Features

• Self-contained React application bundled into a single JS file
• Easy integration with any website
• Floating button mode (default) or embedded mode
• Customizable theming
• Style isolation (won't conflict with host site CSS)
• Native mobile support via WebView

Tech Stack

• React 19 with TypeScript
• Vite (library mode build)
• Emotion (CSS-in-JS for style isolation)
• lucide-react (icons)

Compatibility

Via CDN/Script Tag (Any Project)

When using the UMD bundle via <script> tag, the widget bundles its own React and renders in an isolated container. Your project's React version doesn't matter — this works with any framework (or no framework at all), including:

• Vanilla JavaScript/HTML
• jQuery
• Angular, Vue, Svelte
• Older React versions (14, 15, 16, etc.)

Via npm Import (React 18+ Required)

When importing as an ES module in a React project:

import '@mypatientspace/chatbot-widget';

You need React 18 or higher. The widget uses modern React features (hooks, Context API) that aren't available in older versions.

| Integration Method | React Version Required | |--------------------|------------------------| | CDN / Script tag | Any (bundles own React) | | npm import | React 18+ |

Installation

Via CDN (Recommended)

unpkg:

<script src="https://unpkg.com/@mypatientspace/chatbot-widget@latest/dist/mypatientspace-widget.umd.js"></script>

jsDelivr:

<script src="https://cdn.jsdelivr.net/npm/@mypatientspace/chatbot-widget@latest/dist/mypatientspace-widget.umd.js"></script>

Via npm

npm install @mypatientspace/chatbot-widget

Development

# Install dependencies
yarn install

# Start dev server
yarn dev

# Build for production
yarn build

# Preview production build
yarn preview

Web Integration

Minimal Setup (uses all defaults)

<script src="https://unpkg.com/@mypatientspace/chatbot-widget@latest/dist/mypatientspace-widget.umd.js"></script>
<script>
  ChatbotWidget.init({
    apiEndpoint: 'https://your-api.com/chat'
  });
</script>

Full Customization

<script src="https://unpkg.com/@mypatientspace/chatbot-widget@latest/dist/mypatientspace-widget.umd.js"></script>
<script>
  ChatbotWidget.init({
    apiEndpoint: 'https://your-api.com/chat',
    apiKey: 'your-api-key',
    headerTitle: 'Health Support',
    greeting: 'Hi! How can I help?',
    brandingText: 'Powered by MyCompany',
    brandingLogo: '/logo.png',
    fabIcon: '/avatar.png',
    placeholder: 'Ask me anything...',
    position: 'bottom-left',
    quickActions: [
      { id: '1', label: 'Help', icon: 'info', message: 'I need help' }
    ],
    theme: {
      colors: { primary: '#ff6600' }
    }
  });
</script>

Via npm import

import '@mypatientspace/chatbot-widget';

ChatbotWidget.init({
  apiEndpoint: 'https://your-api.com/chat'
});

API Methods

ChatbotWidget.open();    // Open chat window
ChatbotWidget.close();   // Close chat window
ChatbotWidget.toggle();  // Toggle open/close
ChatbotWidget.destroy(); // Remove widget completely

Embedded Mode

By default, the widget displays as a floating button that opens a popup. You can also embed the chat directly inside any container on your page.

Using containerSelector

Embed the chat inside an existing element:

<div id="my-chat" style="width: 400px; height: 600px;"></div>

<script src="https://unpkg.com/@mypatientspace/chatbot-widget@latest/dist/mypatientspace-widget.umd.js"></script>
<script>
  ChatbotWidget.init({
    apiEndpoint: 'https://your-api.com/chat',
    containerSelector: '#my-chat'
  });
</script>

Using embedMode

Enable embedded styling without a specific container:

<script>
  ChatbotWidget.init({
    apiEndpoint: 'https://your-api.com/chat',
    embedMode: true
  });
</script>

Comparison

| Feature | containerSelector | embedMode: true | |---------|---------------------|-------------------| | Container | Your element | Auto-created | | Sizing | Your CSS controls it | 100% of parent | | FAB button | Hidden | Hidden | | Chat visibility | Always open | Always open | | On destroy | Container preserved | Container removed |

Mobile Integration

Android (Kotlin)

class ChatActivity : AppCompatActivity() {
    private lateinit var webView: WebView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        webView = WebView(this).apply {
            settings.javaScriptEnabled = true
            settings.domStorageEnabled = true
            loadDataWithBaseURL(
                "https://your-domain.com",
                """
                <!DOCTYPE html>
                <html>
                <head>
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                </head>
                <body style="margin:0;padding:0;">
                    <script src="https://unpkg.com/@mypatientspace/chatbot-widget@latest/dist/mypatientspace-widget.umd.js"></script>
                    <script>
                        ChatbotWidget.init({
                            apiEndpoint: 'https://your-api.com/chat'
                        });
                        ChatbotWidget.open();
                    </script>
                </body>
                </html>
                """.trimIndent(),
                "text/html", "UTF-8", null
            )
        }
        setContentView(webView)
    }
}

iOS (Swift)

import UIKit
import WebKit

class ChatViewController: UIViewController {
    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let config = WKWebViewConfiguration()
        config.preferences.javaScriptEnabled = true

        webView = WKWebView(frame: view.bounds, configuration: config)
        webView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        view.addSubview(webView)

        let html = """
        <!DOCTYPE html>
        <html>
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
            <style>body { margin: 0; padding: 0; }</style>
        </head>
        <body>
            <script src="https://unpkg.com/@mypatientspace/chatbot-widget@latest/dist/mypatientspace-widget.umd.js"></script>
            <script>
                ChatbotWidget.init({
                    apiEndpoint: 'https://your-api.com/chat'
                });
                ChatbotWidget.open();
            </script>
        </body>
        </html>
        """

        webView.loadHTMLString(html, baseURL: URL(string: "https://your-domain.com"))
    }
}

React Native

import { WebView } from 'react-native-webview';

const ChatScreen = () => {
  const html = `
    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body style="margin:0;padding:0;">
        <script src="https://unpkg.com/@mypatientspace/chatbot-widget@latest/dist/mypatientspace-widget.umd.js"></script>
        <script>
            ChatbotWidget.init({
                apiEndpoint: 'https://your-api.com/chat'
            });
            ChatbotWidget.open();
        </script>
    </body>
    </html>
  `;

  return (
    <WebView
      source={{ html }}
      javaScriptEnabled={true}
      domStorageEnabled={true}
    />
  );
};

Default Configuration

When no value is provided, these defaults are used:

| Option | Default Value | |--------|---------------| | headerTitle | "AI Doctor" | | greeting | "Hello! Welcome to our healthcare support. How can I assist you today?" | | placeholder | "Type a message..." | | brandingText | "Developed by myPatientSpace" | | brandingLogo | https://web.mypatientspace.com/img/logo-symbol.png | | fabIcon | https://web.mypatientspace.com/img/logo-symbol.png | | position | "bottom-right" | | containerSelector | undefined (floating mode) | | embedMode | false (auto-enabled when containerSelector is set) | | quickActions | Book Appointment, Hours, Contact, Location |

License

MIT