Ask in your own words. An answer comes right here, and someone from our team can join any time.Search our help articles, or call us on weekdays from 8:00 to 20:00.
People type whole questions into help-center search anyway: why is my bill higher this month? Keyword search answers with a list of maybe-relevant articles, or with nothing at all. Here the help center's own search box answers the question itself, right under it, and someone from customer care can join the same conversation.
Try it
Watch the search box for a moment. It types out questions people really ask, so it's clear that a whole sentence works here. Click into it, and a greeting says who's answering.
Ask your own question, or pick a suggestion like Why is my bill higher? The box unfolds into the conversation, and the topics move down to make room.
When a question needs someone who can see the account, a person from customer care takes over in the same place. Their name and a green dot replace the AI in the header, and the earlier answers keep their AI label. The sample conversation ends with that moment.
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 energy supplier. With your own Site ID, your own Stand-ins answer, trained on your website.
The element
<script type="module" src="stand-inline.js"></script>
<div class="search">
<stand-inline
site="YOUR-SITE-ID"
look="field"
grow="unfold"
placeholder="Why is my bill higher this month? | My meter reading looks wrong | I'm moving house next month"
greeting="Hi! Ask me anything about your account, bills or meter. Someone from our team can join at any time."
suggestions="Why is my bill higher? | Submit a meter reading | Report a power cut"
prompt="The visitor is in Porchlight's help centre. The winter tariff started on 1 October… For anything about their own account, offer to bring in a person from customer care."
analytics-id="help-center-search">
</stand-inline>
<!-- Shown only when nobody can answer -->
<form class="fallback" role="search" action="/help/search">
<input name="q" type="search" aria-label="Search help articles">
<button>Search</button>
</form>
</div>
look="field" is a bordered box that reads like search, so it can take the place of the search box people already know. A speech bubble replaces the magnifying glass.
A placeholder with several questions separated by | types them out in turn. It shows what to ask, in whole sentences, and stops as soon as someone clicks into the box. With reduced motion, the first one simply stays.
suggestions carry the most common questions. Your search logs already know them.
greeting appears when someone clicks into the box, from whoever is about to answer.
grow="unfold", the default, opens the conversation in place, under the heading. Past --si-max-height, it scrolls inside.
prompt is private context for whoever answers: the tariff dates, how estimated readings work, the power cut number, and when to bring in a person. Visitors don't see it, but it's in your HTML, so keep it to public facts.
The form after it is the help center's plain article search, for when nobody can answer. More on that below.
Make it yours
It takes its font and text color from the page. Porchlight scales it up with font-size, sets a few tokens, and warms up the avatar and AI badge. Until the conversation starts, the box floats like a search box:
Then the element hides itself and sets data-state="offline". A help center shouldn't lose its search box, so Porchlight keeps its plain article search right after the element and shows it with one rule. The line under the heading changes the same way, so it never promises an answer nobody can give.
It replaces the dead end. A question that matches no article still gets an answer, or a person, instead of No results.
It's always clear who's answering. The header names the AI Stand-in, then the person who joins. After a handoff, the AI's answers keep their label.
Keep the example questions short enough for a phone. A placeholder that doesn't fit gets cut off. At 390 pixels wide, Porchlight's longest one fits at font-size: 16px, a size that also stops iOS from zooming in on the box.
