A simple, lightweight, and customizable translator component for your web application.
| Screenshot 1 | Screenshot 2 | Screenshot 3 |
|---|---|---|
 |
 |
 |
Download the following:
oranbyte-google-translator.cssoranbyte-google-translator.js/flags/folder (contains SVG icons for each language)
Place the files in your project like this:
/css
oranbyte-google-translator.css
/js
oranbyte-google-translator.js
/flags
en.svg
hi.svg
ar.svg
es.svg
...etc
Note: Keep the
/flagsfolder in the same directory as theoranbyte-google-translator.jsfile.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<link rel="stylesheet" href="/css/oranbyte-google-translator.css">
</head>
<body>
<script src="/js/oranbyte-google-translator.js"></script>
</body>
</html>Place the following where you want the language selector:
<div id="oranbyte-google-translator"></div>Use the data-default-lang attribute to define the default language:
<div id="oranbyte-google-translator" data-default-lang="hi"></div>Use the data-languages attribute to restrict language options:
<div id="oranbyte-google-translator" data-languages="en,hi,ar,fr,es,it"></div>
⚠️ Note: Only a few flag icons are provided for performance reasons.
If a language flag is missing, download it from Iconify Flag Icons and add it to the/flagsfolder using the language code as the file name (e.g.,fr.svg).
You can apply styles to control how the language selector looks.
<div id="oranbyte-google-translator"
data-lang-root-style="text-flag"
data-lang-list-style="text-flag">
</div>| Style | Description |
|---|---|
code-flag |
Default: Flag + Language Code |
text-flag |
Flag + Language Name |
flag |
Flag Only |
code |
Language Code Only |
text |
Language Name Only |
<div id="oranbyte-google-translator"
data-default-lang="hi"
data-languages="en,hi,ar,fr"
data-lang-root-style="flag"
data-lang-list-style="flag">
</div>Pull requests are welcome!
For major changes, please open an issue first to discuss what you'd like to change.
If you found this project helpful, please consider giving it a star!
Thanks for using Google Web Translator!