SwiftLingo

SwiftLingo

Log In Try for free
Docs Get Started Implementing the Language Switcher
Docs

Implementing the Language Switcher

Last updated on January 30, 2026 • 3 min read

On this page

The SwiftLingo Language Switcher is a crucial component for your multilingual website, allowing visitors to seamlessly select their preferred language. This guide provides a step-by-step tutorial on how to integrate and configure the language switcher on your website.

How It Works

The language switcher is a lightweight JavaScript component that you add to your site. It can be displayed as a dropdown menu or a set of buttons and is fully configurable to match your site’s design and user experience needs.

Step 1: Choose an Installation Method

Depending on your website’s platform, you can choose between our dedicated WordPress plugin or a universal script.

Install and activate the SwiftLingo WordPress Plugin. Once activated, simply enter your Site ID in the plugin settings. No manual code changes are required.

Option B: Universal Script

For all other platforms, you can use our universal initialization script.

Step 2: Choose a Placement Strategy

SwiftLingo offers three main ways to place the language switcher:

  • Targeted Element (Recommended): Anchor the switcher relative to an existing element on your page (e.g., your navigation menu) using a CSS selector. This doesn’t require modifying your site’s HTML.
  • Fixed Top Right: The switcher floats in the top-right corner of the screen.
  • Manual (HTML Element): Place a specific <div id="swiftlingo-language-switcher"></div> tag exactly where you want the switcher to appear.

Step 3: Initialize the Switcher (Universal Script only)

Add the initialization script just before the closing </body> tag of your page template.

html 
<script>
  window.swiftlingo = { siteId: 'your-site-id' };
</script>
<script type="module" src="https://cdn.swiftlingo.io/static/js/language-switcher.js"></script>

Configuration Options (Advanced)

While most users configure these settings through the SwiftLingo Dashboard, the switcher supports the following options in the window.swiftlingo object:

OptionTypeDescription
siteIdstringRequired. Your unique site identifier.
positionstringtargeted, top_right, or custom. Defaults to targeted.
targetSelectorstringThe CSS selector to anchor to (e.g., #main-nav). Required if position is targeted.
targetPlacementstringappend, prepend, before, or after. Defaults to append.
stylestringdropdown or buttons. Defaults to dropdown.
autoDetectbooleanAutomatically suggest or switch based on browser settings. Defaults to true.
rememberPrefbooleanSaves the visitor’s choice in their browser. Defaults to true.
showNativeNamesbooleanDisplay language names in their native script (e.g., “Français”). Defaults to false.

Full Example (Universal Script)

Here is a complete example of what your HTML might look like with the language switcher configured to anchor to a navigation menu.

html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Awesome Website</title>
</head>
<body>

<header>
    <nav id="main-nav">
        <a href="/">Home</a>
        <a href="/about">About</a>
        <!-- Switcher will be injected here automatically -->
    </nav>
</header>

<main>
    <h1>Welcome to my website!</h1>
</main>

<!-- SwiftLingo Initialization -->
<script>
  window.swiftlingo = { 
    siteId: 'site_12345',
    position: 'targeted',
    targetSelector: '#main-nav',
    targetPlacement: 'append'
  };
</script>
<script type="module" src="https://cdn.swiftlingo.io/static/js/language-switcher.js"></script>

</body>
</html>

By following these steps, you can provide your users with an intuitive and effective way to navigate the different language versions of your site.

Previous
Quickstart Guide

Was this page helpful?

Your feedback helps us improve.