---
title: Change the language of your search interface in Lightning
slug: '1287'
canonical_url: https://docs.coveo.com/en/1287/
collection: coveo-for-salesforce
source_format: adoc
---
# Change the language of your search interface in Lightning
Usually, when changing the language of a search interface, you only need to reference its culture file, which automatically translates the strings to the appropriate language (see [Change the language of your search interface](https://docs.coveo.com/en/421/)).

However, this method isn't compliant with the Lightning framework.
To solve this issue, you need to upload your own dictionary to translate the English strings.

## Step 1: Create your static resource

The first thing you need to do is to create a static resource containing all the code to translate the strings of your search interface.

. Create a new JavaScript file.
This should be done locally.

> **Important**
>
> The reason you're doing this locally instead of through the **Developer Console** is because the **Developer Console** doesn't allow you to save code with diacritics.
. In your JavaScript file, enter the following code:

```javascript
 window.coveoCustomScripts['default'] = function () {

   Coveo.$('.CoveoSearchInterface').on('beforeInitialization', function (e, args) {
     var dict = {};

     String.toLocaleString({
       "en": dict
     });
   });
 }
```

. Get the dictionary for the language you want to translate your interface to, and paste it in your JavaScript file.
 .. In Salesforce, in **Setup**, search for and select **Static Resources**.
 .. On the **Static Resources** page, click **JsSearch**, which is installed alongside Coveo for Salesforce.
 .. Select **View file** to download a `.zip` of the JsSearch resource.
 .. Open the `.zip` file, and open the `\js\cultures\` folder.
 .. Open the file of the language you want to change your search interface to.
To know which key corresponds to which language, see [Change the language of your search interface](https://docs.coveo.com/en/421/).
 .. In the `<yourlanguage>.js` file, copy the `dict` object.
 .. In the JavaScript file you've created, replace the `var dict = {}` line with the `dict` object you copied.
 .. Save your JavaScript file.
. Consider adding other translations to your dictionary.
While the default dictionary takes care of translating most strings from the interface, it doesn't translate the values from your facets.
To learn how to do that, see [Normalize facet value captions](https://docs.coveo.com/en/368/).
. In Salesforce, upload your JavaScript file as a static resource (see [Defining Static Resources](https://help.salesforce.com/articleView?id=pages_static_resources_create.htm&type=5)).
Keep note of the name you give to your static resource, as you'll need it later.

## Step 2: Load your static resource with your component

Now that you have your static resource, you only need to reference it in your Lightning component.

. Ensure that you've created a custom Lightning component that integrates the Coveo components (see [Integrate Coveo Lightning Aura components in a custom component for your Experience Cloud site](https://docs.coveo.com/en/1193/)).
. Using the Salesforce **Developer Console**, open the `.cmp` file of your custom Lightning component (see [Open the Developer Console](https://help.salesforce.com/articleView?id=code_dev_console_opening.htm&type=5)).
. In the `CoveoV2` element, add the `customScripts` option to load your static resource (see [Add JavaScript to the Coveo Lightning Aura components with custom code](https://docs.coveo.com/en/1251/)).

```xml
 <CoveoV2:CommunitySearch customScripts="{!$Resource.<YOUR_RESOURCE_NAME>}" />
```

Where you replace `<YOUR_RESOURCE_NAME>` by the name of the static resource you created in [step 1](#step-1-create-your-static-resource).

. Save your component.

The interface should now be translated to your specified language.

**Example**

You want to translate the search interface in your Lightning component to French.

In Salesforce, you upload a static resource called `FrenchTranslation`, which contains the following code:

```javascript
 window.coveoCustomScripts['default'] = function () {

  Coveo.$('.CoveoSearchInterface').on('beforeInitialization', function (e, args) {
    var dict = {
      "Unknown": "Inconnu",
      "And": "ET",
      "Authenticating": "Authentification à {0} en cours...",
      // ...
      // For the sake of this example, the whole dictionary is shortened.
      // ...
      "filetype_youtubevideo": "Vidéos YouTube",
      "filetype_youtubeplaylistitem": "Élément de liste de lecture",
    };

    String.toLocaleString({
      "en": dict
    });
  });
}
```

The code for your custom Lightning component looks like this:

```xml
<aura:component implements='forceCommunity:availableForAllPageTypes'>
  <aura:attribute name="name" type="String" default="communityCoveo" access="global" />
  <aura:attribute name="debug" type="Boolean" default="false" access="global" />
  <aura:attribute name="searchHub" type="String" default="" access="global" />

  <CoveoV2:CommunitySearch name="{!v.name}"
                  debug="{!v.debug}"
                  searchHub="{!v.searchHub}"
                  customScripts="{!$Resource.FrenchTranslation}"/>
</aura:component>
```