Developer integration

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.

Availability: All plans
Configured in: Website HTML → <stand-button> after the Stand embed script
Category: Developer integration
Reference status: Current

What a Stand button does

<stand-button> is a custom element for placing a small chat call to action inside the page. Its authored contents become the visible label, while the component supplies button semantics, focus behavior, optional responder avatar, and the click that opens Stand.

The component waits for the public Stand API and subscribes to responder availability. When availability arrives, it records the responder identity, renders the avatar if requested, and removes its own hidden attribute.

Add it to a page

Compact chat invitation

<stand-button
  hidden
  avatar
  message="Happy to walk you through installation. How do you host your website today?"
  prompt="The visitor is reading installation instructions. First identify their website platform."
  analytics-id="install-help"
>
  Ask how installation works
</stand-button>

Keep hidden in the source so the control never flashes before Stand knows it can answer.

Place the element anywhere after or before the embed script; the upgraded component retries until the API is present. The visible label comes from the default slot between the tags.

Attributes and content

Attribute or content	Effect
`hidden`	Recommended initial state. Stand removes it only after an available responder is known.
Default slot	The visible button label. Long text is kept on one line and truncated when necessary.
`avatar`	Shows the available responder’s avatar; a Stand mascot fallback appears when no usable avatar URL exists.
`message`	Replaces the ordinary opening greeting for this click.
`prompt`	Adds private context for the session; it is not shown as visitor text.
`analytics-id`	Adds a placement label to the activation event.
`class` and `style`	Apply ordinary host-element styling; exposed shadow parts support internal styling.

Availability and activation sequence

The component looks for window.StandChat; if it is not ready, it retries while the element remains connected.
It registers whenAvailable(...) and remains hidden when no eligible responder is found.
On click, it checks isAvailable() again before calling openChat(...).
The opening request is attributed with source stand_button, interaction click, and the optional analytics ID.
Removing the element from the page clears its retry timer and availability subscription.

Styling surface

Part	Use
`::part(button)`	Style the native button wrapper, including background, border, padding, and hover treatment.
`::part(icon)`	Style the optional circular avatar wrapper.
`::part(label)`	Style the slotted label wrapper.
Host `class` or `style`	Control placement, margins, and the component’s page-level layout.

When to use something else

Use stand-card when the invitation needs explanatory copy, media, a visitor text field, separate actions, or spotlight presentation.
Use the JavaScript API when an existing application component must open Stand or needs dynamic options that cannot be expressed as attributes.
The button does not override routing or reveal itself without an available responder.
The label and prompt attributes are authored in the host page and should not contain secrets.