JSPM – @mypatientspace/chatbot-widget@1.0.20

Package Exports

@mypatientspace/chatbot-widget
@mypatientspace/chatbot-widget/dist/mypatientspace-widget.es.js
@mypatientspace/chatbot-widget/dist/mypatientspace-widget.umd.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@mypatientspace/chatbot-widget) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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
Customizable theming
Style isolation (won't conflict with host site CSS)
Native mobile support via WebView

Tech Stack

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

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

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"
`quickActions`	Book Appointment, Hours, Contact, Location

License

MIT

@mypatientspace/chatbot-widget