LI.FI Documentation
LI.FI WebsiteAPI ReferenceHelp / FAQ / Create support ticketRequest API Key
  • 🏡Getting Started
    • ❓What is LI.FI
    • 🌟Why LI.FI?
    • 🆚LI.FI vs Aggregators/DEXs/Bridges
    • 📖LI.FI Terminology
    • ❓FAQ
    • 💡Use Cases
      • Mobile/Gaming Wallets
    • 🏹LI.FI vs. Other Aggregators
    • 🤝Partnership
    • 🌐Powered by LI.FI
  • 🔐Security First
  • ✅List: Chains, Bridges, DEX Aggregators, Solvers
  • 💲Monetization / Take Fees
  • 🔎Transaction Explorer
  • 🔏Rate Limits & API Key
  • How to get integrated by LI.FI?
    • For Bridges
    • For DEXs/Aggregators/Solvers
  • 🆘Technical FAQ
  • LI.FI PRODUCTS
    • Glacis
    • LI.FI Solver
    • LI.FI Intents System
  • LI.FI API
    • ⚙️LI.FI API
      • Transferring Tokens (Example)
      • Requesting supported Chains
      • Requesting all supported Tools
      • Requesting all known Tokens
      • Getting Token Information
      • Getting all possible Connections
      • Requesting a Quote
        • Token Transfer
        • Optimizing quote response timing
        • Cross-Chain Contract Calls
        • Possible Tool Errors
        • Testing your integration
      • Status of a Transaction
      • Requesting Analytics Data
    • ⚔️TX-Batching aka "Zaps"
    • 🏄Solana
      • Request examples
    • 🪙Bitcoin
      • Request examples
    • ⛽LI.Fuel
  • Integrate LI.FI SDK
    • 🚀LI.FI SDK Overview
    • 📦Install LI.FI SDK
    • ⚙️Configure SDK
    • 🪐Configure SDK Providers
    • 📜Request Routes/Quotes
    • 🎯Execute Routes/Quotes
    • ⛓️Chains and Tools
    • 💰Token Management
    • 🕵️Testing Integration
    • 🚗Migrate from v2 to v3
  • INTEGRATE LI.FI WIDGET
    • 🧩LI.FI Widget Overview
    • 📦Install Widget
    • 🎮Select Widget Variants
    • ⚙️Configure Widget
    • 🎨Customize Widget
    • ⚡Widget Events
    • 👛Wallet Management
    • 🌍Internationalization
    • ⚛️Compatibility with Next.js, Remix, Nuxt, etc.
    • 🛣️React Router Compatibility
    • 📖Widget API Reference
    • 🚗Migrate from v2 to v3
  • Smart Contracts
    • Overview
    • Deployments/Contract Addresses
    • Audits
  • Support & Misc.
    • API Status
    • Technical Help Desk & FAQ
    • Create a Partner Ticket
    • Discord Support
    • Telegram Support
    • Twitter
    • Github
    • Licenses
Powered by GitBook
LogoLogo

Connect with us

  • Github
  • Twitter
  • Discord
  • LinkedIn

More Information

  • Help Desk / FAQ
  • API Reference
  • Website
On this page
  • Configure languages
  • Language Resources

Was this helpful?

Export as PDF
  1. INTEGRATE LI.FI WIDGET

Internationalization

Unlock global communities with effortless internationalization support

Last updated 11 months ago

Was this helpful?

LI.FI Widget supports internationalization (i18n) and, with the help of our community, is translated into multiple languages to provide a localized user experience to your users, making it easier for them to understand and interact with the widget.

See supported languages and help us translate by our translation projects on :

Widget

Configure languages

By default, the widget is in English. You can configure the default language, which languages you want to show inside the widget, or in which language your users can see the widget if you hide the in-built language selection.

There are allow, deny, and default options for language configuration.

import { LiFiWidget, WidgetConfig } from '@lifi/widget';

const widgetConfig: WidgetConfig = {
  // hide the language selection part of the UI
  // hiddenUI: ['language'],
  languages: {
    // default to German
    default: 'de',
    // allow German and Spanish languages only
    allow: ['de', 'es'],
    // disable Chinese from being shown in the languages list
    // deny: ['zh'],
  },
};

export const WidgetPage = () => {
  return (
    <LiFiWidget integrator="Your dApp/company name" config={widgetConfig} />
  );
};

Language Resources

You can customize the widget to support any language that your dApp needs by providing language resources.

import { LiFiWidget, WidgetConfig } from '@lifi/widget';
import es from './i18n/es.json';

const widgetConfig: WidgetConfig = {
  languageResources: {
    es,
  },
};

export const WidgetPage = () => {
  return (
    <LiFiWidget integrator="Your dApp/company name" config={widgetConfig} />
  );
};
{
  "language": {
    "name": "Español",
    "title": "Idioma"
  }
}
import { LiFiWidget, WidgetConfig } from '@lifi/widget';

const widgetConfig: WidgetConfig = {
  languageResources: {
    en: {
      button: { swap: 'Test swap' },
    },
  },
};

export const WidgetPage = () => {
  return (
    <LiFiWidget integrator="Your dApp/company name" config={widgetConfig} />
  );
};

Rather than trying to add a language via config, it's best to first consider helping us to translate the language you need by joining our . 🙂

Also, you can customize the existing language resources if you want to adjust some text. Find the complete list of key-value pairs in the reference en.json in our repository .

🌍
Crowdin translation project
here
⚛️Compatibility with Next.js, Remix, Nuxt, etc.
joining
Crowdin
https://crowdin.com/project/lifi-widget