Linguify Translation Widget

This page demonstrates the Linguify client-side translation widget. The widget has automatically loaded and should appear in the bottom-right corner.

Click the language button to translate this page

The widget supports automatic translation of your website into multiple languages with a clean, minimal floating language selector. No coding required from your end!

Easy Integration

Add two script tags to enable translations. That's it!

Smart Caching

Translations are cached in memory for instant language switching.

Auto-Detection

Automatically detects your browser language and offers translation.

SPA Support

Works with dynamically added content via MutationObserver.

Persistent

Remembers your language choice across page reloads.

Zero Dependencies

Vanilla JavaScript - no jQuery, no libraries, no bloat.

How to Embed

Add this code to your website's HTML <head> section:

<script>
  window.LINGUIFY_CONFIG = {
    apiKey: "lfy_your_api_key_here",
    targetLanguages: ["es", "fr", "de", "it", "pt", "nl", "pl", "ja", "zh", "ru", "ko", "ar"]
  };
</script>
<script src="https://cdn.linguify.com/widget.js" async></script>

Features

13 Languages Supported: English, Spanish, French, German, Italian, Portuguese, Dutch, Polish, Japanese, Chinese, Russian, Korean, Arabic
Floating Language Selector: Clean pill-shaped button in bottom-right corner with country flag emojis
Automatic Detection: Detects user's browser language and offers instant translation
DOM Scanning: Intelligently walks the DOM collecting visible text nodes while skipping scripts, styles, inputs, etc.
Batch Translation: Groups text in efficient 50-text-per-request batches
Smart Caching: In-memory cache means instant switching between cached languages
MutationObserver: Automatically translates dynamically added content
Persistent Preferences: Saves language choice to localStorage
Loading Indicator: Shows spinning loader during translation
Skip Attribute: Use data-linguify-ignore to skip elements
Global API: window.Linguify.destroy() to remove the widget
Lightweight: 11KB minified, zero dependencies

What You'll See

Look in the bottom-right corner of your screen. You should see a small language selector button with a flag emoji and the text "English" (or your current language). Click it to expand the menu and select a different language. The page will translate instantly!

Technical Details

Bundle Size: 11KB minified (no gzip)
Dependencies: None - vanilla TypeScript
Browser Support: ES2020+ (Chrome 80+, Firefox 74+, Safari 14+, Edge 80+)
API Used: Fetch, Promise, MutationObserver, TreeWalker, localStorage
Build Tool: esbuild (IIFE format)