@microfeedback/embed-core

Core JavaScript library for embedding MicroFeedback widgets in any web application.

Installation

npm install microfeedback-embed-core

Quick Start

import { MicroFeedbackEmbed } from 'microfeedback-embed-core';

// Initialize widget
const widget = new MicroFeedbackEmbed({
  apiKey: 'mk_your_api_key',
  widgetId: 'widget_your_widget_id',
  theme: 'auto',
  position: 'bottom-right'
});

// Listen to events
widget.on('load', () => {
  console.log('Widget loaded!');
});

widget.on('submit', (data) => {
  console.log('Feedback submitted:', data);
});

HTML Data Attributes (Auto-initialization)

You can also initialize widgets using HTML data attributes:

<!-- Widget will auto-initialize when the script loads -->
<div 
  data-microfeedback-api-key="mk_your_api_key"
  data-microfeedback-widget-id="widget_your_widget_id"
  data-microfeedback-theme="auto"
  data-microfeedback-position="bottom-right"
></div>

<script src="path/to/microfeedback-embed.js"></script>

API Reference

Constructor Options

interface EmbedConfig {
  apiKey: string;                    // Your API key
  widgetId: string;                  // Widget identifier
  container?: string | HTMLElement;  // Container element
  theme?: 'light' | 'dark' | 'auto'; // Widget theme
  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
  baseUrl?: string;                  // Custom API base URL
  responsive?: ResponsiveConfig;     // Responsive behavior
}

Methods

• show() - Show the widget
• hide() - Hide the widget
• destroy() - Destroy the widget and clean up
• on(event, handler) - Add event listener
• off(event, handler?) - Remove event listener

Properties

• isLoaded - Whether the widget is loaded
• isVisible - Whether the widget is visible

Events

• load - Widget has loaded successfully
• error - An error occurred
• submit - Feedback was submitted
• show - Widget was shown
• hide - Widget was hidden

Auto-initialization Functions

import { 
  initializeFromDataAttributes,
  autoInit,
  enableDynamicInitialization 
} from 'microfeedback-embed-core';

// Initialize all widgets with data attributes
initializeFromDataAttributes();

// Auto-initialize when DOM is ready
autoInit();

// Watch for dynamically added elements
const cleanup = enableDynamicInitialization();
// Call cleanup() when no longer needed

TypeScript Support

This package includes full TypeScript definitions for the best development experience.

License

MIT