Svelte Surefeedback

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.