For the complete documentation index, see llms.txt. This page is also available as Markdown.

AX - Language Selector

Overview

AX - Language Selector is an Experience Cloud component that displays a language picker on Experience Sites pages, letting portal users switch between available languages.

Use it to provide multilingual support for international customers or partners. The component displays all active languages configured for your Experience Site and updates the page content when users select a different language.

Perfect for global customer portals, international partner sites, multi-region support centers, or any portal serving users who speak different languages.

🔀 Differences between the Salesforce Standard Language vs Avonni Language Selector

The Avonni Language Selector surpasses the standard Salesforce language selector by offering:

  1. Language Grouping: Organize languages by region or other criteria for a user-friendly experience.

  2. Visual Customization: Tailor the look and feel of the selector to match your website's design.

  3. Advanced Functionality: Benefit from features like menu nubbin customization and flexible menu triggers unavailable in the standard selector.

With the Avonni Language Selector, you can create a multilingual experience that is functional, visually appealing, and perfectly aligned with your website's unique identity.

Configuration

Setting the Stage: Basic Configurations

Label

  • Customize the label displayed above the language selection menu.

  • Alternatively, toggle the "Use current language as a label" option to dynamically display the currently selected language as the label.

Language Groups

  • Organize multiple languages into distinct columns using the Language Groups feature.

  • Ensure that the languages you select are active and available on your site.

Visual Customization

Icon Name & Size

Choose a symbol representing language diversity (a globe, perhaps?) and adjust its size to fit your site's aesthetic. Instead of a Lightning Design System icon, you can supply a CMS Icon Source or an Icon URL or Expression. Toggle Use Current Language As Label to display the currently selected language as the button label.

Variant

Select a visual style (bare, bare-inverse, base, border, border-filled, etc.) that aligns with your site's aesthetics.

Select a visual style (bare, bare-inverse, base, border, border-filled, etc.) that aligns with your site's aesthetics.

Will your visitors click a button, hover over it, or focus on it to reveal the language options? Choose the most intuitive interaction for your audience.

This little arrow is a subtle touch that points from the menu back to the component, like a directional sign.

Give your menu a clear title (e.g., "Choose Your Language") for clarity.

Helpful Hints and Accessibility

Tooltip

When users hover over the component, provide a brief explanation or instructions via a tooltip.

Hide Down Arrow

You can hide the down arrow icon typically associated with dropdowns if you prefer a cleaner look.

Stretch

This option allows the component to expand and fill its container, ensuring a polished look.

Disabled

Temporarily disable the language selection functionality when needed.

Horizontal Alignment

Control the horizontal alignment of the component within its container (left, center, right).

With the Avonni Language Selector, your Experience Cloud site becomes a welcoming hub for a global audience. Visitors can choose their preferred language effortlessly, ensuring a smooth and enjoyable journey through your content.

Styling

Controls the space around the component (Top / Bottom / Left / Right).

  • Color / Color Active / Color Hover: Set the trigger button background for the default, active, and hover states.

  • Color / Color Active / Color Hover: Set the label and icon color for each state.

  • Font Size / Font Style / Font Weight / Font Family: Control the label typography.

  • Horizontal Alignment: Align the label and icon.

  • Color / Color Active / Color Hover: Set the border color for each state.

  • Size / Style / Radius: Control the trigger button border.

  • Color Border / Size / Style / Radius / Object Fit: Style a custom image used as the trigger icon.

Last updated

Was this helpful?