Skip to main content

Documentation Index

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

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

For full control over initialization, user identity, and lifecycle, use the JavaScript API instead of (or alongside) data-* attributes.

​
Clayzo.init(options)

Initialize the widget. If a widget is already active, it will be destroyed first. 
<script src="https://client.clayzo.com/sdk/widget.js"></script>
<script>
  Clayzo.init({
    apiKey: "sk_live_...",
    theme: "dark",
    accent: "#6366f1",
    position: "bottom-left",
    triggerStyle: "tab",
    triggerText: "Help us improve",
    user: {
      id: "usr_123",
      name: "Jane Doe",
      email: "jane@example.com"
    },
    onSubmit: (feedback) => {
      console.log("Feedback submitted:", feedback.type, feedback.text);
    }
  });
</script>

​
Options

OptionTypeDefaultDescription
apiKeystring—Required. Your SDK API key
theme"light" | "dark" | "auto""auto"Color scheme
accentstring"#01adae"Accent color (hex)
position"bottom-right" | "bottom-left""bottom-right"Widget corner
triggerStyle"fab" | "text" | "tab" | "none""fab"Trigger button style. Use "none" to hide and call Clayzo.open() yourself
triggerTextstring"Feedback"Trigger button label
userobject—End-user identity
user.idstring—Your internal user ID
user.namestring—Display name
user.emailstring—Email address
onSubmitfunction—Callback after successful submission

​
Clayzo.open()

Open the feedback panel programmatically. Use this when you’ve set triggerStyle: "none" and want to trigger the panel from your own UI. 
Clayzo.open();
For example, from a button in your footer: 
<button onclick="Clayzo.open()">Report a Bug</button>
Or from a React component: 
<button onClick={() => window.Clayzo.open()}>
  Send Feedback
</button>

​
Clayzo.destroy()

Remove the widget from the page and stop all recording. 
Clayzo.destroy();
If you use data-key on the script tag and call Clayzo.init(), the programmatic call takes precedence.

​
Single-Page App Usage

For SPAs (React, Next.js, Vue, etc.), initialize in your app’s root component and destroy on unmount: 
import { useEffect } from "react";

function App() {
  useEffect(() => {
    if (window.Clayzo) {
      window.Clayzo.init({
        apiKey: "sk_live_...",
        user: { id: currentUser.id, name: currentUser.name }
      });
    }
    return () => window.Clayzo?.destroy();
  }, []);

  return <YourApp />;
}