Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.tryproduck.com/llms.txt

Use this file to discover all available pages before exploring further.

The widget is one hosted script. Drop it into your app and it loads, renders the duck button, and handles the rest — nothing to bundle, install from npm, or add to a build step.

​
Add the script tag

Paste this before the closing </body> tag, on every page where you want feedback (most teams add it everywhere): 
<script src="https://tryproduck.com/sdk/v1.js" data-project="pk_live_YOUR_KEY" defer></script>
The widget initializes itself as soon as it loads — no startup call needed.
AttributeRequiredDescription
srcyesThe hosted widget: https://tryproduck.com/sdk/v1.js. Load it from this URL so you always get updates.
data-projectyesYour project’s API key from the dashboard. Starts with pk_live_.
deferrecommendedLoads the widget without blocking your page render.

​
Framework snippets

Use the Script component in your root layout so the widget loads on every route:
app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://tryproduck.com/sdk/v1.js"
          data-project="pk_live_YOUR_KEY"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

​
Opening the widget

Once the script is on the page, your users get two ways in:
  • The duck button — floating in the bottom-right corner.
  • Keyboard shortcut — ⌘ + Shift + Z (Mac) or Ctrl + Shift + Z (Windows/Linux).
Want to open it from your own button instead? See the JavaScript API.
The widget renders inside an isolated shadow root, so its styles never leak into your app and your CSS never touches the widget. No class-name collisions to worry about.