We're a studio of seven in Bergen, designing new houses, cabins and renovations along the west coast of Norway. Calm, light-filled rooms, often on sites other people call difficult: steep plots, slopes and fjord views are our favourite kind of problem.
"Tell us about your project" forms get half-filled and abandoned. Few people know what to put in a budget field, and a form can't ask the question that matters next. Here the form's place holds a conversation instead. It asks the follow-up questions one at a time, and an architect joins the same conversation when there's something real to talk about.
Try it
Under Tell us about your project, click A new house on a sloped plot, or describe your own project. The greeting is already the card's first message, so the reply lands right under it.
Answer in your own words. The card asks one thing at a time, grows with the conversation, and scrolls inside once it's tall, so the page around it stays put.
Use Open full view in the card's header to read a long conversation with the whole screen.
Or : scripted, nothing is sent.
Chats here use site="demo", Stand Chat's shared demo site. Its demo Stand-in reads the page's private prompt, but it may still decline to speak for a made-up architecture studio. With your own Site ID, your own Stand-ins answer, trained on your website.
The element
<script type="module" src="stand-inline.js"></script>
<stand-inline
site="YOUR-SITE-ID"
look="card"
grow="unfold"
greeting="Tell us a little about your project: where it is, roughly how big, and what you're hoping for."
placeholder="Describe your project"
suggestions="A new house on a sloped plot | Renovating a 1930s apartment | A small cabin by the sea"
prompt="Studio Halden designs houses, cabins and renovations on Norway's west coast. The first 30-minute call is free… Ask about the site, size, budget and timeline, one question at a time. Bring in Ingrid Vold for west-coast houses…"
analytics-id="start-a-project">
<div slot="offline">Write to post@studiohalden.example or call +47 55 00 00 00.</div>
</stand-inline>
look="card" is a contained panel with a header that says who answers. It's clearly visible, and it sits where the form would.
greeting is the card's first message, from whoever answers. The card makes the first move, so nobody stares at an empty box.
suggestions are starting points for people who don't know how to begin. Clicking one sends it, and they fold away once the conversation starts.
prompt tells whoever answers what to ask and when to hand over: here the site, size, budget and timeline, one question at a time, and Ingrid for houses on the west coast. Visitors don't see it, but it's in your HTML, so keep it to public facts.
grow="unfold", the default, grows the card in place. Past --si-max-height, it scrolls inside.
slot="offline" shows instead of the card when nobody can answer. Without it the element hides, and a contact page should always leave a way in.
analytics-id labels the placement, so Stand's analytics show how many projects start here.
Make it yours
It takes its font and text color from the page. Studio Halden sets a few tokens for a flat card on white, squares the corners with ::part(), and sets the name of whoever answers in the studio's display serif:
--si-tint colors the message box, here the page's own paper color. --si-max-height caps the transcript: pick a height where the whole card, box included, still fits on a laptop screen.
Good to know
A person joins the same conversation. When Ingrid takes over, the header switches to her name and title, and she reads everything the visitor already wrote. Nobody repeats themselves.
If a person can't answer right away, Stand can offer to follow up by email, and the card shows the email field by itself. You don't build that form.
A reload keeps the conversation. It comes back in the same tab, even a half-written reply, where a form would start over empty.
