# Customization
Source: https://docs.clayzo.com/customization

Customize the look, feel, and behavior of the feedback widget.

Every aspect of the widget's appearance can be configured via `data-*` attributes on the script tag. No code changes required.

## Full Example

```html theme={null}
<script
  src="https://client.clayzo.com/sdk/widget.js"
  data-key="sk_live_..."
  data-theme="dark"
  data-accent="#6366f1"
  data-position="bottom-left"
  data-trigger="tab"
  data-trigger-text="Report a Bug?"
></script>
```

## Options Reference

### `data-theme`

Controls the widget's color scheme.

| Value   | Description                                        |
| ------- | -------------------------------------------------- |
| `auto`  | Matches the user's system preference **(default)** |
| `light` | Light background, dark text                        |
| `dark`  | Dark background, light text                        |

```html theme={null}
<script src="..." data-key="..." data-theme="dark"></script>
```

### `data-accent`

Sets the accent color used for buttons, highlights, and the element selector. Accepts any hex color.

**Default:** `#01adae`

```html theme={null}
<script src="..." data-key="..." data-accent="#6366f1"></script>
```

### `data-position`

Controls which corner the widget appears in.

| Value          | Description                       |
| -------------- | --------------------------------- |
| `bottom-right` | Bottom-right corner **(default)** |
| `bottom-left`  | Bottom-left corner                |

```html theme={null}
<script src="..." data-key="..." data-position="bottom-left"></script>
```

### `data-trigger`

Controls the style of the trigger button that opens the feedback panel.

| Value  | Description                                           |
| ------ | ----------------------------------------------------- |
| `fab`  | Floating action button with an icon **(default)**     |
| `text` | Inline text button                                    |
| `tab`  | Tab attached to the edge of the screen                |
| `none` | No trigger — use your own button with `Clayzo.open()` |

```html theme={null}
<script src="..." data-key="..." data-trigger="tab"></script>
```

### `data-trigger-text`

Custom label for the trigger button. Only visible with the `text` and `tab` trigger styles.

**Default:** `Feedback`

```html theme={null}
<script src="..." data-key="..." data-trigger="text" data-trigger-text="Report a Bug?"></script>
```

## Custom Trigger (BYO Button)

Set `data-trigger="none"` to hide the default widget button, then call `Clayzo.open()` from anywhere in your UI:

```html theme={null}
<script
  src="https://client.clayzo.com/sdk/widget.js"
  data-key="sk_live_..."
  data-trigger="none"
></script>

<!-- Your own button, anywhere on the page -->
<button onclick="Clayzo.open()">Send Feedback</button>
```

This works from any element — a footer link, a nav item, a help menu, a floating button you built yourself. The full feedback panel (element selection, screenshots, session replay) still works exactly the same.

## Identifying Users

By default, feedback is submitted anonymously. To attach user identity, use the [programmatic API](/programmatic-api) instead of auto-initialization:

```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",
      email: "jane@example.com"
    }
  });
</script>
```

The user's name and email will appear alongside their feedback in the Clayzo dashboard.


# Dashboard
Source: https://docs.clayzo.com/dashboard

View and manage customer feedback in the Clayzo dashboard.

All feedback submitted through the SDK is available in the **Customer Feedback** tab inside the Review sidebar of your workspace.

## Inbox

The feedback inbox shows all submissions with:

* **Type indicator** — Bug, Idea, or Feedback
* **Status** — Open, Active, Resolved, or Closed
* **User info** — Name and page URL
* **Attachment icons** — Element context, screenshot, session replay, AI fix plan

### Filtering

Use the filter bar to narrow results:

| Filter     | Options                                |
| ---------- | -------------------------------------- |
| **Status** | Open, Active, Resolved, Closed         |
| **Type**   | Bugs, Ideas, Feedback                  |
| **Search** | Filter by text, page URL, or user name |

Filters can be combined (e.g. show only open bugs). The default view shows **Open** items.

## Detail Panel

Click any item to open the detail drawer.

### AI Fix Plan

An AI-generated analysis and action plan based on the feedback text, element context, and page URL. Copy the full plan to hand off to your engineering team.

### Session Replay

If session replay is enabled, the full recording loads automatically when the panel opens. Watch exactly what the user experienced leading up to their feedback.

### Element Context

When a user attaches an element, the panel shows:

| Field               | Description                             |
| ------------------- | --------------------------------------- |
| **React component** | Component name and full component stack |
| **Props**           | Serialized component props              |
| **CSS selector**    | Full selector path                      |
| **Element text**    | Visible text content                    |
| **Layout**          | Position and dimensions                 |

### Screenshot

A screenshot captured at the moment of submission.

### Environment

Browser user agent and viewport dimensions.

## Managing Status

Update the status of any feedback item from the detail panel header.

| Status       | Meaning                |
| ------------ | ---------------------- |
| **Open**     | New, unreviewed        |
| **Active**   | Being worked on        |
| **Resolved** | Fixed or addressed     |
| **Closed**   | Won't fix or duplicate |


# Customer Feedback SDK
Source: https://docs.clayzo.com/index

Embed a feedback widget in your product to collect bug reports, ideas, and feedback from your users.

Drop a single script tag into your site and start collecting bug reports, feature ideas, and feedback from your users — complete with element selection, screenshots, and session replays.

<CardGroup>
  <Card title="Quick Start" icon="rocket" href="/quick-start">
    Get the widget running in under 2 minutes.
  </Card>

  <Card title="Customization" icon="palette" href="/customization">
    Themes, triggers, colors, and positioning.
  </Card>

  <Card title="Programmatic API" icon="code" href="/programmatic-api">
    Control the widget with JavaScript.
  </Card>

  <Card title="Dashboard" icon="chart-mixed" href="/dashboard">
    Manage feedback in Clayzo.
  </Card>
</CardGroup>

## How It Works

<Steps>
  <Step title="Generate an API key">
    Go to your workspace's **Settings → Integrations** and generate an SDK API key.
  </Step>

  <Step title="Add the script tag">
    Paste the embed snippet into your site's HTML.
  </Step>

  <Step title="Users submit feedback">
    Each submission captures the page URL, a screenshot, element context, and an optional session replay.
  </Step>

  <Step title="View everything in Clayzo">
    All feedback appears under the **Customer Feedback** tab, with AI-generated fix plans and full session replays.
  </Step>
</Steps>


# Programmatic API
Source: https://docs.clayzo.com/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>


# Quick Start
Source: https://docs.clayzo.com/quick-start

Get the Clayzo feedback widget running on your site in under 2 minutes.

<Steps>
  <Step title="Generate an API key">
    Go to **Settings → Integrations** in your Clayzo workspace and find the **Customer Feedback SDK** section. Click **Generate API Key**.

    Copy the key — it starts with `sk_live_`.
  </Step>

  <Step title="Add the script tag">
    Paste this before the closing `</body>` tag on your site:

    ```html theme={null}
    <script
      src="https://client.clayzo.com/sdk/widget.js"
      data-key="YOUR_API_KEY"
    ></script>
    ```

    Replace `YOUR_API_KEY` with the key you generated.
  </Step>

  <Step title="Done">
    A feedback button appears in the bottom-right corner of your site. Users can click it to report bugs, share ideas, or leave feedback.
  </Step>
</Steps>

<Info>
  The widget is fully isolated using Shadow DOM — it won't affect your site's styles or be affected by them.
</Info>

## What Gets Captured

Every submission automatically includes:

| Data                | Description                                                                                      |
| ------------------- | ------------------------------------------------------------------------------------------------ |
| **Page URL**        | The page the user was on                                                                         |
| **Screenshot**      | Captured at the moment of submission                                                             |
| **Element context** | CSS selector, React component name, props, and component stack (if the user attaches an element) |
| **Session replay**  | Full session recording (if enabled in SDK settings)                                              |
| **Browser info**    | User agent and viewport dimensions                                                               |

## Enable Session Replays

Session replays are off by default. To enable them:

1. Go to **Settings → Integrations** in Clayzo
2. Find the **Customer Feedback SDK** section
3. Toggle **Session Replay** on

<Tip>
  Once enabled, each feedback submission includes a full session replay viewable in the Clayzo dashboard.
</Tip>