# Custom language selector

{% embed url="<https://www.youtube.com/watch?v=8481vqWQtcA>" %}

To add a custom selector, you need to create an HTML structure with specific attributes for the script to locate the elements that will make up the language selector.

One element has to be the item that will be repeated with the various languages, i.e. in the case of a list \<ul> it would be the \<li> element, but it can be any other element. This will have the attribute **data-polyflow-switcher="alternative".** If you want the language names to be written in their corresponding language, you must also add the following attribute: **data-polyflow-switcher-lang="self".**

{% hint style="info" %}
If you need to hide the custom language selector on pages that do not have language alternatives, add this attribute to the div containing the entire structure:

**data-polyflow-switcher="wrapper"**
{% endhint %}

<figure><img src="/files/ano1mPaWRsWOgXoP7O9W" alt=""><figcaption></figcaption></figure>

The next element will be the \<a> link, this could be the previous element itself (for example in the case of having a list of \<a> inside a \<div> container) or else it will have to be inside the previous element with the attribute.

To specify where to display the language name and/or language code, two placeholders will be used which will have to be placed inside the \<a> element (at least one of the two will have to be used).

```
  __LOCALE__
  __LANGUAGE__
```

‍Optionally you can display the selected language in a container that has the attribute data-polyflow-switcher="current", for example in case you want to create a button that opens the dropdown.\
Inside, the same placeholders as before will be used to indicate where to display the data for the current language.

Optionally the element marked with the attribute data-polyflow-switcher="alternative" can have the attribute data-polyflow-switcher-active-class with the value of the css class that you want to use in the active item at the moment.

### **Examples**

Example with a list item:

```html
<div>
  <button data-polyflow-switcher="current">
    __LANGUAGE__ 
    __LOCALE__
  </button>
  <ul>
    <li data-polyflow-switcher="alternative" data-polyflow-switcher-active-class="active">
      <a href="">
        __LOCALE__
        __LANGUAGE__
      </a>
     </li>
  </ul>
</div>
```

Example with a container and inside the links directly:

<pre><code>&#x3C;div>
  &#x3C;button data-polyflow-switcher="current">
    __LOCALE__
    __LANGUAGE__
  &#x3C;/button>
  &#x3C;div>
    &#x3C;a href="" data-polyflow-switcher="alternative" data-polyflow-switcher-active-class="active">
      __LOCALE__
      __LANGUAGE__
    &#x3C;/a>
  &#x3C;/div>
<strong>&#x3C;/div>
</strong></code></pre>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://guides.polyflow.co/language-selectors/custom-language-selector.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.