Customization - Clayzo

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

Full Example

<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

<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

<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

<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()`

<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

<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:

<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 instead of auto-initialization:

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

​Full Example

​Options Reference

​data-theme

​data-accent

​data-position

​data-trigger

​data-trigger-text

​Custom Trigger (BYO Button)

​Identifying Users