Widget Customization

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:

Scoping answers by audience

By default the widget answers from all of your knowledge. If you serve distinct audiences (e.g. B2C shoppers vs B2B merchants), set one or more audience tags under Settings → Widget → Answer scope to control what the widget can draw on.

When the scope is set to, say, b2c, the widget only retrieves:

• knowledge-base articles and crawled pages tagged b2c, plus
• untagged articles — the shared pool that's available to every audience.

It never surfaces content tagged for another audience (e.g. b2b). Tag the relevant articles (and, for crawled content, the crawl source) with your audience tag, then select the matching tag(s) here. Leave the scope empty to answer from everything.

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 widget package: Conditionally render <Ticket0Chat> based on the current path:

import { usePathname } from "next/navigation"
import { Ticket0Chat } from "@ticket0-ai/widget"

const HIDDEN_PATHS = ["/checkout", "/admin"]

export function Widget() {
  const pathname = usePathname()
  if (HIDDEN_PATHS.some((p) => pathname.startsWith(p))) return null
  return <Ticket0Chat workspaceId="ws_your_workspace_id" />
}

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.