Chat Widget
Widget Customization
Customize the chat widget's appearance, position, and agent profile.
The Ticket0 widget can be customized to match your brand. Changes apply immediately — no deployment needed.
In-app configuration
Go to Settings → Widget to configure:
| Setting | Description |
|---|---|
| Agent name | Displayed in the widget header (e.g. "Acme Support") |
| Agent avatar | Upload a logo or avatar image (PNG/JPG, 200×200px) |
| Brand color | Hex color for the launcher button and accents |
| Greeting message | First message customers see when they open the widget |
| Position | Bottom-right (default) or bottom-left |
CSS customization
The widget loads in an iframe, so you can't target its internals with your own CSS. Use the brandColor prop / setting and the pre-built theme options instead.
Hiding on specific pages
To hide the widget on certain pages (e.g. checkout, admin area):
Via JavaScript snippet:
<script>
window.Ticket0 = window.Ticket0 || {};
window.Ticket0.workspaceId = "ws_your_workspace_id";
window.Ticket0.hideOnPaths = ["/checkout", "/admin"];
</script>Via React package:
<Ticket0Widget
workspaceId="ws_your_workspace_id"
hideOnPaths={["/checkout", "/admin"]}
/>Launching from a custom button
To use your own button instead of the default floating launcher:
<script>
window.Ticket0 = window.Ticket0 || {};
window.Ticket0.workspaceId = "ws_your_workspace_id";
window.Ticket0.hideLauncher = true;
</script>
<script src="https://cdn.ticket0.ai/widget/v1/widget.js" async defer></script>
<button onclick="window.Ticket0.open()">Contact support</button>The window.Ticket0.open(), window.Ticket0.close(), and window.Ticket0.toggle() methods are available after the script loads.