Programmatic API

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

Option	Type	Default	Description
`apiKey`	`string`	—	Required. Your SDK API key
`theme`	`"light" \| "dark" \| "auto"`	`"auto"`	Color scheme
`accent`	`string`	`"#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
`triggerText`	`string`	`"Feedback"`	Trigger button label
`user`	`object`	—	End-user identity
`user.id`	`string`	—	Your internal user ID
`user.name`	`string`	—	Display name
`user.email`	`string`	—	Email address
`onSubmit`	`function`	—	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:

React
Vue
Script tag

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 />;
}

<script setup>
import { onMounted, onUnmounted } from "vue";

onMounted(() => {
  if (window.Clayzo) {
    window.Clayzo.init({
      apiKey: "sk_live_...",
      user: { id: currentUser.id, name: currentUser.name }
    });
  }
});

onUnmounted(() => {
  window.Clayzo?.destroy();
});
</script>

<script src="https://client.clayzo.com/sdk/widget.js"></script>
<script>
  Clayzo.init({
    apiKey: "sk_live_...",
    user: { id: "usr_123", name: "Jane Doe" }
  });
</script>

​Clayzo.init(options)

​Options

​Clayzo.open()

​Clayzo.destroy()

​Single-Page App Usage

`Clayzo.init(options)`

Options

`Clayzo.open()`

`Clayzo.destroy()`

Single-Page App Usage