This guide shows how to add Web Linguist’s language switcher inside a specific spot on your website, instead of letting it appear in a default position. Choose this method if you want full control over exactly where the language switcher shows up (for example: inside your header, navigation, or footer).

1) Open the language switcher settings

1. Log in to your weblinguist.ai dashboard
2. Go to License Settings
3. Click Customize
4. Find Display Mode and select Embedded

Once you choose Embedded, you’ll see extra options.

2) Tell Web Linguist where to place the language switcher (CSS selector)

In Embedded mode, you’ll enter a CSS selector. This tells Web Linguist which element on your page should “hold” the language switcher.

Examples of CSS selectors

• #header (an element with id=”header”)
• .language-container (an element with class=”language-container”)
• nav ul
• footer .links

Important requirements

• The selector must match an element on every page where you want the language switcher to appear.
• If Web Linguist can’t find your selector on a page, the language switcher will fall back to the default location: document.body
• A valid selector is required to use Embedded mode.

Required CSS for the mount element

The element you target must have:

position: relative;

Why? The language switcher uses absolute positioning. If the parent element isn’t position: relative, it may show up in the wrong place or look misaligned.

✅ Example:

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

<style>
  #header-switcher { position: relative; }
</style>

3) Choose your embed style

After you add a selector, pick how the language switcher should look:

• Language Names and Icons (language name + flag icon)
• Icons Only (flags only, more compact)

You can preview both right in the dashboard.

4) Pick an accent color

Choose an Accent color to control the highlighted/active language button. This helps match the language switcher to your site’s branding.

5) Optional: Add custom CSS (language switcher only)

You can add CSS in the Custom CSS section to fine-tune the language switcher’s appearance.

Good to know:

• This CSS applies only inside the language switcher
• It won’t affect the rest of your site
• Useful for spacing, button sizing, and small visual tweaks

You’re done 🎉

Save your changes, and the language switcher will appear embedded wherever your CSS selector points.

If anything looks off (or it isn’t showing where expected), double-check:

• The selector exists on that page
• The target element has position: relative;