React

Initialize in authenticated components only

Do not initialize the widget in your root App component or public-facing pages. Place it in a component that only renders for logged-in users (e.g., a dashboard layout or member area).

import { useEffect, useCallback } from 'react';

export default function Dashboard() {
  useEffect(() => {
    if (typeof window !== 'undefined' && window.TheWebRatings) {
      window.TheWebRatings.init({ apiKey: 'your-api-key' });
    }

    const handleSuccess = (e: { ratingId: string; rating: number }) => console.log('Rating:', e.rating);
    window.TheWebRatings?.on('rating:submitted', handleSuccess);

    return () => {
      window.TheWebRatings?.off('rating:submitted', handleSuccess);
    };
  }, []);

  const open = useCallback(() => {
    // Replace with your logged-in user (e.g. from auth context)
    window.TheWebRatings?.open('[email protected]', 'User Name');
  }, []);

  return <button onClick={open}>Leave a Review</button>;
}

Pass the logged-in user's email and name so the widget can enforce one review per user and handle OTP. Ensure the widget script is loaded before this component runs (e.g. via <script src=".../twr.min.js"> in your authenticated layout).