---
title: "Translation Header Snippet"
slug: "translation-header-snippet"
updated: 2025-09-26T07:41:59Z
published: 2025-09-26T07:41:59Z
canonical: "docs.unqork.io/translation-header-snippet"
---

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

# Translation Header Snippet

## Overview

As you build applications, you can offer them in languages other than English. The Translation Header template lets end-users translate a module using a language drop-down. Anyone who has a diverse-speaking audience benefits from this snippet. Some examples are healthcare services, government operations, and global companies.

This snippet works differently from the Translate sidebar option in the Module Builder. The Translate sidebar option sets up translations based on the end-user's location (determined by the data.currentUser.locale value). It also requires you to add translations to the module. Instead, the Translation Header snippet lets end-users choose any language from the drop-down. It doesn't matter what their location is.

Here's how the snippet looks in Express View:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Translation_Header_02.jpg?sv=2026-02-06&spr=https&st=2026-11-10T12%3A00%3A22Z&se=2026-11-10T13%3A00%3A22Z&sr=c&sp=r&sig=BxfmlcxVwTyHFUbS3pK0jeDLvx83nYdM7NQTe7KtuGo%3D)

And here's how the snippet looks in the Module Builder:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Translation_Header_01.jpg?sv=2026-02-06&spr=https&st=2026-11-10T12%3A00%3A22Z&se=2026-11-10T13%3A00%3A22Z&sr=c&sp=r&sig=BxfmlcxVwTyHFUbS3pK0jeDLvx83nYdM7NQTe7KtuGo%3D)

## Adding the Snippet

It's easy to access the Translation Header in Unqork Marketplace. Before you use this snippet in your application, you must install the snippet to your environment.

### Adding the Snippet to Your Environment

To add the snippet to your environment:

1. At the top right of the Unqork Designer Platform, click **Library**.
2. Click **Template**.
3. Click **Marketplace**.

> [!NOTE]
> You can also access the Marketplace at any time by visiting [https://marketplace.unqork.io](https://marketplace.unqork.io/#/).
4. In the **Search the Listings Directory** field, enter Translation Header.
5. Click the **Translation Header** tile.
6. Click **Install to Environment**.
7. Click **Install** **Template**.

> [!NOTE]
> If you aren't logged in, you'll see a field for **Environment URL** and a **Login** button. Enter your environment's URL where you want to install the template. For example: [environmentname.unqork.io]. Click the **Login** button. Then, return to step 4 and click **Install to Environment** again. Follow the remaining steps as listed.

Now, you can now use your newly installed snippet in your application.

### Adding the Snippet to Your Module

After you install the Translation Header snippet to your environment, you can drag and drop the snippet into your module:

1. In the left sidebar of the Module Builder, click the **Snippet****s** button.
2. In the search bar, enter Translation Header.
3. Drag and drop the **Translation Header** snippet onto your canvas.

> [!NOTE]
> If you don't see the snippet at first, make sure to expand the **Marketplace Snippets** section.

> [!TIP]
> Because this is a header snippet, it's best practice to add the Translation Header to the top of your canvas.
4. **Save** your module.

## How the Snippet Works

This snippet relies heavily on back-end logic components. The only component visible in Express View is the translatedLanguage drop-down.

After an end-user selects a language, here's what happens behind the scenes:

1. Selecting a language triggers initRefresh, which refreshes the page. It also sets the Calculator and Decision components in motion.
2. When the page refreshes, initNewSubmission triggers the Data Workflow. Then, dwfInitLocale finds the language locale and converts it to an object. The language locale is the language the end-user selected.
3. The calcQueryString component concatenates the language locale and the module ID.
4. Finally, ruleRefreshWithLocale refreshes the page with the correct language locale in the URL. Now, the module text is translated to the selected language.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Translation_Header_GIF.gif?sv=2026-02-06&spr=https&st=2026-11-10T12%3A00%3A22Z&se=2026-11-10T13%3A00%3A22Z&sr=c&sp=r&sig=BxfmlcxVwTyHFUbS3pK0jeDLvx83nYdM7NQTe7KtuGo%3D)

## Setting Up the Snippet

For this snippet to function, all you need to do is adjust your settings to enable translations.

### Enabling the Translations Setting

To enable translations in your module:

1. In the Module Builder's left side menu, select **Settings** ( ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ModEditor_Settings.jpg?sv=2026-02-06&spr=https&st=2026-11-10T12%3A00%3A22Z&se=2026-11-10T13%3A00%3A22Z&sr=c&sp=r&sig=BxfmlcxVwTyHFUbS3pK0jeDLvx83nYdM7NQTe7KtuGo%3D)).
2. Set the **Enable Translations** toggle to ON.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Translation_Header_03.jpg?sv=2026-02-06&spr=https&st=2026-11-10T12%3A00%3A22Z&se=2026-11-10T13%3A00%3A22Z&sr=c&sp=r&sig=BxfmlcxVwTyHFUbS3pK0jeDLvx83nYdM7NQTe7KtuGo%3D)
3. Scroll down and click the **Save Settings** button.

## Customizing the Snippet

There are a few ways you can customize the Translation Header snippet:

- Change the default language from English to another language.
- Remove uncommon languages.

### Changing the Default Language

The default language of this snippet is English. If your company is based in Spain for example, your application is probably in Spanish. Since your audience primarily speaks Spanish, you can change the default language.

To change the default language:

1. In the Module Builder, hover over the **dwfInitLocale** Data Workflow.

A 5-button toolbar displays above the component on hover-over.
2. Click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuildButton_Settings(39).jpg?sv=2026-02-06&spr=https&st=2026-11-10T12%3A00%3A22Z&se=2026-11-10T13%3A00%3A22Z&sr=c&sp=r&sig=BxfmlcxVwTyHFUbS3pK0jeDLvx83nYdM7NQTe7KtuGo%3D) (**Settings**) button to open the Configuration window.
3. Near the bottom of the canvas, click the **Set** node.
4. In the **Value** field, replace en with the code for the language you want to be the default.

> [!TIP]
> You can find a language's corresponding code in the translatedLanguage Dropdown component under Data Source Values.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Translation_Header_05.jpg?sv=2026-02-06&spr=https&st=2026-11-10T12%3A00%3A22Z&se=2026-11-10T13%3A00%3A22Z&sr=c&sp=r&sig=BxfmlcxVwTyHFUbS3pK0jeDLvx83nYdM7NQTe7KtuGo%3D)
5. Click the **Formula** node.
6. In the **Value** field, at the end of the formula, replace en with the code for the language you want to be the default. For example, =IF(LEN(A)>0,A,'es') for Spanish.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Translation_Header_06.jpg?sv=2026-02-06&spr=https&st=2026-11-10T12%3A00%3A22Z&se=2026-11-10T13%3A00%3A22Z&sr=c&sp=r&sig=BxfmlcxVwTyHFUbS3pK0jeDLvx83nYdM7NQTe7KtuGo%3D)
7. Click **Save**.

### Removing Languages from the Dropdown Component

If there are any languages you want to omit from the language dropdown, you can easily remove them.

To remove a language from the Dropdown component:

1. In the Module Builder, hover over the **Language** Dropdown component (translatedLanguage).

A 5-button toolbar displays above the component on hover-over.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Translation_Header_04.jpg?sv=2026-02-06&spr=https&st=2026-11-10T12%3A00%3A22Z&se=2026-11-10T13%3A00%3A22Z&sr=c&sp=r&sig=BxfmlcxVwTyHFUbS3pK0jeDLvx83nYdM7NQTe7KtuGo%3D)
2. Click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuildButton_Settings(39).jpg?sv=2026-02-06&spr=https&st=2026-11-10T12%3A00%3A22Z&se=2026-11-10T13%3A00%3A22Z&sr=c&sp=r&sig=BxfmlcxVwTyHFUbS3pK0jeDLvx83nYdM7NQTe7KtuGo%3D) (**Settings**) button to open the Configuration window.
3. Under **Data Source Type** in the **Data** panel, select both the language and its corresponding code.
4. Press the **Delete** key.
5. Click **Save**.

## Removing the Snippet

You might want to remove a snippet from your application. Here, you'll learn how to remove the snippet from your module. Then, you'll learn how to uninstall the snippet from your environment.

### Remove the Snippet from Your Module

To remove the Translation Header snippet:

1. In the Module Builder, hover over the **panelTranslationHeader** Panel.

A 5-button toolbar displays above the component on hover-over.
2. Using the toolbar, click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuildButton_Remove(31).jpg?sv=2026-02-06&spr=https&st=2026-11-10T12%3A00%3A22Z&se=2026-11-10T13%3A00%3A22Z&sr=c&sp=r&sig=BxfmlcxVwTyHFUbS3pK0jeDLvx83nYdM7NQTe7KtuGo%3D) (**Remove**) button.
3. **Save** your module.

### Remove the Snippet from Your Environment

Use the Unqork Template Library to remove unused snippets. To uninstall a snippet from your environment:

1. At the top right of the Unqork Designer Platform, click **Library** or **Template****s**.
2. Find the snippet you want to uninstall.
3. Click the **ellipsis** (...) in the snippet's tile header.
4. Click **Uninstall** **Template**.
5. Click **Yes, Uninstall** in the confirmation modal.

You can visit the Marketplace and reinstall the snippet at any time.

> [!NOTE]
> What if you have an existing application built using this snippet and then uninstall the snippet from your environment? No problem. Your existing application remains unaffected. Also, your application doesn't have any ties to the snippet. So, let's say you reinstall a newer version of the snippet in the future. You can rest assured that the installation doesn't impact your existing application.