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