Implementing the Language Switcher

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. Once installed, it automatically detects the available languages for the current page and provides the necessary links for users to switch between them.

Step 1: Add the Script to Your Website

First, you need to include the SwiftLingo switcher script in your website’s HTML. The best place to add this script is just before the closing </body> tag of your page template.

<script src="https://cdn.swiftlingo.io/switcher.js"></script>

Step 2: Create a Placeholder Element

Next, you need to add an empty element in your HTML where you want the language switcher to appear. This is typically in your website’s header or footer. Give this element a unique ID or class so you can target it in the initialization script.

<div id="language-switcher"></div>

Step 3: Initialize the Switcher

Finally, add a second script block to initialize the language switcher with your specific configuration. This script should come after you’ve included switcher.js.

Here is a typical initialization script:

<script>
	SwiftLingo.init({
		selector: '#language-switcher',
		hostname: 'your-website.com',
		style: 'dropdown', // or "buttons"
		position: 'auto',
		rememberPreference: true,
		autoDetect: true,
		showNativeNames: false,
		targetLanguage: ['fr', 'de', 'es'],
		originalLanguage: 'en'
	});
</script>

Configuration Options

You can customize the language switcher by passing a configuration object to the SwiftLingo.init() function. Here are the available options:

Option	Type	Default	Description
`selector`	`string`	`'#language-switcher'`	The CSS selector for the HTML element where the switcher will be rendered.
`hostname`	`string`	Required	Your website’s primary domain name (e.g., `example.com`).
`style`	`string`	`'dropdown'`	The display style of the switcher. Can be `'dropdown'` or `'buttons'`.
`position`	`string`	`'auto'`	Controls the positioning. `'auto'` integrates it into the selector element. `'top-right'` makes it fixed to the top right of the viewport.
`rememberPreference`	`boolean`	`true`	If `true`, the user’s selected language is stored in `localStorage` and used for subsequent visits.
`autoDetect`	`boolean`	`true`	If `true`, the switcher will attempt to set the initial language based on the user’s browser settings.
`showNativeNames`	`boolean`	`false`	If `true`, language names are displayed in their native script (e.g., “Deutsch” instead of “German”).
`targetLanguage`	`array`	`[]`	An array of two-letter language codes (e.g., `['fr', 'de']`) for the languages you are translating into.
`originalLanguage`	`string`	Required	The two-letter code for your website’s original language (e.g., `'en'`).

Full Example

Here is a complete example of what your HTML might look like with the language switcher installed in the header.

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

<header>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
        <!-- Language switcher will be placed here -->
        <div id="language-switcher"></div>
    </nav>
</header>

<main>
    <h1>Welcome to my website!</h1>
    <p>This is some content.</p>
</main>

<footer>
    <p>&copy; 2025 My Awesome Website</p>
</footer>

<!-- SwiftLingo Scripts -->
<script src="https://cdn.swiftlingo.io/switcher.js"></script>
<script>
	SwiftLingo.init({
		selector: '#language-switcher',
		hostname: 'your-website.com',
		style: 'dropdown',
		targetLanguage: ['fr', 'de', 'es'],
		originalLanguage: 'en'
	});
</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.

SwiftLingo