Hardergrat

The narrowest ridge walk in Switzerland, Interlaken to Brienz. Grat plans it with you — stages, weather windows, ways down.

24kilometres
2,400metres of ascent
9–11hours
T5difficulty

What Grat does

Not a route portal. An app for the three questions that actually come up the evening before a ridge walk.

Stages: Grat splits the route by your pace, not by map sheets. You say how fast you move on T4 ground and the app works out the rest.
Weather windows: Ridge walks are called off by wind, not rain. Grat shows gusts at ridge height rather than valley weather, 72 hours out.
Ways down: Every descent off the ridge with walking time to the nearest stop, available offline. So turning back stays a decision and not a guess.

Get in touch

Two people in Interlaken read this. Usually an answer the same day.

1 — Embedded inline

A div in the middle of the text. The form renders where the div sits, inside a shadow DOM — this page cannot style it and it cannot style this page.

<div
  data-echohatch-project="pub_…"
  data-echohatch-type="contact"
  data-echohatch-mode="inline"></div>

What are we missing?

Requests land as ideas in the same inbox. Similar ones are grouped on the server, so thirty people asking for dark mode counts once rather than thirty times.

2 — A form with steps

Same snippet, different type. This form has two steps, and that lives in the schema rather than in this page's code. Change the form in the dashboard and it changes here, with no deploy.

<div
  data-echohatch-project="pub_…"
  data-echohatch-type="feature"
  data-echohatch-mode="inline"></div>

Bottom right

The support button floats above every page. One script tag and nothing else — no build step, no dependency, no 300 kB chat bundle.

The button is in the bottom-right corner of this window.

3 — Floating launcher

The script mounts itself as a button and scans the page for inline divs. One tag covers all three embeds on this page.

<script
  src="https://api.echohatch.com/w.js"
  data-echohatch-project="pub_…"
  data-echohatch-type="support"></script>

“Here, let me show you”

Some problems cannot be typed. So the support form has a button that records what the visitor is demonstrating — and shows them the whole time that a recording is running.

4 — Recording, on request

The recorder loads only once somebody presses the button: 24 kB gzipped, rather than charging it to every visitor. The widget itself stays at about 18 kB.

What is recorded is the DOM, not the screen — which is why it works on a phone. Everything the visitor types is masked, and this widget is excluded from its own recording.

If a session-replay tool is already running on the page, nothing is recorded twice: the widget passes along that tool's session id instead.

It is an element the form carries, not something every form in the project inherits — this support form asks for a recording, the two forms above do not.

project: recording allowed
form:    + recording element

And then?

Send something above. It comes through immediately — the AI enrichment runs afterwards and asynchronously, so nothing is lost when the model is slow or says nothing at all.

The server checked that this page is allowed to submit at all: the origin is on the project's allow-list. A project with no entry accepts nothing, which is why pasting this snippet onto your own site would not work until you add it.

Grat is invented. The widget is not — it is the same w.js that runs on real sites, talking to the real API.