Last updated

How to change FTW UI texts

This guide gives an overview how to change the User Interface (UI) texts in Flex Template for Web (FTW).

Table of Contents

The FTW templates have several types of texts that can be read in the user interface. The most extensive group of UI texts is microcopy, but FTW templates also have static pages, as well as some other groups of content that can be configured in the code base.

Microcopy

In the FTW templates, user-facing content is not written directly into the source code. Instead, the source code uses React Intl message formatting that defines keys for each meaningful piece of content, and a translator or a content creator can then define the message (i.e. the value) for each key in their language. Read more about how Flex handles microcopy.

By default, FTW templates use built-in language-specific microcopy files to show microcopy messages in the UI. However, starting in 2022-05, operators can also modify microcopy in Flex Console using hosted microcopy assets. The built-in microcopy is merged with the hosted microcopy in the template, so you can use both ways of managing microcopy. Read more about how to modify built-in microcopy in FTW templates and how hosted microcopy work in the FTW templates.

You may also want to change the language of the user interface entirely. Read more about changing the language used in FTW.

In addition to microcopy, there are other forms of content in the FTW applications that operators may need to manage.

Static pages

A few components in the FTW template app contain texts that are not included in the en.json file, namely AboutPage, PrivacyPolicy, and TermsOfService. The reason behind this is that these components only contain static content that is laid out in more of a document format so the copy for these texts can easily be changed and maintained in the component files themselves.

More information about adding static content to the application can be found in the How to add static pages in FTW guide.

Other cases: labels and countries

There are few other cases where we haven't added microcopy directly to the microcopy files.

Labels for filters (e.g. categories and amenities in FTW-daily) can be found in src/marketplace-custom-config.js. By default, these filters are not in use, since every marketplace has its own extended data and search filters for them.

└── src
    └── config
        └── marketplace-custom-config.js

Country codes are in a separate file as well. Stripe API requires country information as ISO 3166-1 alpha-2 codes. These are used when billing address is asked in StripePaymentForm on CheckoutPage.

└── src
    └── translations
        └── countryCodes.js