Copy & Locale

Change the widget voice the same way you change the widget UI: keep the default runtime and override only what you need.

Use this when

• you want to rename labels or buttons
• you need a second language
• you want copy that reacts to visitor or app context

Smallest working change

Copyimport { Support } from "@cossistant/react";
 
<Support
  locale="fr"
  content={{
    "common.actions.askQuestion": {
      en: "Reach out",
      fr: "Contactez-nous",
    },
    "page.home.greeting": {
      en: "Need help?",
      fr: "Besoin d'aide ?",
    },
  }}
/>;

Built-in locales are en, fr, and es. Fallback order is: explicit locale, browser locale, then English.

Common variants

Use typed copy inside custom UI

Use <Text /> for markup or useSupportText() when you need a string in code.

Copyimport { Text, useSupportText } from "@cossistant/react";
 
export function AskButton() {
  const text = useSupportText();
 
  return (
    <button className="cta">
      <Text as="span" textKey="common.actions.askQuestion" />
      <span className="hint">
        {text("page.home.history.more", { count: 2 })}
      </span>
    </button>
  );
}

Add a custom locale

You can pass any locale code as long as you provide the strings for it.

Copy<Support
  locale="en-support"
  content={{
    "common.actions.askQuestion": {
      "en-support": "Talk to us",
    },
  }}
/>

When to stop here

• the default UI is fine and you only need different wording
• one or two overrides are enough
• your team wants the widget to follow product voice without a custom page

Next step

• Hooks Reference if you need code-level control in custom components
• Types Reference when you need the shared widget types behind these APIs

Debugging tip

Every rendered <Text /> includes data-key-name="..." in the DOM, so you can inspect which key is driving a string before you override it.

Validate a custom locale

The complete typed key catalog lives in packages/react/src/support/text/locales/keys.ts, and the built-in English values live in packages/react/src/support/text/locales/en.tsx. Type your override as SupportTextContentOverrides<"your-locale"> so misspelled keys fail TypeScript, then compare the catalog in the package version you install.

Missing strings fall back to the browser locale and then English, so test with the browser locale changed as well as the explicit locale. The widget does not currently promise automatic right-to-left layout; validate direction, icon placement, and mixed-direction content before shipping an RTL locale.