svelte-surefeedback

A lightweight Svelte 5 wrapper component for SureFeedback / ProjectHuddle integration. Handles script loading, token persistence, and error handling out of the box.

Installation

npm install svelte-surefeedback

Basic usage

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

<SureFeedback url="//feedback.example.com/?p=123&ph_apikey=your_api_key" />

---

Fix: SureFeedback not loading when user is logged in

If your app redirects logged-in users to /dashboard, /workspaces, or any page other than /, the SureFeedback component may never mount on the page that received the ?access_token=… URL parameter — so the token is lost before it can be captured.

Solution: call captureToken() in your root +layout.svelte. This runs before any auth redirect and saves the token to localStorage, where the component will find it when it eventually mounts.

<!-- src/routes/+layout.svelte -->
<script>
  import { captureToken } from 'svelte-surefeedback';
  import { onMount } from 'svelte';

  let { children } = $props();

  onMount(() => captureToken());
</script>

{@render children()}

Now when a user opens a link like:

https://yourapp.com/?ph_access_token=e644a…

…the token is captured immediately, regardless of whether they end up on /, /dashboard, or anywhere else.

---

Props

Prop	Type	Default	Description
url	string	required	SureFeedback script URL including p and ph_apikey params
enabled	boolean	true	Mount/unmount the widget
debug	boolean	false	Log debug info to console
timeout	number	10000	Script load timeout in ms
persistToken	boolean	true	Store token in localStorage
tokenKey	string	'ph_access_token'	localStorage key for the token
onError	(error: string) => void	—	Called on validation or load error
onLoaded	() => void	—	Called when script loads successfully

---

Token utilities

import { captureToken, getToken, clearToken } from 'svelte-surefeedback';

// Capture token from URL → localStorage (use in root layout onMount)
captureToken();                     // uses default key 'ph_access_token'
captureToken('my_custom_key');      // custom key

// Read stored token
const token = getToken();

// Remove stored token (e.g. on logout)
clearToken();

---

Full example

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

  function handleError(msg) {
    console.error('SureFeedback error:', msg);
  }
</script>

<SureFeedback
  url="//feedback.urionstudio.com/?p=1234&ph_apikey=aa39e5ae1abc"
  debug={true}
  onError={handleError}
  onLoaded={() => console.log('widget ready')}
/>

---

Requirements

• Svelte 5
• SvelteKit (recommended for captureToken layout pattern)

License

MIT © Giovani Rodriguez