---
title: "Localizing your replacement UI with the Web App SDK"
slug: "dpo-customize-app-sdk-ui-localizing-replacement-ui-with-web-app-sdk"
updated: 2026-10-27T20:13:12Z
published: 2026-10-27T20:13:12Z
canonical: "docs.onespan.com/dpo-customize-app-sdk-ui-localizing-replacement-ui-with-web-app-sdk"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.onespan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Localizing your replacement UI with the Web App SDK

If your app replaces the default UI displayed by the Web App SDK with a custom UI, the App SDK can still substitute localized strings from a JSON UI configuration file for the default strings. The HTML elements in your custom UI, like <div>, <button>, <input>, <label>, can include a special data-tag attribute with a value that tells the App SDK which strings from your JSON UI configuration file to use in your replacement UI.

Your Web app must contain code that directs the App SDK to your JSON UI configuration file and applies your UI configuration to specific views. For details on these code changes, see [Localizing Strings in Your Replacement UI](/dpoa/docs/s3suite94-web-developer-guide-for-web-1).

To prepare a JSON UI Configuration file that contains localized strings to be displayed in the HTML for your replacement UI:

1. In your JSON UI configuration, create a strings object at the top level. Place key:value pairs for your localized strings into this top level strings object. For example:

```json
{
    …"strings":{
        "my_ok_button":"Bien",
        "my_cancel_button":"Cancelar"
    }…
}
```

[Store this file](/dpoa/docs/s3suite94-storing-your-ui-configuration-files-1) as usual.

1. In the HTML for your replacement UI, use the data-tag attribute whose value tells which key in the JSON strings object corresponds to the localized word.

```xml
<div id="my_view">
    <button data-tag="strings:my_ok_button">OK</button>
    <button data-tag="strings:my_cancel_button">Cancel</button>
</div>
```

1. The Web App SDK displays the following HTML:

```xml
<div id="my_view">
    <button data-tag="strings:my_ok_button">Bien</button>
    <button data-tag="strings:my_cancel_button">Cancelar</button>
</div>
```