Widget de Feedback

<!-- Priority Hunter Widget -->
<script>
(function(w,d){
  w.PH=w.PH||function(){(w.PH.q=w.PH.q||[]).push(Array.prototype.slice.call(arguments));};
  function load(){var s=d.createElement('script');s.async=true;s.src='https://widget.priorityhunter.com/embed.js';d.head.appendChild(s);}
  d.readyState==='loading'?d.addEventListener('DOMContentLoaded',load):load();
})(window,document);
PH('init', { widgetId: 'YOUR_WIDGET_ID' });
</script>
<!-- End Priority Hunter Widget -->

PH('init', { widgetId: 'YOUR_WIDGET_ID' });
PH('identify', {
  id:    'u_123',
  email: 'jane@acme.com', // optional — omit to avoid storing PII
  name:  'Jane Smith',    // optional
});

// Node.js — generate the token server-side, never in the browser
import jwt from 'jsonwebtoken';

const ssoToken = jwt.sign(
  {
    id:    user.id,
    email: user.email,  // optional — omit to avoid storing PII
    name:  user.name,   // optional — shown on ideas and comments
  },
  process.env.PH_SSO_SECRET,
  { expiresIn: '1h' }
);

// Pass the server-generated token at init time
PH('init', {
  widgetId: 'YOUR_WIDGET_ID',
  ssoToken: '<token-from-your-server>',
});

// Call after your user session is available
PH('identify', {
  id:    currentUser.id,        // your internal user ID (required)
  email: currentUser.email,     // optional — omit to avoid storing PII
  name:  currentUser.name,      // optional — shown on ideas and comments
});

PH('identify', {
  id:    currentUser.id,
  email: currentUser.email, // optional
  name:  currentUser.name,  // optional
}, function() {
  console.log('User identified — widget is ready');
});

// Call when your user logs out
PH('unidentify');

PH('open');                                  // open on the default tab
PH('open', { tab: 'roadmap' });            // open directly on Roadmap
PH('close');                               // close the widget
PH('toggle');                              // toggle open / closed

// Navigate to a specific section
PH('viewSection', 'ideas');
PH('viewSection', 'roadmap');
PH('viewSection', 'announcements');

// Remove the widget from the page entirely
PH('destroy');

// Subscribe
PH('on', 'open',  function() { console.log('opened'); });
PH('on', 'close', function() { console.log('closed'); });
PH('on', 'ready', function() { console.log('widget ready'); });

PH('on', 'badgeCount', function(data) {
  document.getElementById('my-badge').textContent = data.count;
});

// Unsubscribe
function onOpen() { /* ... */ }
PH('on',  'open', onOpen);
PH('off', 'open', onOpen);

// PH.ready is a Promise that resolves once the widget has initialised
PH.ready.then(function() {
  console.log('widget is ready');
  PH('open');
});

// Or with async/await inside an async function
await PH.ready;
PH('viewSection', 'announcements');

// hooks/usePriorityHunter.ts
import { useEffect } from 'react';

declare global {
  interface Window {
    PH?: (cmd: string, payload?: unknown, cb?: () => void) => void;
    PH_q?: unknown[][];
  }
}

export function usePriorityHunter(widgetId: string, user?: {
  id: string; email?: string; name?: string;
}) {
  useEffect(() => {
    if (typeof window === 'undefined') return;
    if (document.getElementById('ph-embed-script')) return;

    // Stub queue
    if (!window.PH) {
      window.PH = function(...args: unknown[]) {
        ((window.PH as any).q = (window.PH as any).q ?? []).push(args);
      };
    }

    window.PH('init', { widgetId });
    if (user) window.PH('identify', user);

    const script = document.createElement('script');
    script.id = 'ph-embed-script';
    script.src = 'https://widget.priorityhunter.com/embed.js';
    script.async = true;
    document.head.appendChild(script);

    return () => {
      window.PH?.('destroy');
    };
  }, []);

  // Re-identify when user changes
  useEffect(() => {
    if (user) window.PH?.('identify', user);
    else       window.PH?.('unidentify');
  }, [user?.id]);
}

// app/layout.tsx  (or any root component)
import { usePriorityHunter } from '@/hooks/usePriorityHunter';

export default function RootLayout() {
  const { user } = useCurrentUser(); // your auth hook

  usePriorityHunter('YOUR_WIDGET_ID', user
    ? { id: user.id, email: user.email, name: user.name }
    : undefined
  );

  return <>{children}</>;
}

// components/WidgetLoader.tsx
'use client';

import { useEffect } from 'react';
import { useSession } from 'next-auth/react';

export function WidgetLoader() {
  const { data: session } = useSession();

  useEffect(() => {
    if (window.self !== window.top) return; // skip inside iframes
    if (document.getElementById('ph-embed-script')) return;

    if (!(window as any).PH) {
      (window as any).PH = function(...args: unknown[]) {
        ((window as any).PH.q = (window as any).PH.q ?? []).push(args);
      };
    }

    (window as any).PH('init', { widgetId: process.env.NEXT_PUBLIC_PH_WIDGET_ID });

    const script = document.createElement('script');
    script.id = 'ph-embed-script';
    script.src = '/embed.js';     // if self-hosting, or the CDN URL
    script.async = true;
    document.head.appendChild(script);
  }, []);

  useEffect(() => {
    const user = session?.user;
    if (user?.email) {
      (window as any).PH?.('identify', {
        id:    user.id ?? user.email,
        email: user.email,
        name:  user.name ?? undefined,
      });
    } else {
      (window as any).PH?.('unidentify');
    }
  }, [session]);

  return null;
}

// app/layout.tsx
import { WidgetLoader } from '@/components/WidgetLoader';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <WidgetLoader />
      </body>
    </html>
  );
}

// composables/usePriorityHunter.ts
import { onMounted, onUnmounted, watch, type Ref } from 'vue';

export function usePriorityHunter(
  widgetId: string,
  user: Ref<{ id: string; email?: string; name?: string } | null>
) {
  onMounted(() => {
    if (document.getElementById('ph-embed-script')) return;

    const w = window as any;
    if (!w.PH) {
      w.PH = function(...args: unknown[]) {
        (w.PH.q = w.PH.q ?? []).push(args);
      };
    }

    w.PH('init', { widgetId });

    const script = document.createElement('script');
    script.id = 'ph-embed-script';
    script.src = 'https://widget.priorityhunter.com/embed.js';
    script.async = true;
    document.head.appendChild(script);
  });

  watch(user, (u) => {
    const w = window as any;
    if (u) w.PH?.('identify', { id: u.id, email: u.email, name: u.name }); // email optional
    else   w.PH?.('unidentify');
  });

  onUnmounted(() => {
    (window as any).PH?.('destroy');
  });
}

<!-- Your own trigger button -->
<button id="feedback-btn" style="position:relative">
  Feedback
  <span id="ph-badge" style="display:none; position:absolute; top:-4px; right:-4px;
    width:16px; height:16px; border-radius:50%; background:#ef4444;
    color:#fff; font-size:10px; line-height:16px; text-align:center;"></span>
</button>

<script>
  PH('on', 'badgeCount', function(data) {
    var badge = document.getElementById('ph-badge');
    if (data.count > 0) {
      badge.textContent = data.count;
      badge.style.display = 'block';
    } else {
      badge.style.display = 'none';
    }
  });

  document.getElementById('feedback-btn').addEventListener('click', function() {
    PH('toggle');
  });
</script>