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

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 hidden when no eligible live rep or AI Stand-in is available.
• 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.
• 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

The screen below shows the feature in its normal Stand context. Labels and surrounding controls may vary with account state and plan.

Related features

• Stand button — The stand-button web component adds a compact, page-native chat invitation that appears only after Stand finds an Available rep or eligible Stand-in.
• 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.