Skip to content

Widget options

The same options are accepted as React props on <ChatWidget>, as keys on the window.ClaudiusConfig global (script embed), and — for a subset — as attributes on the <claudius-chat> web component.

OptionTypeDefaultDescription
apiUrlstring(required)URL of your Cloudflare Worker
titlestring"Chat"Header title
subtitlestring"Ask me anything"Header subtitle
welcomeMessagestring"Hi! How can I help you today?"First assistant message shown
placeholderstring"Type your message..."Input placeholder
persistMessagesbooleantrueSave history to sessionStorage (survives navigation, clears on tab close)
storageKeyPrefixstring"claudius:messages"Storage key prefix; set a unique value per widget when embedding several on one page
requestTimeoutMsnumber30000Per-attempt request timeout; 0 disables. Timeouts surface a retryable error
theme"light" | "dark" | "auto" | theme name | ClaudiusTheme | URL"light"Color scheme, a built-in theme, an inline theme object, or a URL to a theme JSON file
accentColorstring"#2563eb"Primary brand color override
position"bottom-right" | "bottom-left" | "top-right" | "top-left""bottom-right"Corner the bubble and window anchor to
locale"en" | "es" | "fr" | "de"auto-detectedUI language; see Localization
translationsPartial<ClaudiusTranslations>built-inOverride individual UI strings
triggersTrigger[]undefinedProactive triggers; see Proactive triggers

<claudius-chat> supports the scalar options as kebab-case attributes: api-url, title, subtitle, welcome-message, placeholder, persist-messages, storage-key-prefix, request-timeout-ms, theme, accent-color, position.

<claudius-chat
api-url="https://your-worker.workers.dev"
title="Support"
theme="auto"
></claudius-chat>

locale, translations, and triggers are not available as attributes — use window.ClaudiusConfig or the React component for those.

The embed sets window.ClaudiusWidgetVersion; inspect it in the browser console to see which release a page is running.