> ## 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.

# Programmatic API

> Control the feedback widget with JavaScript for advanced use cases.

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.

```html theme={null}
<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.

```javascript theme={null}
Clayzo.open();
```

For example, from a button in your footer:

```html theme={null}
<button onclick="Clayzo.open()">Report a Bug</button>
```

Or from a React component:

```jsx theme={null}
<button onClick={() => window.Clayzo.open()}>
  Send Feedback
</button>
```

## `Clayzo.destroy()`

Remove the widget from the page and stop all recording.

```javascript theme={null}
Clayzo.destroy();
```

<Warning>
  If you use `data-key` on the script tag **and** call `Clayzo.init()`, the programmatic call takes precedence.
</Warning>

## Single-Page App Usage

For SPAs (React, Next.js, Vue, etc.), initialize in your app's root component and destroy on unmount:

<Tabs>
  <Tab title="React">
    ```jsx theme={null}
    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 />;
    }
    ```
  </Tab>

  <Tab title="Vue">
    ```vue theme={null}
    <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>
    ```
  </Tab>

  <Tab title="Script tag">
    ```html theme={null}
    <script src="https://client.clayzo.com/sdk/widget.js"></script>
    <script>
      Clayzo.init({
        apiKey: "sk_live_...",
        user: { id: "usr_123", name: "Jane Doe" }
      });
    </script>
    ```
  </Tab>
</Tabs>