# @eka-care/medassist-widget-embed

A lightweight, embeddable widget loader for MedAssist that uses Web Components for easy integration into any website. This package provides

## Overview

The widget-embed package provides:

- **Custom Web Component**: `<eka-medassist-widget>` for easy embedding
- **Lazy Loading**: Widget assets are loaded only when the user clicks the button
- **Framework Agnostic**: Works with any website, no React or build step required
- **Isolated Styling**: Shadow DOM prevents style conflicts with host websites
- **Simple Integration**: Just add a script tag and custom element

## Installation

Install from npm to self-host the assets or reference the package from a CDN such as jsDelivr or UNPKG:

```bash
npm install @eka-care/medassist-widget-embed
```

To load directly from a CDN, point the script tag to the published package (replace the version with the one you intend to use):

```html
<script
  src="https://cdn.jsdelivr.net/npm/@eka-care/medassist-widget-embed@0.0.1/index.js"
  async></script>
```

The script automatically looks for the accompanying `src/medassist-widget.*` files, so host those assets alongside `index.js`.

## Usage

Add the widget to any HTML page:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <h1>Welcome to my site!</h1>

    <!-- Add the widget custom element -->
    <eka-medassist-widget agent-id="your-agent-id-here"></eka-medassist-widget>

    <!-- Load the widget loader script -->
    <script src="https://your-cdn.com/widget-embed/index.js" async></script>
  </body>
</html>
```

That's it! The widget will appear as a floating button in the bottom-right corner.

## Configuration

### Required Attributes

- `agent-id` (required): Your MedAssist agent identifier

### Optional Attributes

- `icon-url`: Custom icon URL for the widget button (default: `./assets/bot-icon.svg`)

### Example with Custom Icon

```html
<eka-medassist-widget
  agent-id="your-agent-id-here"
  icon-url="https://example.com/custom-icon.svg"></eka-medassist-widget>
```

## How It Works

1. **Initial Load**: The loader script (`index.js`) registers the custom element `<eka-medassist-widget>`
2. **Button Display**: The custom element renders a floating button in the bottom-right corner
3. **Lazy Loading**: When the user clicks the button:
   - The widget CSS is fetched and injected into the shadow DOM
   - The widget JavaScript bundle is loaded
   - The widget is rendered inside the shadow DOM
4. **Isolation**: All widget code runs in a Shadow DOM, preventing style and script conflicts

## File Structure

```
widget-embed/
├── index.js              # Web component loader and custom element definition
├── src/                  # Generated widget assets (from widget package build)
│   ├── medassist-widget.js
│   └── medassist-widget.css
├── assets/
│   └── bot-icon.svg      # Default widget button icon
└── test.html             # Example integration page
```

## Customization

### Custom Icon

You can customize the widget button icon by setting the `icon-url` attribute:

```html
<eka-medassist-widget
  agent-id="your-agent-id"
  icon-url="/path/to/your-icon.svg"></eka-medassist-widget>
```

### Dynamic Attribute Updates

You can update widget attributes programmatically:

```javascript
const widget = document.querySelector("eka-medassist-widget");
widget.setAttribute("icon-url", "https://example.com/new-icon.svg");
```

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

Requires support for:

- Custom Elements (Web Components)
- Shadow DOM
- ES6+ JavaScript

## Development

Use any static server or bundler workflow you prefer for local verification. The widget emits helpful console logs (asset loading status, errors) that you can inspect in the browser DevTools.

## Integration Examples

### React

```jsx
import { useEffect } from "react";

function App() {
  useEffect(() => {
    // Load the widget script
    const script = document.createElement("script");
    script.src = "https://your-cdn.com/widget-embed/index.js";
    script.async = true;
    document.body.appendChild(script);

    return () => {
      // Cleanup if needed
    };
  }, []);

  return (
    <div>
      <h1>My React App</h1>
      <eka-medassist-widget agent-id="your-agent-id" />
    </div>
  );
}
```

### Vue

```vue
<template>
  <div>
    <h1>My Vue App</h1>
    <eka-medassist-widget :agent-id="agentId" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      agentId: "your-agent-id",
    };
  },
  mounted() {
    const script = document.createElement("script");
    script.src = "https://your-cdn.com/widget-embed/index.js";
    script.async = true;
    document.body.appendChild(script);
  },
};
</script>
```

### Vanilla JavaScript

```html
<!DOCTYPE html>
<html>
  <head>
    <title>My Site</title>
  </head>
  <body>
    <eka-medassist-widget agent-id="your-agent-id"></eka-medassist-widget>

    <script>
      // Load widget script
      (function () {
        const script = document.createElement("script");
        script.src = "https://your-cdn.com/widget-embed/index.js";
        script.async = true;
        document.body.appendChild(script);
      })();
    </script>
  </body>
</html>
```

## Troubleshooting

### Widget Not Appearing

1. Check that the `agent-id` attribute is set correctly
2. Verify that `index.js` is loading (check Network tab in DevTools)
3. Check browser console for errors
4. Ensure the widget assets (`medassist-widget.js` and `medassist-widget.css`) are accessible

### Styling Conflicts

The widget uses Shadow DOM to isolate styles, but if you encounter issues:

- Check that the widget is rendering inside the shadow DOM
- Verify that host website styles aren't affecting the shadow root

## License

MIT
