Stand card

What a Stand card does

<stand-card> is a page-native container for a richer chat invitation. The website authors its body, media, controls, and supporting text; Stand adds responder availability, optional identity, activation behavior, and a consistent card shell.

A card is inert until the author marks either the whole card or one direct child with data-stand-action. This explicit contract prevents ordinary links, buttons, or form controls inside the card from unexpectedly opening chat.

Build a card with one action

<stand-card
  hidden
  identity="avatar name title"
  greeting="I can help compare plans. What matters most?"
  prompt="Ask about team size and expected chat volume before recommending a plan."
  analytics-id="pricing-help"
  theme="outlined divided-footer"
>
  <strong>Not sure which plan fits?</strong>
  <span>Describe what your team needs.</span>
  <textarea data-stand-visitor-message rows="3"></textarea>
  <button slot="actions" type="button" data-stand-action>Start chat</button>
  <span slot="footer">A person or AI Stand-in will answer.</span>
</stand-card>

Slots, identity, and themes

Filter by responder and reveal surrounding content

<section hidden data-stand-reveal>
  <h2>A person is available</h2>
  <stand-card show-when="rep" greeting="How can I help?" data-stand-action>
    Talk with our team
  </stand-card>
</section>

<section hidden data-stand-reveal>
  <h2>Get an immediate AI answer</h2>
  <stand-card show-when="standin" greeting="What would you like help with?" data-stand-action>
    Ask our AI Stand-in
  </stand-card>
</section>

• Omit show-when or use either for the selected human or AI responder. Use rep for only a selected live human and standin for only a selected AI Stand-in. Empty and unsupported values fail closed.
• The filter reads the single responder selected by find or session restoration. It does not change routing, request a responder type, report that both types are available, or guarantee a later assignment.
• Put native hidden on either the card itself or its closest dedicated data-stand-reveal ancestor—not both. The self-hidden card takes precedence and Stand removes exactly one attribute.
• Stand never climbs to an arbitrary hidden ancestor and does not change aria-hidden, inert, dialogs, tabs, accordions, or application state.

Behavior markers

• Put data-stand-action on the card itself for whole-card activation, or on exactly one direct child for a dedicated action—not both.
• A whole-card action receives button semantics and Enter/Space keyboard activation. Nested interactive elements do not accidentally activate the card.
• Put data-stand-visitor-message on at most one direct child. Stand reads its value, editable content, or text when opening chat.
• Put data-stand-dismiss on at most one direct child to author a custom spotlight dismissal control.
• The activation and dismissal markers must identify different elements. Contract conflicts log a warning and disable the conflicting behavior.

Opening and attribution attributes

Spotlight presentation

• A fully visible spotlight card activates when it crosses the viewport midpoint while scrolling in either direction.
• The centered card sits above a blurred backdrop while an imprint preserves the original page layout.
• Escape, a backdrop click, an authored dismissal, or the generated Cancel action closes it. Activating chat also resolves it.
• Dismissal or activation is remembered per card and page in the visitor’s browser origin, preventing the same spotlight from repeatedly interrupting that browser.
• The card repositions for viewport and on-screen-keyboard changes and holds actions steady during an active pointer gesture.

Availability and opening sequence

• Like Stand button, the card retries until the public API exists and subscribes to whenAvailable(...).
• It remains gated when no eligible responder is available or the selected responder does not match show-when.
• Multiple cards and buttons evaluate availability independently. A shared marked wrapper is revealed when any child matches, while each mismatched component stays internally hidden.
• Activation opens Stand with source stand_card, the click or keyboard interaction, greeting, private prompt, optional visitor message, optional identity, and analytics ID.
• The card’s displayed identity comes from the responder availability returned for the current page.

Boundaries and accessibility

• Use type="button" on authored button actions so they cannot submit an ancestor form before the custom element upgrades or when the script is unavailable.
• The card does not become interactive without a valid action marker and cannot bypass normal Stand routing.
• External reveal is one-way. Use a dedicated wrapper that the application does not control or reconcile, and use separate wrappers for responder-specific surrounding copy.
• Do not mark a hidden tab, modal, accordion, responsive duplicate, or other application-state container as the reveal target.
• Literal HTML attributes are inspectable in page source; do not place credentials or secrets in prompts or identity fields.
• Use Stand button for a compact label-only invitation and the JavaScript API for an existing application control.

Example

This rendered example mirrors the page-native card demonstrated in the Tune Chat Behavior guide.

Riley

AI Stand-in

AI

Not sure which plan fits?Describe what your team needs.

Related features

• Stand button — The stand-button web component adds a compact, page-native chat invitation that can appear for a selected live rep, AI Stand-in, or either responder and can reveal one dedicated surrounding container.
• Private page context — Private page context gives a rep or AI Stand-in facts and instructions from the host page without presenting that context as something the visitor typed.
• Stand JavaScript API — The public window.StandChat API lets a website reveal its own chat entry points, inspect responder availability, open Stand with page-specific context, and identify a signed-in visitor.