My Embeddable Widgets

A collection of framework-agnostic web components that can be easily embedded into any web application.

Installation

npm install my-embeddable-widgets

Usage

Vanilla HTML

<script src="node_modules/my-embeddable-widgets/dist/my-widgets.js"></script>
<link rel="stylesheet" href="node_modules/my-embeddable-widgets/dist/my-widgets.css">

<smart-text-processor 
  api-key="your-api-key"
  api-endpoint="https://api.example.com"
  placeholder="Enter text to process..."
  debounce-ms="500">
</smart-text-processor>

React

import 'my-embeddable-widgets/dist/my-widgets.css';

function App() {
  return (
    <smart-text-processor 
      api-key="your-api-key"
      api-endpoint="https://api.example.com"
      placeholder="Enter text to process..."
      debounce-ms="500"
    />
  );
}

Vue

<template>
  <smart-text-processor 
    api-key="your-api-key"
    api-endpoint="https://api.example.com"
    placeholder="Enter text to process..."
    debounce-ms="500"
  />
</template>

<script>
import 'my-embeddable-widgets/dist/my-widgets.css';
</script>

Styling

The components inherit styling from your application using CSS custom properties:

:root {
  --input-bg: #ffffff;
  --input-border: 1px solid #ccc;
  --input-radius: 4px;
  --input-font: system-ui, -apple-system, sans-serif;
  --primary-color: #007bff;
  --error-color: #dc3545;
  --text-color: #333333;
}

Events

The smart-text-processor component emits the following events:

• processing-start: Fired when text processing begins
• text-processed: Fired when processing completes successfully
• processing-error: Fired when an error occurs

Example:

const processor = document.querySelector('smart-text-processor');

processor.addEventListener('text-processed', (event) => {
  console.log('Result:', event.detail.result);
  console.log('Confidence:', event.detail.confidence);
});

API Reference

Attributes

• api-key (required): Your API key for authentication
• api-endpoint (required): The base URL of your API
• placeholder (optional): Input placeholder text
• debounce-ms (optional): Debounce delay in milliseconds (default: 500)

Methods

• setConfig(apiKey: string, endpoint: string): Update API configuration
• processText(text: string): Process text manually

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build