Grow your first modular synth.

How it works

A stand-card that starts the conversation in the visitor's words

Some questions need more than a button: a bit of explanation, a picture, a place to type. <stand-card> wraps your own markup in a chat invitation. Add spotlight and it steps forward at the moment the visitor scrolls past it.

This page also hides Stand's floating button, so the cards speak for themselves:

<script>addEventListener('DOMContentLoaded', () => window.StandChat?.initiallyHideChatButton());</script>

Try it

1. Scroll down past the modules. When the card reaches the middle of the screen, it moves to the center over a blurred page.
2. Type what you play, for example "techno on a drum machine, about €600", and press Sketch my rack. Your text becomes the first message in the chat.
3. Under the starter systems, the whole Already have a case? card is clickable. That is the compact version.

The card

<section hidden data-stand-reveal>
  <stand-card
    spotlight
    identity="avatar name title"
    theme="horizontal"
    greeting="Tell me about the music you make, and I'll sketch a first rack that fits it."
    prompt="The visitor is new to modular. Catalog: Seed VCO €249 (10 HP), Bloom filter €229 (12 HP)… Suggest three to five modules for their music and budget."
    dismiss-label="Keep browsing"
    analytics-id="first-rack">
    <img slot="media" src="rack.svg" alt="">
    <h2>Tell us what you play. We'll sketch your first rack.</h2>
    <p>Describe your music, the gear you already have and a rough budget.</p>
    <textarea data-stand-visitor-message rows="3" aria-label="What music do you make?"></textarea>
    <button slot="actions" type="button" data-stand-action>Sketch my rack</button>
    <span slot="footer">A synth nerd or our AI Stand-in replies in seconds.</span>
  </stand-card>
</section>

• A card does nothing until you mark an action. data-stand-action goes on exactly one button, or on the card itself to make the whole card clickable.
• data-stand-visitor-message marks the field whose text is sent as the visitor's first message. If it's empty, the chat simply opens.
• identity="avatar name title" adds a header showing who will answer. For an AI Stand-in it also shows an AI badge.
• spotlight centers the card over a blurred page once, as it crosses the middle of the screen. Dismissing or using it is remembered per card and page in that browser. dismiss-label renames the generated Cancel button.
• greeting and prompt work as on <stand-button>: an opening line from your side, and private context for whoever answers.
• Slots: media, actions, footer, and the default slot for everything else. Themes: outlined, elevated, horizontal, cover-media, stretch-media, divided-footer.

Styling it

Your own content inside the card is ordinary light DOM, so style it like any other markup. The card's own surfaces are exposed as parts.

.advisor stand-card::part(card) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  border: 3px solid #121212;
  border-radius: 22px;
  box-shadow: 10px 10px 0 #121212;
}

.advisor stand-card::part(header-suffix) { background: #FF5C8A; }

.advisor stand-card [data-stand-action] {
  border: 3px solid #121212;
  background: #FFD23F;
  color: #121212;
}

Good to know

• Put hidden in one place. Either on the card, or on one wrapper marked data-stand-reveal (as here) so the surrounding section appears with it.
• Use type="button" on the action, so it can't submit a surrounding form before Stand loads.
• Visitor text goes to an open chat too. If the visitor already has a conversation, the message is added to it. The greeting and prompt only apply to new ones.

The spotlight shows once per browser. To see it again, reset it and reload. That button is a demo helper, not part of the example.

Copy this example

npx degit standchat/examples/stand-card my-stand-card

• stand-card reference ↗
• Guide: tune chat behavior ↗
• Source on GitHub ↗