JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 18
  • Score
    100M100P100Q55564F
  • License MIT

A lightweight SDK to dynamically embed the SuperCare widget into any web page

Package Exports

    Readme

    SuperCare Embed SDK

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

    Installation

    npm install @supercare/embed-sdk

    Usage

    Method 1: JavaScript/TypeScript Module

    import SuperCareEmbed from '@supercare/embed-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:

    1. Injects CSS: Adds the widget stylesheet to the document head
    2. Creates Container: Adds the required container div to the document body
    3. Loads Script: Injects the widget JavaScript with the proper org ID parameter
    4. 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 '@supercare/embed-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