Xempla Embedded Widget

A powerful embedded widget for Xempla AI integration, designed to be easily dropped into any web application.

Installation

NPM

npm install xempla-embedded

CDN

You can use the widget directly via CDN (unpkg, jsdelivr, etc.):

<script src="https://unpkg.com/xempla-embedded/dist/xempla-embedded.umd.js"></script>

Usage

1. via CDN (Script Tag) - Recommended for non-React apps

The easiest way is to include the script and use data- attributes for configuration (Auto-Initialization).

<!-- Include the widget script from CDN -->
<script 
  src="https://unpkg.com/xempla-embedded/dist/xempla-embedded.umd.js"
  defer
  data-auto-init="true"
  data-client-key="YOUR_CLIENT_KEY"
  data-api-endpoint="https://api.your-domain.com"
  data-position="bottom-right"
  data-primary-color="#4a86e8"
  data-header-text="Support Assistant"
></script>

Programmatic Initialization

Alternatively, you can initialize it manually:

<script src="https://unpkg.com/xempla-embedded/dist/xempla-embedded.umd.js"></script>
<script>
  window.addEventListener('DOMContentLoaded', function () {
    if (window.xemplaWidgetInit) {
      window.xemplaWidgetInit({
        clientKey: 'YOUR_CLIENT_KEY',
        apiEndpoint: 'https://api.your-domain.com',
        position: 'bottom-left',
        primaryColor: '#ff5722'
      });
    }
  });
</script>

2. via NPM (React / ESM)

If you are building a modern web app (React, Vue, etc.), you can import the loader directly.

import { XemplaWidgetLoader } from 'xempla-embedded';

// Initialize the widget
const widget = new XemplaWidgetLoader({
  clientKey: 'YOUR_CLIENT_KEY',
  apiEndpoint: 'https://api.your-domain.com',
  position: 'bottom-right'
});

widget.init();

// To destroy/cleanup
// widget.destroy();

Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | clientKey | string | - | Your Xempla client key | | apiEndpoint | string | - | The API endpoint URL | | containerId | string | xempla-embedded-container | DOM ID for the widget container | | position | string | bottom-right | bottom-right, bottom-left, top-right, top-left | | primaryColor | string | #4a86e8 | Primary theme color | | headerText | string | Xempla Widget | Text displayed in the header | | buttonText | string | 💬 | Text/Icon for the launcher button |

Publishing

To publish a new version:

1. Update version in package.json
2. Run npm run build
3. Run npm publish