setup
COMPONENTS
INTEGRATIONS
FAQ
How to Add a Custom Popup to Map Markers in Framer
A popup that opens when a visitor clicks a marker. Unlike the hover popup, this can show a fully custom design - any component you build in Framer.
Turn it on/off and set it up under Elements → Marker Popup.
Setup
Turn on Enabled.
A Marker popup connection slot appears at the top level of the component (outside the Elements section) - connect your own popup design (a Framer component) to it.
Use Field Mappings to send your data into that popup design, as below.
Style the Close Button (Size, Icon, Background, Border, Radius).
Sending data into the popup (Field Mappings)
Each row in Field Mappings has:
Field - the name of the data field (from your manual point or CMS row).
Popup Variable - the property name on your connected popup component that should receive it.
For step-by-step details on how this connects to manual points, see Manual Data Source.
If you're using Manual data, any field whose Name exactly matches a property on your popup component fills in automatically - you only need a mapping if you want to rename it. If you're using CMS data, nothing fills in automatically. Every field shown in the popup needs an explicit mapping.
Collection Route
If you're using a CMS collection and want the popup to link to that item's page, set Collection Route to the CMS collection's page. The link is only generated automatically for CMS data. Manual points don't get an automatic link.
