How do I customize the language switch button from Weglot in Webflow?
TL;DR
- Create custom language switch buttons or links in Webflow and style them as desired.
- Use Weglot’s JavaScript API (e.g.,
Weglot.switchTo('fr')) to trigger language changes on click, and hide the default Weglot dropdown using CSS.
To customize the Weglot language switch button in Webflow, you need to style or replace the default dropdown Weglot generates when embedded in your site.
1. Locate the Language Switcher
- Weglot automatically inserts a language switcher element on your site after integration.
- By default, it places a dropdown (typically
<div id="weglot-container">). - You can move or replace this element with a custom switch by targeting its class or using Weglot's JS API.
2. Use a Custom Dropdown or Text Link
- Create your own button, dropdown, or text links inside Webflow.
- Assign each custom element a
clickinteraction using Webflow Interactions or custom JavaScript to trigger the language change.
Example using Webflow buttons:
- Add a button with a
customclass (e.g.,.lang-enor.lang-fr). - Use Webflow’s Element Trigger > Mouse Click (Tap) to run custom code.
3. Use JavaScript to Switch Languages
- Use the Weglot JavaScript API to change language when your custom button is clicked.
- JavaScript:
Weglot.switchTo('fr'); for French
Weglot.switchTo('en'); for English
- Add this code via Page Settings > Footer Custom Code or through Embed elements in Webflow.
4. Remove or Hide Weglot’s Default Dropdown
- Use CSS to hide Weglot's default switcher by targeting its container:
Example:
#weglot-container { display: none !important; }
- Add this CSS in your Page Settings > Inside <style> tag, or to your Webflow Site Settings > Custom Code.
5. Style Your Custom Language Switcher
- Once you've built your custom switch, use Webflow's built-in designer tools to customize fonts, colors, hover effects, spacing, etc.
- Since you’re no longer relying on Weglot's default element, you have full styling control.
6. (Optional) Add Flags or Icons
- Add flag icons or SVGs manually to buttons or links.
- Make sure you style them uniformly with your brand and page layout.
Summary
To customize the Weglot language switcher in Webflow, build your own switcher elements, use Weglot’s JavaScript API to change languages, and hide the default dropdown. This gives you complete design flexibility while maintaining Weglot’s translation functionality.
