Translations

Freshpaint offers a HIPAA-compliant translation widget giving customers access to 74 supported languages.

Live Demo

The example site has a full working translation demo.

Welcome to Fresh Health

In this demo you can see the translation widget on the bottom left of the page

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?)
2. What languages does your site want to support (see our list 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)

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.

UI elements are subject to modification based on your site's CSS.

To edit this snippet follow these instructions:

1. Replace ENV_ID_HERE with your 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.

<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>

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.

UI elements are subject to modification based on your site's CSS.

To edit this snippet follow these instructions:

1. Replace ENV_ID_HERE with your 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.

<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>

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.

UI elements are subject to modification based on your site's CSS.

To edit this snippet follow these instructions:

1. Replace ENV_ID_HERE with your 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.

<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>

Supported Languages

Language Code	Language Name