---
title: Localizing UI with the DaVinci client for JavaScript
description: Explains how to localize the user interface in your JavaScript application by using `RequestMiddleware` to send the `Accept-Language` header to PingOne.
component: orchsdks
page_id: orchsdks:davinci:customization/localization/localize-javascript-ui
canonical_url: https://developer.pingidentity.com/orchsdks/davinci/customization/localization/localize-javascript-ui.html
revdate: Fri, 9 Jan 2026 17:23:51 +0000
keywords: ["DaVinci", "JavaScript", "Localization", "UI", "RequestMiddleware", "Accept-Language"]
section_ids:
  before_you_begin: Before you begin
  configuring_a_davinci_module_to_send_the_language_header: Configuring a DaVinci module to send the language header
  overriding_the_automatically_added_languages: Overriding the automatically-added languages
---

# Localizing UI with the DaVinci client for JavaScript

[icon: circle-check, set=far]PingOne [icon: js, set=fab]JavaScript

You can leverage the [languages](https://docs.pingidentity.com/pingone/user_experience/p1_languages.html) feature in PingOne to localize your client applications for different audiences.

The DaVinci modules automatically send the preferred languages configured in the browser or mobile device to PingOne so that it can return the appropriate language.

Console output from an iOS client showing `Accept-Language` header

```text
[Ping SDK 2.0.0] ⬆
Request URL: https://auth.pingone.com/c2a6...1602/as/authorize?response_mode=pi.flow&client_id=85ff...6791&response_type=code&scope=openid&redirect_uri=http://localhost:5829&code_challenge=m8BD...rhPM&code_challenge_method=S256
Request Method: GET
Request Headers: [
    "x-requested-platform": "ios",
    "Content-Type": "application/json",
    "x-requested-with": "ping-sdk",
    "Accept-Language": "en-GB, en;q=0.9"
]
Request Timeout: 15.0
```

You can also override the configured settings directly in your code if required.

## Before you begin

You must configure PingOne to support multiple languages that your client apps can use:

1. In PingOne, enable the built-in languages you want to support.

   Learn more in [Enabling or disabling a language](https://docs.pingidentity.com/pingone/user_experience/p1_enable_a_language.html).

   |   |                                                                                                                                                                  |
   | - | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
   |   | You can also add your own languages and regions.Learn more in [Adding a language](https://docs.pingidentity.com/pingone/user_experience/p1_add_a_language.html). |

2. Ensure your language has the required localized strings for your clients to use.

   Learn more in [Modifying translatable keys](https://docs.pingidentity.com/pingone/user_experience/p1_modifying_translatable_keys.html).

   |   |                                                                                                                                                                                                                            |
   | - | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
   |   | You can also add your own keys to a language for use in your client applications.Learn more in [Adding a custom key for DaVinci](https://docs.pingidentity.com/pingone/user_experience/p1_adding_custom_key_davinci.html). |

3. Add your localized strings to your chosen implementation:

   * PingOne forms

     Update the fields in your PingOne forms to use translatable keys.

     ![Adding localized strings to a PingOne form.](../../_images/pingone_form_localize-en.png)Figure 1. Adding localized strings to a PingOne form

     Learn more in [Using translatable keys](https://docs.pingidentity.com/pingone/user_experience/p1_using_translatable_keys.html).

   * Custom HTTP Connector

     Update the **Output Fields** in your custom HTML to use your localized strings.

     Adding localized strings to a custom HTTP connector

     ![Adding localized strings to a custom HTTP connector.](../../_images/custom_http_connector_localize-en.png)

     Learn more in [HTTP Connector](https://docs.pingidentity.com/connectors/http_connector.html).

## Configuring a DaVinci module to send the language header

The DaVinci modules automatically send the `Accept-Language` header when making requests to the PingOne server. This header includes each of the languages configured on the client device or in the browser, and maintains the order of preference.

The DaVinci module for Android and iOS also add generic versions of sub-dialects configured on the device, to make it more likely that PingOne can fall back to a similar language if the specific sub-dialect is unavailable.

For example, configuring **English (British)** (`en-GB`) as a preferred languages causes the DaVinci module to also send **English** (`en`) as a fallback option:

```text
"Accept-Language": "en-GB, en;q=0.9"
```

### Overriding the automatically-added languages

You can override the default behavior of automatically sending configured languages.

To override the default browser behavior and provide your own values for the `Accept-Language` header, use the `RequestMiddleware` type.

Call your request middleware when creating the DaVinci module as follows:

Using the `CustomHeader` module to override default language behavior

```javascript
import { davinci } from '@forgerock/davinci';
import type { RequestMiddleware } from '@forgerock/davinci-client/types';

const requestMiddleware: RequestMiddleware[] = [
  (fetchArgs, action, next) => {
    fetchArgs.headers?.set('Accept-Language', 'fr-FR, fr;q=0.9');
    next();
  },
];

const davinciClient = await davinci({
  config: {
    clientId: '6c7eb89a-66e9-ab12-cd34-eeaf795650b2',
    serverConfig: {
      wellknown: 'https://auth.pingone.com/3072206d-c6ce-ch15-m0nd-f87e972c7cc3/as/.well-known/openid-configuration',
      timeout: 3000,
    },
    scope: '"openid", "email", "address", "profile", "phone"',
    responseType: 'code',
  },
  requestMiddleware
});
```