A Svelte wrapper component for SureFeedback (ProjectHuddle) that provides seamless integration with your Svelte applications.

Installation

npm install svelte-surefeedback

Features

🚀 Easy integration with Svelte applications
🔒 Type-safe with full TypeScript support
🎯 Automatic script loading and cleanup
🔄 Token persistence management
🐛 Debug mode for troubleshooting
⏱️ Configurable timeout handling
🎭 Event callbacks for load and error states

Usage

Basic usage:

<script>
  import { SureFeedback } from 'svelte-surefeedback';
</script>

<SureFeedback 
  url="//feedback.mindhyv.com/?p=YOUR_PROJECT_ID&ph_apikey=YOUR_API_KEY" 
/>

Advanced usage with all options:

<script>
  import { SureFeedback } from 'svelte-surefeedback';

  function handleError(error) {
    console.error('SureFeedback error:', error);
  }

  function handleLoaded() {
    console.log('SureFeedback loaded successfully');
  }
</script>

<SureFeedback 
  url="//feedback.mindhyv.com/?p=YOUR_PROJECT_ID&ph_apikey=YOUR_API_KEY"
  enabled={true}
  debug={true}
  timeout={15000}
  persistToken={true}
  tokenKey="ph_access_token"
  onError={handleError}
  onLoaded={handleLoaded}
/>

Configuration Options

Option	Type	Default	Description
`url`	`string`	Required	The SureFeedback URL with your project ID and API key
`enabled`	`boolean`	`true`	Enable/disable the feedback widget
`debug`	`boolean`	`false`	Enable debug mode for detailed logging
`timeout`	`number`	`10000`	Script loading timeout in milliseconds
`persistToken`	`boolean`	`true`	Whether to persist the access token in localStorage
`tokenKey`	`string`	`'ph_access_token'`	Custom key for storing the token
`onError`	`(error: string) => void`	`undefined`	Callback function for error handling
`onLoaded`	`() => void`	`undefined`	Callback function when script loads successfully

Error Handling

The component includes built-in error handling for:

Invalid URLs
Missing required parameters
Script loading failures
Timeout issues
LocalStorage access problems

Errors are displayed in a clear message and can be caught using the onError callback.

Debug Mode

When debug mode is enabled, the component will log detailed information about:

Script loading process
Token management
Error states
Cleanup operations

Enable debug mode during development:

<SureFeedback 
  url="your-url"
  debug={true}
/>

TypeScript Support

The package includes full TypeScript definitions. You can import types:

import type { SureFeedbackProps } from 'svelte-surefeedback';

Requirements

Svelte 5.x
SureFeedback/ProjectHuddle account and API credentials

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Svelte SureFeedback