Search Docs…

Search Docs…

Guides

How to Use the Personalized Selector on the Canvas

How to Use the Personalized Selector on the Canvas

The Personalized Selector is the most flexible language selector option in FrameLoc. Unlike the Simple Selector, it gives you complete creative freedom — you can design it directly in Framer with no design limitations whatsoever.

Apply Translations and Choose Personalized

From the FrameLoc plugin homepage, click Apply Translations once you are happy with all your translations. On the confirmation screen, click Launch, then choose Personalized instead of Basic. On the next screen, select the pages you want to apply the selector to and click Apply. The Personalized Selector component will be placed directly on the canvas of every selected page.

Design It Your Way

Once placed on your canvas, you can click into the component and modify its design however you like using Framer's native design tools. Shapes, colors, typography, animations — there are no constraints, making it the ideal choice for projects where the language selector needs to match a specific brand identity.

Personalized Selector shown in its closed and open states on the Framer canvas, displaying the French flag
The Lang Component

Inside the Personalized Selector, you will find the Lang component. This is the individual language item — essentially the flag displayed inside the selector. It has two configurable props:

Langue (ISO) — Enter the ISO 639-1 two-letter code of the language you want to display (e.g. fr for French, en for English). FramerLoc uses this code to automatically retrieve the correct country flag and to link it to the right translation. Make sure this code matches exactly the language you added in the FramerLoc plugin.

Border Radius — Controls the border radius of the flag, letting you go from sharp corners to a fully rounded shape.

Object Fit — Defines how the flag image fills its container (Cover by default).

Lang component props panel showing the Langue (ISO) field set to "fr", Border Radius, and Object Fit options
The ReorderFlags Component

Inside the selector, you will also notice an invisible component called ReorderFlags. You do not need to touch or configure it at all — it works silently in the background. Its job is to manage the flag order logic: when a user selects a language, that flag moves to the front of the selector, keeping the UI clean and intuitive without any manual work on your part.

Create a free website with Framer, the website builder loved by startups, designers and agencies.