npm install @oppla-ai/feedback
# or
yarn add @oppla-ai/feedback

"use client";

import { useEffect } from "react";
import { init } from "@oppla-ai/feedback"

interface FeedbackProps {
  name?: string;
  email?: string;
  id?: string;
  phone_number?: string;
  job_title?: string;
}

export const Feedback = ({ 
  name,
  email,
  id,
  phone_number,
  job_title
}: FeedbackProps) => {
  useEffect(() => {
    const properties = {
      name: name || "",
      email: email || "",
      id: id || "",
      phone_number: phone_number || "",
      job_title: job_title || ""
    };
    
    try {
      init({
        organizationId: "YOUR_ORGANIZATION_ID",
        websiteId: "YOUR_WEBSITE_ID",
        properties
      });
    } catch (error) {
      console.error('Error initializing feedback:', error);
    }
  }, [name, email, id, phone_number, job_title])
  
  return null;
};

import { publicFeedback } from "@oppla-ai/feedback"

// In your component:
<div 
  onClick={(e) => {
    e.preventDefault();
    publicFeedback({
      form: {
        title: "Your Feedback",
        description: "We would love to hear from you"
      },
      config: {
        primaryColor: "#6366f1",
        heading: {
          ideas: "💡 Ideas",
          announcement: "🔥 Recent Updates",
          roadMap: "🛣️ Roadmap"
        }
      }
    });
  }}
  className="flex items-center gap-2 text-sm text-muted hover:underline cursor-pointer"
>
  <IconBox Icon={MessagesSquare}/> Feedback
</div>

publicFeedback({
  form: {
    title: "Your Feedback", // Custom title
    description: "We would love to hear from you", // Custom description
    // Add more form customization options
  }
});

publicFeedback({
  config: {
    primaryColor: "#6366f1", // Custom primary color
    heading: {
      ideas: "💡 Ideas",
      announcement: "🔥 Recent Updates",
      roadMap: "🛣️ Roadmap"
    }
    // Add more visual customization options
  }
});