Skip to content
SwiftLingoDocs

Adding the language switcher

The language switcher is a small widget that lets visitors move between your original site and its translations. It always links to the same page in the other language.

In the dashboard: SettingsSwitcherOpen Switcher

Install it

Section titled “Install it”

The Switcher page offers two installation methods. Pick the one for your site.

Works on any website.

  1. Choose Universal on the Switcher page.

  2. Copy the Initialization Script. It already contains your site ID.

  3. Add it to your site’s template, in the <head> or just before </body>, so it loads on every page:

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

Choose where it appears

Section titled “Choose where it appears”

Under Placement Strategy, choose one of three options and click Save Changes:

  • Targeted Element (recommended). Anchors the switcher to an element that’s already on your page, such as your navigation. Enter its Target CSS Selector (for example #main-nav) and an Injection Strategy: inside at the end (Append), inside at the start (Prepend), or just before or after the element.

  • Fixed Top Right. Floats in the top-right corner of the screen.

  • Manual (HTML Element). Paste the HTML Element from the dashboard where you want the switcher to appear:

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

Next steps

Section titled “Next steps”