@careshiphealth/sdk
v2.1.4
Published
A lightweight SDK to dynamically embed the SuperCare widget into any web page
Maintainers
originaltimiReadme
SuperCare Embed SDK
A lightweight, zero-dependency SDK to dynamically embed the SuperCare widget into any web page.
Installation
npm install @careshiphealth/sdkUsage
Method 1: JavaScript/TypeScript Module
import SuperCareEmbed from '@careshiphealth/sdk';
// Embed the widget
await SuperCareEmbed.embed({
orgId: 'your-org-id-here',
apiKey: 'your-api-key-here',
widgetUrl: '/widget/supercare-widget.iife.js', // optional
cssUrl: '/widget/widget.css', // optional
containerId: 'supercare-widget-container' // optional
});
// Check if widget is embedded
if (SuperCareEmbed.isEmbedded()) {
console.log('Widget is embedded');
}
// Remove the widget
SuperCareEmbed.remove();Method 2: Direct Script Tag with Data Attributes
<!DOCTYPE html>
<html>
<head>
<title>Your App</title>
</head>
<body>
<!-- Your content -->
<!-- Load the embed SDK script with data attributes -->
<script
src="path/to/supercare-embed-sdk.js"
data-supercare-org-id="545a71ce-dab2-4ce3-b33b-83326eff6a36"
data-supercare-api-key="9991a016cb88421e8da4048b19f9a576"
data-supercare-widget-url="/widget/supercare-widget.iife.js"
data-supercare-css-url="/widget/widget.css"
data-supercare-container-id="my-widget-container">
</script>
</body>
</html>Method 3: Global Window Object
<script src="path/to/supercare-embed-sdk.js"></script>
<script>
// SDK is available as window.SuperCareEmbed
window.SuperCareEmbed.embed({
orgId: '545a71ce-dab2-4ce3-b33b-83326eff6a36',
apiKey: '9991a016cb88421e8da4048b19f9a576',
}).then(() => {
console.log('Widget embedded successfully');
}).catch((error) => {
console.error('Failed to embed widget:', error);
});
</script>Configuration Options
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| orgId | string | Required | Your organization ID |
| widgetUrl | string | /widget/supercare-widget.iife.js | URL to the widget JavaScript file |
| cssUrl | string | /widget/widget.css | URL to the widget CSS file |
| containerId | string | supercare-09u2ekhbpo-body | ID of the container element for the widget |
| autoInit | boolean | true | Whether to automatically initialize the widget |
API Reference
SuperCareEmbed.embed(config: SuperCareEmbedConfig): Promise<void>
Embeds the SuperCare widget with the provided configuration.
Parameters:
config: Configuration object containing orgId and optional settings
Returns: Promise that resolves when the widget is embedded
Example:
await SuperCareEmbed.embed({
orgId: 'your-org-id',
widgetUrl: 'https://cdn.example.com/widget.js'
});SuperCareEmbed.remove(): void
Removes the widget and cleans up all injected elements.
Example:
SuperCareEmbed.remove();SuperCareEmbed.isEmbedded(): boolean
Returns whether the widget is currently embedded.
Returns: true if embedded, false otherwise
Example:
if (SuperCareEmbed.isEmbedded()) {
console.log('Widget is active');
}What the SDK Does
The embed SDK automatically:
- Injects CSS: Adds the widget stylesheet to the document head
- Creates Container: Adds the required container div to the document body
- Loads Script: Injects the widget JavaScript with the proper org ID parameter
- Handles Cleanup: Provides methods to cleanly remove all injected elements
Generated HTML Structure
When embedded, the SDK creates the following structure:
<head>
<!-- Injected CSS -->
<link rel="stylesheet" href="/widget/widget.css" />
</head>
<body>
<!-- Your existing content -->
<!-- Injected container -->
<div id="supercare-09u2ekhbpo-body"></div>
<!-- Injected script -->
<script
id="supercare-09u2ekhbpo-script"
type="module"
src="/widget/supercare-widget.iife.js?ORG_ID=your-org-id">
</script>
</body>Error Handling
The embed SDK includes comprehensive error handling:
try {
await SuperCareEmbed.embed({
orgId: 'invalid-org-id',
widgetUrl: 'https://nonexistent.com/widget.js'
});
} catch (error) {
console.error('Widget embedding failed:', error.message);
// Handle the error appropriately
}TypeScript Support
The package includes full TypeScript definitions:
import SuperCareEmbed, { SuperCareEmbedConfig } from '@careshiphealth/sdk';
const config: SuperCareEmbedConfig = {
orgId: 'your-org-id',
widgetUrl: '/custom/path/widget.js'
};
await SuperCareEmbed.embed(config);Browser Compatibility
- Modern browsers with ES2015+ support
- Internet Explorer 11+ (with polyfills)
- All major mobile browsers
License
MIT