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

To customize the Weglot language switcher in Webflow, you need to adjust its appearance and/or behavior using CSS or by modifying the dropdown's location within your Webflow project.

1. Locate the Weglot Language Switcher Element

• When you integrate Weglot, it automatically injects a default language switcher into your site, typically as a dropdown (e.g., at the bottom-right).
• The switcher is inside a <div class="weglot-container">.

2. Move the Language Switcher to a Custom Location

• Add a custom element in your Webflow project where you want the switcher.
• Give the element a unique custom ID (e.g., lang-switcher).
• Go to Weglot Dashboard > Settings > Language Button and under "Custom button location", set the selector as #lang-switcher.
• The switcher will now render inside your custom Webflow element.

3. Customize Styling via CSS

• Use Webflow's Embed component to add custom CSS or use the Page > Custom Code section.
• Examples of common customizations:
• Hide flags: .weglot-container .wg-flags { display: none; }
• Use language codes instead of full names: .weglot-container .wg-dropdown .wg-li span:not(.wg-current) { display: none; }
• Adjust font, colors, hover effects, margin, padding, etc., by targeting .weglot-container or .wg-dropdown.

4. Customize the Language Switcher Type (Icons, Names, etc.)

• In Weglot Dashboard > Settings > Language Button, choose:
• Full language name
• Short name (2-letter codes like EN/FR)
• With or without flag
• This affects how the button is displayed and can be combined with your CSS.

5. Use JavaScript for Advanced Behavior (Optional)

• You can use JavaScript to trigger language changes, e.g., on a button click.
• Use Weglot.switchTo('fr') or Weglot.switchTo('en') to program language changes programmatically.
• Add this inside a custom embed and trigger it using Webflow’s interactions if needed.

Summary

To customize the Weglot switcher in Webflow, move it to a specific element using a custom ID, then apply CSS to change its appearance. For advanced control, use Weglot Dashboard settings and optional JavaScript for triggering language changes.