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.