Your own starter, and a conversation that points at the page
Every pricing page raises the same question: which plan is right for us? The answer depends on the team, so this page asks back, with a sentence the visitor completes. The reply unfolds right above the plans, and the plans it names light up.
Try it
In the plan finder, set your team size and what you mostly plan, then click Find my plan. Your sentence becomes the first message, and the answer unfolds right there.
Look at the plans below it. The plan the reply suggests gets a Suggested in your chat badge, and any other plan it names gets a quieter ring.
Ask a follow-up on the line under the sentence, like "What happens when the trial ends?" The line works on its own too, for any question about plans and billing.
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 planning tool. 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
id="ask-plan"
site="YOUR-SITE-ID"
look="line"
grow="unfold"
placeholder="Or ask about plans and billing"
prompt="The visitor is on Loomwork's pricing page. Starter €0 for up to 3 people; Team €12 per person a month, or €9.60 billed annually… Recommend one plan, and name it first. Use the plan names Starter, Team and Business exactly."
analytics-id="pricing-plan-finder">
</stand-inline>
look="line" is a sentence-sized input on a rule. Under the page's own sentence, it's the quieter second way in, for any other question.
grow="unfold" opens the conversation in place, inside the plan finder, right above the plans it talks about.
There are no suggestions: the sentence is the starter.
prompt holds the plans, prices and billing rules as private context. It also asks for the plan names exactly as the page writes them, with the recommended plan first, because the page's highlight reads those names.
id lets the page's script find the element. analytics-id labels the placement in Stand's analytics.
Start it from your own UI
The sentence is an ordinary form, styled like the rest of the page. On submit, the page puts the sentence together and calls ask(), which sends it as the visitor and starts the conversation if there isn't one yet.
<form id="sentence">
We’re a team of <input name="people" type="number" value="12">
people and we mostly plan <select name="work">…</select>.
<button>Find my plan</button>
</form>
<script type="module">
const chat = document.getElementById('ask-plan');
const sentence = document.getElementById('sentence');
sentence.addEventListener('submit', (event) => {
event.preventDefault();
const { people, work } = sentence.elements;
chat.ask(`We’re a team of ${people.value} and we mostly plan ${work.value}.`);
});
</script>
React to the conversation
Every new message fires a stand-inline-message event with { from, text, type }. For each reply, the page looks for plan names and marks those cards. A conversation restored after a reload, or replaced by a new one, doesn't replay its events: stand-inline-reset fires instead, and the page reads the last reply from el.state, where messages have the same shape.
const plans = document.querySelectorAll('.plan[data-plan]');
function highlight(text) {
const named = [...new Set(text.match(/\b(Starter|Team|Business)\b/g) ?? [])];
for (const plan of plans) {
const rank = named.indexOf(plan.dataset.plan);
plan.classList.toggle('suggested', rank === 0); // badge and ring
plan.classList.toggle('mentioned', rank > 0); // a quieter ring
}
}
const isReply = (message) => message.from !== 'visitor' && message.type === 'text';
chat.addEventListener('stand-inline-message', (event) => {
if (isReply(event.detail)) highlight(event.detail.text);
});
const fromState = () => highlight(chat.state?.messages.findLast(isReply)?.text ?? '');
chat.addEventListener('stand-inline-reset', fromState);
fromState();
Make it yours
It takes its font and text color from the page. Loomwork sets four tokens, styles two parts, and uses the element's data-state to style the page around it:
stand-inline {
--si-accent: #E4572E;
--si-visitor-bg: #FFE3D3;
--si-line: #E6D9C8;
--si-max-height: min(56vh, 460px);
}
/* Replies keep a readable line length in the wide band. */
stand-inline::part(host) { max-width: 46em; }
/* A hairline between the page's sentence and the conversation. */
stand-inline[data-state="conversation"]::part(conversation) {
padding-top: 22px;
border-top: 1px solid #EDE4D8;
}
/* Nobody can answer: the plan finder steps aside, the plans stay. */
.finder:has(stand-inline[data-state="offline"]) { display: none; }
Good to know
It works with any responder. The page only reads the text of each message, so the cards light up the same way for an AI Stand-in and for a person on your team.
The highlight is presentation only. The answer itself is in the conversation, where screen readers announce it. Each reply starts over, so a reply that names no plan clears the cards.
ask() waits for Stand to find someone who can answer, then starts a conversation or adds to the open one. The prompt only applies when a conversation starts.