@eka-care/medassist-widget-embed
v0.0.3
Published
Embeddable MedAssist widget loader built with Web Components.
Readme
@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:
npm install @eka-care/medassist-widget-embedTo load directly from a CDN, point the script tag to the published package (replace the version with the one you intend to use):
<script
src="https://cdn.jsdelivr.net/npm/@eka-care/[email protected]/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:
<!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
<eka-medassist-widget
agent-id="your-agent-id-here"
icon-url="https://example.com/custom-icon.svg"></eka-medassist-widget>How It Works
- Initial Load: The loader script (
index.js) registers the custom element<eka-medassist-widget> - Button Display: The custom element renders a floating button in the bottom-right corner
- 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
- 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 pageCustomization
Custom Icon
You can customize the widget button icon by setting the icon-url attribute:
<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:
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
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
<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
<!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
- Check that the
agent-idattribute is set correctly - Verify that
index.jsis loading (check Network tab in DevTools) - Check browser console for errors
- Ensure the widget assets (
medassist-widget.jsandmedassist-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