How to Use the Browser Language Detector This plugin automatically identifies the user's preferred language settings from their browser (e.g., Chrome, Safari, Edge) so you can localize your app instantly.

Getting Started
Place the "Browser Language Detector" element anywhere on your page. It is invisible to your users but provides three powerful data points.

Exposed States
You can reference these states anywhere in your Bubble app (e.g., in a Text element or a "Set Language" workflow):

language (Text): Returns the full locale string, including the region (e.g., en-US, fr-FR, or pt-BR).

language short (Text): Returns only the primary ISO language code (e.g., en, fr, or pt). This is perfect for simple translation logic.

languages (List of Text): Returns a list of all preferred languages saved in the user's browser settings, ordered by priority.

Common Use Cases:
Auto-Translation: Use a workflow "When Page is Loaded" to set your app's language variable to Browser Language Detector A's language short.

Conditional Content: Show specific banners or messages only if Browser Language Detector A's language contains "es" (Spanish).

User Onboarding: Pre-fill a "Language" dropdown in a signup form so the user doesn't have to search for their native tongue.

Note: The detection happens instantly as soon as the element is initialized on the page.



Demo Editor Link: https://bubble.io/page?id=hks-demos&test_plugin=1775226373493x243287994150158340_current&tab=Design&name=browser_language_detector&type=page&elements=cmMld0

Demo Page Link: https://hks-demos.bubbleapps.io/version-test/browser_language_detector?debug_mode=true