SwiftLingo provides a ready-to-use language switcher that you can easily integrate into your website. This guide explains how to configure its placement, behavior, and visual appearance.

Configuration Options

You can manage your language switcher settings directly from the SwiftLingo Dashboard under Site Settings > Language Switcher.

Placement Strategy

• Targeted Element (Recommended): Anchor the switcher relative to an existing element on your page (e.g., your navigation bar).
• Fixed Top Right: The switcher floats in the top-right corner of the screen.
• Manual (HTML Element): You place a specific <div> tag in your HTML exactly where you want the switcher to appear.

Behavioral Settings

• Remember preferences: Saves the visitor’s language choice in their browser so they don’t have to select it again on future visits.
• Auto-detect language: Automatically suggests or switches to the language that matches the visitor’s browser settings.
• Native language names: Displays language names in their own script (e.g., “Deutsch” instead of “German”).

Custom CSS Overrides

For advanced users and developers, SwiftLingo allows you to provide Custom CSS to fine-tune the appearance of the switcher so it perfectly matches your brand.

How it Works

Custom CSS is automatically sandboxed. This means your styles are confined to the language switcher widget and won’t accidentally break the layout of the rest of your website.

Behind the scenes, we wrap your CSS in a @scope (.sl-wrapper) block. You can target the following classes:

• .sl-wrapper: The main container.
• .sl-dropdown-button: The button that opens the dropdown.
• .sl-dropdown-content: The container for language options.
• .sl-language-option: Individual language links.
• .sl-button: Used when the switcher style is set to “Buttons”.
• .fi: The flag icons.

Security & Validation

To ensure the stability and security of your website, SwiftLingo performs strict validation on all Custom CSS.

Blocked Expressions

For security reasons, the following expressions and keywords are strictly prohibited:

• url(): External resources (images, fonts) cannot be loaded via CSS.
• @import: External stylesheets cannot be imported.
• @charset: Character set definitions are not allowed.
• javascript: Any attempt to use javascript: URIs is blocked.
• expression(): IE-specific expressions are blocked.
• -moz-binding: Firefox-specific bindings are blocked.

Example Overrides

Changing the background color:

.sl-dropdown-button {
    background-color: #f0f0f0;
    border-radius: 8px;
}

Adjusting spacing:

.sl-wrapper {
    margin-top: 20px;
    margin-right: 10px;
}

Need More Customization?

If the built-in switcher doesn’t meet your needs even with Custom CSS, you can build a completely custom language switcher or add custom css to your own website.