Translation

The Gusto Embedded React SDK supports translation of all strings present in the UI. Translations can be used for internationalization. They can also be used to customize text according to the needs of your application.

i18Next

We use i18next to implement translations. If you are also leveraging i18next, we create our own independent instance to avoid conflicting with the one already present in your application.

Supplying your own translations

You can use the dictionary prop on the GustoApiProvider to set translations. The top level key represents the language being used (“en” by default). Each string in the UI has a key and corresponding default text. Let’s go through an example updating the Employee.PaymentMethod component.

For example, take the payment details step from the Employee Onboarding Flow. Initially it renders with the following copy:

We can update any text on this page by overriding the text strings in the dictionary. Here is an example updating the title and CTA text.

import { EmployeeOnboardingFlow } from '@gusto/embedded-react-sdk';

function MyApp({ companyId }) {
  return(
    <GustoApiProvider
      config={{
        baseUrl: `/myapp/`,
      }}
      dictionary={{
        en: {
          'Employee.PaymentMethod': {
            title: 'Please provide your payment information',
            submitCta: 'Next step',
          },
        },
      }}
    >
      <EmployeeOnboardingFlow companyId={companyId} onEvent={() => {...}} />
    </GustoApiProvider>
  );
}

Which results in the following:

We could provide custom text in a similar manner for any copy on the page.

Viewing available translations

Documenting available translations is still a work in progress. Every entry in the dictionary, however, is typed. This means that if you can begin typing and get available options in your IDE: