How do I customize the language switch button from Weglot in Webflow?

Customizing the Weglot language switch button in Webflow involves modifying the style, placement, or type of language selector Weglot provides. Here's how you can fully control its appearance and behavior.

1. Choose the Language Switcher Type in Weglot

• Log in to your Weglot Dashboard and go to your project.
• Under Settings > Language Switcher, choose from options like:
• Dropdown
• Flags with language names
• Just flags
• Custom code (manual placement)
• Select the preferred option and save.

2. Style the Switcher with Custom CSS in Webflow

• Open your Webflow project, and go to Pages > Page Settings (or Project Settings > Custom Code for site-wide changes).
• Under Inside Head tag, enter your custom CSS targeting Weglot’s classes, such as:
• .weglot-container
• .weglot-dropdown
• .wg-element
• For example, to change font size or alignment:
• .weglot-container { font-size: 16px; }
• .weglot-container { position: absolute; top: 20px; right: 20px; }

3. Add the Switcher to a Custom Location

• By default, Weglot adds the switcher automatically, but you can use manual placement.
• In the Weglot Dashboard > Language Switcher > Integration Options, enable Manual and follow the instructions.
• Webflow doesn’t support raw HTML widgets in Designer directly, but you can:
• Add a HTML Embed element where you want the switcher.
• Paste the Weglot placeholder: <div class="weglot-container"></div> (note: Webflow will sanitize this in the Designer; use Page Settings or Custom Code if needed).
• Alternatively, move the switcher with JS (e.g., in Before body tag custom code):
• document.querySelector('.weglot-container').appendTo(document.querySelector('.your-target-class'));

4. Hide the Default Weglot Button (If Needed)

• If you manually relocate the button or create a custom switcher, you may want to hide the default one:
• Use custom CSS: .weglot-container { display: none !important; }
• Or conditionally hide it based on screen width for responsive design.

5. Use Custom Flags or Text Values

• Customize language names using Weglot’s Language Names option in Dashboard > Settings > Language Switcher.
• For custom flags or labels:
• Target Weglot classes with CSS and replace images via background-image or pseudo-elements.
• Use !important if Weglot’s styles override your edits.

Summary

To customize the Weglot language switch button in Webflow, choose your switcher type in Weglot, adjust its style and position using Webflow’s Custom Code panel, and optionally apply manual placement or advanced styling via CSS. This gives you full control over the switcher's appearance and integration.