Framer plugin

The Yatmo plugin for Framer adds three code components to your project: the interactive neighbourhood map of a property, the nearest places with travel times, and the written neighbourhood text. Address or coordinates, every option in the properties panel, CMS binding for property pages. No backend.

Install

1. Get a Yatmo licence at yatmo.com and add your Framer domains to the frontend key’s allowed domains: *.framercanvas.com (the canvas), *.framer.app or *.framer.website and your custom domain (keys explained).
2. In Framer, open Plugins and install Yatmo from the Marketplace (source: GitHub). Until it is listed, run it as a development plugin from the source.
3. In the plugin panel, paste the key, pick the country and the language, type an address and click Insert map, Insert nearest places or Insert neighbourhood text.

The first insert writes Yatmo.tsx in the Code panel (three exported components) and adds an instance on the canvas; later inserts reuse the file. The plugin stores your key and settings locally in Framer, never on Yatmo’s side.

The three components

• YatmoMap: the iframe plugin (map, points of interest, travel times, summary, isochrones, routes). Fills its frame; give it a height of 500 px or more.
• YatmoPlaces: the nearest nursery, school, supermarket, bus stop, station... with distance and travel time, as headings and lists in the project’s font. Auto height.
• YatmoText: the neighbourhood description (education, shopping, public transport, roads, leisure, nearby cities), key places in bold. Auto height.

They render the Yatmo web components, loaded once per page from a CDN, so an update on Yatmo’s side reaches your site without republishing.

CMS pages

Create a collection (Properties) with an Address text field, or Latitude and Longitude number fields. On the collection’s page template, place the components and bind Address (or the two coordinates) to the fields with the binding button next to the control. One template, every property. For discreet listings, add a boolean field and bind Marker to it through a variant, or keep two instances with conditional visibility.

Options

All in the properties panel of each instance:

• Common: Yatmo key, Country, Language, Address, Latitude, Longitude (coordinates take precedence over the address).
• Map: Layout (map and summary, scores, map above summary, map only, summary only, summary tabs), Zoom, Map style, Accent colour, Marker (pin or circle with its radius), Rounded corners, Isochrones, Routes.
• Places: Categories (education, transport, shopping, tourism), Travel time (walking, bicycling, driving, public transport), places per category, heading level.
• Text: Paragraphs, heading level, headings naming the street and the city, the city only (discreet), or neither.

Without the plugin

Framer also takes plain HTML: the no-code tutorial and its embed code generator work in a Framer Embed component, with the script in the site’s custom code. The plugin only adds the properties panel and the CMS binding.