Support multiple languages
Features and advanced usage of language settings
Our embeds will automatically detect your end user's browser language preference to determine what language the embed will render in. If the language is not supported by our embed, a default language will be displayed. The default language is English US.
Language / Locale | Support | Code |
English US | Default | en |
Chinese (Simplified) | Yes | zh |
Danish | Yes | da |
French | Yes | fr |
German | Yes | de |
Italian | Yes | it |
Polish | Yes | pl |
Spanish | Yes | es |
Norwegian | Yes | no |
Brazilian Portuguese | Yes | pt-BR |
On the Billflow dashboard, you will find the settings form for each embeds that looks like the following screenshot. In the following sections, we describe the with an example value for each settings field.
This is a way for you to change some text for the language you chose. You can refer to the language files for your desired language to find the right key-value pairs and change the value to override the text.
You can put your custom translation in the box highlighted in this screenshot
For example:
{
"SectionTitle_Pricing": "欢迎，请选择一个计划开始！"
}
A backend for the custom translation files that you'd like to provide.
https://storage.googleapis.com/your-i18n-custom/{{lng}}/{{ns}}.json"
The configuration options do not need to be changed at all for Internationalization to work, but it does unlock the ability for you to pass in your own language file, or change the default text in the embeds easily.
Using this functionality you can also change the text of the Billflow pages for your default language. Use the keys in the translation files to lookup the text you want to change, and pass in your desired wording like so:
Property Name | Type | Required | Description |
i18n.defaultLng | string | no | Changes the default language of the embed, overriding user browser preference. Example: "zh" |
i18n.resources | array | no | An array of resource objects. Each object is a resource for a language and namespace. |
i18n.resources[0].lng | string | yes | The language of this resource object |
i18n.resources[0].ns | string | yes | The namespace of this resource object |
i18n.resources[0].resource | object | yes | The resource object with key value pairs to provide a translation string to the language and namespace defined, where value is the translated string. |
i18n.backend | object | no | You can use a backend, a file system of your own such as AWS s3 or Google cloud storage to provide translation files. |
i18n.local_storage_caching | boolean | no | To disable use of browser local storage for caching i18n files, set this property to false, the default is true. Use this option if your application runs in an environment where local storage is not permitted. |
You can provide a backend URL to the configuration, our embed will automatically fetch each file at render time.
Important!
Make sure CORS is enabled for dashboard.billflow.io and your website/webapp's domain on your server.
Translation files are cached for 3 hours in browser, when implementing a custom language file, please use a fresh Incognito window to see the changes.
Example: Using google cloud storage
- 1.Create a bucket named your-i18n-custom
- 2.Create a folder structure and files as follows (we are using French as an example)
- 1.fr
- 1.common.json
- 2.portal.json
- 3.pricing.json
- 4.custom.json
- 3.
You can even use this way to define your own custom English version, if for any reason you would like to change how your embed text is rendered in English. For example, if you want to change the Pricing page heading to say "Welcome, please pick a plan to start!" instead of the default text "Pricing", you can do that this way.
// Example i18n configuration
"options": {
"i18n":{
"defaultLng":"zh",
"resources":[
{
"lng":"zh",
"ns":"custom",
"resource":{
"SectionTitle_Pricing":"欢迎，请选择一个计划开始！"
}
}
],
"backend":{
"loadPath":"https://storage.googleapis.com/your-i18n-custom/{{lng}}/{{ns}}.json"
}
}
}
These are the default English text that we are using in our embeds, you can download them and translation / change them the way you like it, then use your version in the embed!
Last modified 1yr ago