Skip to main content
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.
ValueDescription
autoMatches the user’s system preference (default)
lightLight background, dark text
darkDark 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.
ValueDescription
bottom-rightBottom-right corner (default)
bottom-leftBottom-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.
ValueDescription
fabFloating action button with an icon (default)
textInline text button
tabTab attached to the edge of the screen
noneNo 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.