LogoLogo
HomepageYouTube ChannelInstall from the AppExchange
  • Home
  • Dynamic Components
  • Flow Components
  • Experience Components
  • Projects
  • 👋Welcome
  • Getting Started
    • Installation & License Management
    • Quick Start Guide
    • Learning the Basics
    • Reactive Data Components
  • Experience Components
    • 🖼️View All Components
    • Accordion
    • Accordion Section
    • Alert
    • Audio
    • Avatar
    • Avatar Group
    • Banner
    • Bar Code
    • Blockquote
    • Button
    • Button Dialog
    • Button Group
    • Button Menu
    • Calendar
    • Card
    • Chip Container
    • Container
    • Data Table
    • Feed
    • Gallery
    • Icon
    • Illustration
    • Image
    • Kanban
    • Language Selector
    • Layout
    • List
    • Map
    • Media Object
    • Metric
    • Navigation
    • Profile Card
    • Progress Bar
    • Progress Circle
    • Progress Indicator
    • Publisher
    • Record Detail
    • Separator
    • Tabs
    • Text Block
    • Timeline
    • Video
  • Properties Panel
    • Appearance
    • Interactions
      • Show Toast
      • Navigate
      • Open Alert Modal
      • Open Confirm
      • Open Flow Dialog
  • Tutorials
    • General
      • Expressions for Aura Sites
      • Expressions for LWR Sites
    • Components
      • Banner
        • With Illustration and Buttons
        • With Content centered
      • Card
        • Creating a MapCard Showcase
      • Data Table
        • Configuring the Data Table to display current related record information
      • Image
        • Utilizing Avonni Image Component for Before-and-After Image Comparisons
      • Layout
        • Configuring the Layout to be responsive
      • Map
        • Set up the map to show record details information
      • Profile Card
        • Set up the Profile Card to display current user information
      • Tabs
    • Interactions
      • Configure the Open Flow Dialog to open a flow by clicking a button
    • Reactive Components
      • Interactive Map
      • Linked Data Tables
      • Guide to Implementing
    • Use Cases
      • Building a record detail page header
      • Creating a MapCard Showcase
      • Creating a Grid Layout
      • Utilizing Avonni Image Component for Before-and-After Image Comparisons
  • HELP
    • How do I contact support?
    • How do I report bugs?
    • Release Notes
    • Security
Powered by GitBook
LogoLogo

Company

  • About Us
  • Pricing

Policies

  • Privacy Policy
  • Terms of Service
On this page
  • Overview
  • Setting the Stage: Basic Configurations
  • Label
  • Language Groups
  • Visual Customization
  • Icon Name & Size
  • Variant
  • Menu Alignment
  • Menu Behavior
  • Menu Trigger
  • Menu Nubbin
  • Menu Title
  • Helpful Hints and Accessibility
  • Tooltip
  • Hide Down Arrow
  • Stretch
  • Disabled
  • Horizontal Alignment

Was this helpful?

  1. Experience Components

Language Selector

Last updated 10 months ago

Was this helpful?

Overview

The Avonni Language Selector component empowers your Experience Cloud sites with seamless multilingual capabilities, enabling visitors to switch between languages effortlessly.

🔀 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.

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.

Variant

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

Menu Alignment

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

Menu Behavior

Menu Trigger

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.

Menu Nubbin

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

Menu Title

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.