SuperCare Embed SDK

A lightweight, zero-dependency SDK to dynamically embed the SuperCare widget into any web page.

Installation

npm install @careshiphealth/sdk

Usage

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