Locale & Text

Overview

The support widget ships with a fully typed translation layer powered by the <Text /> component and the useSupportText() hook. Every key is defined in a single source of truth so you get auto-complete, variable hints and compiler errors if a required placeholder is missing.

• Built-in locales: English (en), French (fr) and Spanish (es)
• Fallback order: provided locale prop → browser locale → English defaults
• Keys always render with a data-key-name="…" attribute so you can discover them quickly in dev tools

Rendering copy

Use the typed <Text /> component for static markup or the hook when you need raw strings.

Copyimport { Text, useSupportText } from "@cossistant/react/support";
 
export const 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>
  );
};

Both APIs are memo-friendly; the formatter is stable between renders and only re-computes when locale, overrides or context change.

Providing locales & overrides

Developers control the active locale and individual strings through the Support component. You can pass literal strings, per-locale overrides or formatter functions with full access to widget context (visitor, agents) plus utility helpers.

Copy<Support
  locale="fr"
  content={{
    "page.home.greeting": ({ variables, context, utils }) => {
      const period = utils.timeOfDay();
      const visitorName =
        variables?.visitorName ?? context.visitor?.contact?.name ?? "";
      const prefix = period.token === "evening" ? "Bonsoir" : "Salut";
      return `${prefix} ${visitorName}!`;
    },
    "common.actions.askQuestion": {
      en: "Reach out",
      fr: "Contactez-nous",
    },
  }}
/>

Custom locales are supported too—just pass a new locale code and supply the strings under content.

Debugging helpers

Every rendered <Text /> sets data-key-name="<key>", making it easy to inspect copy in the DOM. The translation utilities also expose helpers such as formatNumber, pluralize, titleCase and a timeOfDay() helper, available to formatter functions via the utils parameter.

These guarantees keep the widget copy consistent, type-safe and ready for your team's voice.