Textos e idioma

Cambia la voz del widget igual que cambias su interfaz: conserva el entorno por defecto y sustituye solo lo que necesites.

Usa esto cuando

• quieres renombrar etiquetas o botones
• necesitas un segundo idioma
• quieres textos que reaccionen al contexto del visitante o de la aplicación

El cambio más pequeño que funciona

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

Los idiomas incluidos son en, es, fr y pt. Las variantes regionales se reducen a su idioma base, así que pt-BR resuelve a pt. El orden de reserva es: el locale explícito, el del navegador y, por último, el inglés.

Variantes habituales

Usar textos tipados en tu propia interfaz

Usa <Text /> en el marcado o useSupportText() cuando necesites una cadena en el código.

Copiarimport { Text, useSupportText } from "@fluxolat/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>
  );
}

Añadir un idioma propio

Puedes pasar cualquier código de idioma siempre que le proporciones sus textos.

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

Cuándo quedarte aquí

• la interfaz por defecto te vale y solo necesitas otras palabras
• con una o dos sustituciones te basta
• tu equipo quiere que el widget siga la voz del producto sin una página propia

Siguiente paso

• Referencia de hooks si necesitas control desde el código en componentes propios
• Referencia de tipos cuando necesites los tipos compartidos que hay tras estas API

Truco para depurar

Cada <Text /> renderizado incluye data-key-name="..." en el DOM, así que puedes ver qué clave genera cada cadena antes de sustituirla.

Validar un idioma propio

El catálogo completo de claves tipadas está en packages/react/src/support/text/locales/keys.ts, y los valores en inglés integrados, en packages/react/src/support/text/locales/en.tsx. Tipa tu sustitución como SupportTextContentOverrides<"tu-idioma"> para que una clave mal escrita falle en TypeScript, y compara luego con el catálogo de la versión del paquete que instales.

Las cadenas que falten caen primero al idioma del navegador y luego al inglés, así que prueba también cambiando el idioma del navegador, no solo el locale explícito. Ahora mismo el widget no promete maquetación automática de derecha a izquierda: valida la dirección, la colocación de los iconos y el contenido con direcciones mezcladas antes de lanzar un idioma RTL.