Quick Reference Guide

<script type="module">
  import { createProduck } from 'https://cdn.jsdelivr.net/npm/@prodact.ai/sdk@latest/+esm';
</script>

import { ProduckProvider, ProduckChat } from '@prodact.ai/sdk/react';
 
export default function RootLayout({ children }) {
  return (
    <ProduckProvider config={{ sdkKey: process.env.NEXT_PUBLIC_SDK_KEY }}>
      {children}
      <ProduckChat position="bottom-right" />
    </ProduckProvider>
  );
}

import { ProduckProvider, ProduckChat } from '@prodact.ai/sdk/react';
 
export default function App({ Component, pageProps }) {
  return (
    <ProduckProvider config={{ sdkKey: process.env.NEXT_PUBLIC_SDK_KEY }}>
      <Component {...pageProps} />
      <ProduckChat position="bottom-right" />
    </ProduckProvider>
  );
}

import { createProduck } from '@prodact.ai/sdk';
 
const produck = createProduck({ sdkKey: 'your-key' });
await produck.init();

import { ProduckChat } from '@prodact.ai/sdk/react';
 
<ProduckChat position="bottom-right" />

<ProduckChat
  position="bottom-right"  // or "bottom-left", "inline"
  theme="dark"             // or "light"
  primaryColor="#8b5cf6"
  title="Ask me anything!"
  placeholder="Type your message..."
/>

import { useProduckAction } from '@prodact.ai/sdk/react';
 
function MyComponent() {
  useProduckAction('my-action', () => {
    // Your code runs here when triggered
    console.log('Action triggered!');
  });
}

produck.register('my-action', () => {
  console.log('Action triggered!');
});

import { ProduckTarget } from '@prodact.ai/sdk/react';
 
<ProduckTarget
  targetId="pricing"         // Unique ID for this section
  highlightColor="#3b82f6"   // Optional: custom highlight color
  duration={2000}            // Optional: highlight duration (ms)
>
  <section id="pricing">
    <h2>Pricing</h2>
    {/* Your content */}
  </section>
</ProduckTarget>

import { useProduck } from '@prodact.ai/sdk/react';
 
function HelpButton() {
  const { sendMessage } = useProduck();
  
  return (
    <button onClick={() => sendMessage('How do I get started?')}>
      Quick Help
    </button>
  );
}

await produck.sendMessage('Hello!');

import { useProduckMessages } from '@prodact.ai/sdk/react';
 
function MessageHistory() {
  const messages = useProduckMessages();
  
  return (
    <div>
      <h3>Last {messages.length} messages:</h3>
      {messages.map(msg => (
        <div key={msg.id}>{msg.content}</div>
      ))}
    </div>
  );
}

import { useProduckReady } from '@prodact.ai/sdk/react';
 
function StatusIndicator() {
  const isReady = useProduckReady();
  
  return (
    <div>
      Status: {isReady ? '✅ Ready' : '⏳ Loading...'}
    </div>
  );
}

<ProduckProvider
  config={{ sdkKey }}
  onAction={(actionKey, payload) => {
    // Track every action that fires
    analytics.track('Produck Action', {
      action: actionKey,
      timestamp: new Date(),
    });
  }}
>

<ProduckProvider
  config={{ sdkKey }}
  onError={(error) => {
    // Send to error tracking service
    Sentry.captureException(error);
    console.error('Produck Error:', error);
  }}
>

<ProduckChat position="bottom-right" />  // Bottom right (default)
<ProduckChat position="bottom-left" />   // Bottom left
<ProduckChat position="inline" />        // Embedded in page

<ProduckChat
  theme="light"              // or "dark"
  primaryColor="#8b5cf6"     // Accent color
  title="Support Chat"       // Header title
  placeholder="Ask..."       // Input placeholder
/>

function App() {
  const [showChat, setShowChat] = useState(false);
  
  return (
    <>
      <button onClick={() => setShowChat(true)}>Open Chat</button>
      {showChat && <ProduckChat position="bottom-right" />}
    </>
  );
}

NEXT_PUBLIC_SDK_KEY=your_sdk_key_here
NEXT_PUBLIC_API_URL=https://api.produck.io/api/v1

REACT_APP_SDK_KEY=your_sdk_key_here

VITE_SDK_KEY=your_sdk_key_here

useProduckAction('go-to-settings', () => {
  router.push('/settings');
});

const [isOpen, setIsOpen] = useState(false);
 
useProduckAction('open-modal', () => {
  setIsOpen(true);
});

const [formData, setFormData] = useState({});
 
useProduckAction('prefill-contact', (payload) => {
  setFormData({
    subject: 'Support Request',
    category: payload.actionConfig?.category,
  });
});

useProduckAction('show-pricing', () => {
  document.getElementById('pricing')?.scrollIntoView({
    behavior: 'smooth',
    block: 'center',
  });
});

import { useState } from 'react';
import { ProduckProvider, ProduckChat, useProduckAction } from '@prodact.ai/sdk/react';
 
function App() {
  return (
    <ProduckProvider config={{ sdkKey: process.env.NEXT_PUBLIC_SDK_KEY }}>
      <ContactSection />
      <ProduckChat position="bottom-right" />
    </ProduckProvider>
  );
}
 
function ContactSection() {
  const [isOpen, setIsOpen] = useState(false);
  
  useProduckAction('open-contact', () => {
    setIsOpen(true);
  });
  
  return (
    <section>
      <button onClick={() => setIsOpen(true)}>Contact Us</button>
      {isOpen && <ContactModal onClose={() => setIsOpen(false)} />}
    </section>
  );
}

import { useRouter } from 'next/navigation';
import { useProduckAction } from '@prodact.ai/sdk/react';
 
function Navigation() {
  const router = useRouter();
  
  useProduckAction('go-to-pricing', () => router.push('/pricing'));
  useProduckAction('go-to-about', () => router.push('/about'));
  useProduckAction('go-to-docs', () => router.push('/docs'));
  
  return <nav>{/* Your nav items */}</nav>;
}