# Translations

### Live Demo

The example site has a full working translation demo.

{% embed url="<https://www.freshhealth.co/>" %}
In this demo you can see the translation widget on the bottom left of the page
{% endembed %}

### How To Install

To install the Freshpaint Translation snippet on your site you need to have three pieces of information

1. Your environment ID ([where-do-i-find-my-environment-id](https://documentation.freshpaint.io/reference/faqs/where-do-i-find-my-environment-id "mention"))
2. What languages does your site want to support  (see our [list](#supported-languages) for our supported languages and their language codes).
3. What UI handler would you like to use and the appropriate handler settings (See specific [handler instructions](#snippets))

Once you have the above information you can edit your snippet and paste it into your website source code.

### Snippets

We currently have three UI styles clients can choose from.  Once you choose the one you like, follow the instructions on how to edit it to get all the appropriate information in the snippet and placed on your site.

#### Floating UI

This format is a simple UI element that floats on top of the page on either the lower left or the right side of the page.  This element is the easiest to install because it doesn't require any existing HTML on the page to inject itself.

<figure><img src="https://1666823438-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MA7aDqsXMFbUsWVqonF%2Fuploads%2FASOGnbGqlfOaG4nrYmNL%2FScreenshot%202024-06-10%20at%2010.44.49%E2%80%AFAM.png?alt=media&#x26;token=f5cc2af6-0c14-4f4d-9cd4-80df99a69df2" alt=""><figcaption><p>UI elements are subject to modification based on your site's CSS.</p></figcaption></figure>

To edit this snippet follow these instructions:

1. Replace `ENV_ID_HERE` with your [Environment ID](https://documentation.freshpaint.io/reference/faqs/where-do-i-find-my-environment-id).
2. Decide if you want the floating UI on the left or right.  This snippet is set to left but the word `left` can be replaced with `right`.
3. Languages
   1. Decide what languages you want, you do not need to include English (In our example we will use Mexican Spanish, Russian, and Dutch)
   2. Find your language codes (In our example we have `es-MX`, `ru`, and `nl`)
   3. Format your languages as comma separated strings (`"es-MX", "ru", "nl"`)
   4. Replace `LANGUAGES_HERE` with your list
4. Paste this customized snippet onto your site.

{% code overflow="wrap" %}

```html
<script>(function(t){typeof define=="function"&&define.amd?define(t):t()})(function(){"use strict";((t,a,c,i=[],r=[])=>{let e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="//freshpaint-cdn.com/translation/translate.js",e.onload=function(){new Translate(document.documentElement,t,Translate.handlerFactory(a,...c),i,r)};let n=document.getElementsByTagName("script")[0];n?n.parentNode.insertBefore(e,n):document.head.appendChild(e)})("ENV_ID_HERE","floating",["left",[LANGUAGES_HERE]])});</script>
```

{% endcode %}

#### Inline Window UI

This format is takes up less space but is a little more complex to install since the website needs a destination of where it needs to be inserted.

<figure><img src="https://1666823438-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MA7aDqsXMFbUsWVqonF%2Fuploads%2FeJL4vRudKHcrl9RBXaqB%2FScreenshot%202024-06-10%20at%2010.47.32%E2%80%AFAM.png?alt=media&#x26;token=64d45604-9313-4fd3-9a66-e4722664077b" alt=""><figcaption><p>UI elements are subject to modification based on your site's CSS.</p></figcaption></figure>

To edit this snippet follow these instructions:

1. Replace `ENV_ID_HERE` with your [Environment ID](https://documentation.freshpaint.io/reference/faqs/where-do-i-find-my-environment-id).
2. Insert an HTML div on your website with the ID `fp_translate`.  If you need to use a different ID replace `fp_translate` in the snippet with the appropriate div ID.
   1. `<div id="fp_translate"></div>`
3. Languages
   1. Decide what languages you want, you do not need to include English (In our example we will use Mexican Spanish, Russian, and Dutch)
   2. Find your language codes (In our example we have `es-MX`, `ru`, and `nl`)
   3. Format your languages as comma separated strings (`"es-MX", "ru", "nl"`)
   4. Replace `LANGUAGES_HERE` with your list
4. Paste this customized snippet onto your site.

{% code overflow="wrap" %}

```html
<script>(function(t){typeof define=="function"&&define.amd?define(t):t()})(function(){"use strict";((t,a,c,i=[],r=[])=>{let e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="//freshpaint-cdn.com/translation/translate.js",e.onload=function(){new Translate(document.documentElement,t,Translate.handlerFactory(a,...c),i,r)};let n=document.getElementsByTagName("script")[0];n?n.parentNode.insertBefore(e,n):document.head.appendChild(e)})("ENV_ID_HERE","window",["fp_translate",[LANGUAGES_HERE]])});</script>
```

{% endcode %}

#### Basic UI

This format is our most basic UI.  This element is meant for customers who need very little out of the box functionality and want to completely customize their experience.

<figure><img src="https://1666823438-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MA7aDqsXMFbUsWVqonF%2Fuploads%2Fjpy4ky0l87bMCAwLVfbz%2FScreenshot%202024-06-10%20at%2010.48.10%E2%80%AFAM.png?alt=media&#x26;token=c15be61a-f372-4a92-8174-f18e96e983a8" alt=""><figcaption><p>UI elements are subject to modification based on your site's CSS.</p></figcaption></figure>

To edit this snippet follow these instructions:

1. Replace `ENV_ID_HERE` with your [Environment ID](https://documentation.freshpaint.io/reference/faqs/where-do-i-find-my-environment-id).
2. Insert an HTML div on your website with the ID `fp_translate`.  If you need to use a different ID replace `fp_translate` in the snippet with the appropriate div ID.
   1. `<div id="fp_translate"></div>`
3. Languages
   1. Decide what languages you want, you do not need to include English (In our example we will use Mexican Spanish, Russian, and Dutch)
   2. Find your language codes (In our example we have `es-MX`, `ru`, and `nl`)
   3. Format your languages as comma separated strings (`"es-MX", "ru", "nl"`)
   4. Replace `LANGUAGES_HERE` with your list
4. Paste this customized snippet onto your site.

{% code overflow="wrap" %}

```html
<script>(function(t){typeof define=="function"&&define.amd?define(t):t()})(function(){"use strict";((t,a,c,i=[],r=[])=>{let e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="//freshpaint-cdn.com/translation/translate.js",e.onload=function(){new Translate(document.documentElement,t,Translate.handlerFactory(a,...c),i,r)};let n=document.getElementsByTagName("script")[0];n?n.parentNode.insertBefore(e,n):document.head.appendChild(e)})("ENV_ID_HERE","basic",["fp_translate",[LANGUAGES_HERE]])});</script>
```

{% endcode %}

### Supported Languages

| Language Code | Language Name         |
| ------------- | --------------------- |
| af            | Afrikaans             |
| sq            | Albanian              |
| am            | Amharic               |
| ar            | Arabic                |
| hy            | Armenian              |
| az            | Azerbaijani           |
| bn            | Bengali               |
| bs            | Bosnian               |
| bg            | Bulgarian             |
| ca            | Catalan               |
| zh            | Chinese (Simplified)  |
| zh-TW         | Chinese (Traditional) |
| hr            | Croatian              |
| cs            | Czech                 |
| da            | Danish                |
| fa-AF         | Dari                  |
| nl            | Dutch                 |
| en            | English               |
| et            | Estonian              |
| fa            | Farsi (Persian)       |
| tl            | Filipino, Tagalog     |
| fi            | Finnish               |
| fr            | French                |
| fr-CA         | French (Canada)       |
| ka            | Georgian              |
| de            | German                |
| el            | Greek                 |
| gu            | Gujarati              |
| ht            | Haitian Creole        |
| ha            | Hausa                 |
| he            | Hebrew                |
| hi            | Hindi                 |
| hu            | Hungarian             |
| is            | Icelandic             |
| id            | Indonesian            |
| ga            | Irish                 |
| it            | Italian               |
| ja            | Japanese              |
| kn            | Kannada               |
| kk            | Kazakh                |
| ko            | Korean                |
| lv            | Latvian               |
| lt            | Lithuanian            |
| mk            | Macedonian            |
| ms            | Malay                 |
| ml            | Malayalam             |
| mt            | Maltese               |
| mr            | Marathi               |
| mn            | Mongolian             |
| no            | Norwegian (Bokmål)    |
| ps            | Pashto                |
| pl            | Polish                |
| pt            | Portuguese (Brazil)   |
| pt-PT         | Portuguese (Portugal) |
| pa            | Punjabi               |
| ro            | Romanian              |
| ru            | Russian               |
| sr            | Serbian               |
| si            | Sinhala               |
| sk            | Slovak                |
| sl            | Slovenian             |
| so            | Somali                |
| es            | Spanish               |
| es-MX         | Spanish (Mexico)      |
| sw            | Swahili               |
| sv            | Swedish               |
| ta            | Tamil                 |
| te            | Telugu                |
| th            | Thai                  |
| tr            | Turkish               |
| uk            | Ukrainian             |
| ur            | Urdu                  |
| uz            | Uzbek                 |
| vi            | Vietnamese            |
| cy            | Welsh                 |