Textos e idioma

Mude a voz do widget do mesmo jeito que muda a interface dele: mantenha o ambiente padrão e substitua só o que precisar.

Use isto quando

• você quer renomear rótulos ou botões
• precisa de um segundo idioma
• quer textos que reajam ao contexto do visitante ou do app

A menor mudança 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 ?",
    },
  }}
/>;

Os idiomas incluídos são en, es, fr e pt. As variantes regionais caem para o idioma base, então pt-BR resolve para pt. A ordem de reserva é: o locale explícito, o do navegador e, por fim, o inglês.

Variantes comuns

Usar textos tipados na sua própria interface

Use <Text /> na marcação ou useSupportText() quando precisar de uma string no 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>
  );
}

Adicionar um idioma próprio

Você pode passar qualquer código de idioma, desde que forneça os textos dele.

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

Quando parar por aqui

• a interface padrão está boa e você só precisa de outras palavras
• uma ou duas substituições já bastam
• a sua equipe quer que o widget siga a voz do produto sem uma página própria

Próximo passo

• Referência de hooks se você precisar de controle pelo código em componentes próprios
• Referência de tipos quando precisar dos tipos compartilhados por trás dessas APIs

Dica para depurar

Cada <Text /> renderizado inclui data-key-name="..." no DOM, então dá para ver qual chave gera cada string antes de substituí-la.

Validar um idioma próprio

O catálogo completo de chaves tipadas fica em packages/react/src/support/text/locales/keys.ts, e os valores em inglês embutidos, em packages/react/src/support/text/locales/en.tsx. Tipe a sua substituição como SupportTextContentOverrides<"seu-idioma"> para que uma chave com erro de digitação falhe no TypeScript, e compare depois com o catálogo da versão do pacote que você instalar.

As strings que faltarem caem primeiro para o idioma do navegador e depois para o inglês, então teste também mudando o idioma do navegador, não só o locale explícito. No momento o widget não promete layout automático da direita para a esquerda: valide a direção, o posicionamento dos ícones e o conteúdo com direções misturadas antes de lançar um idioma RTL.