Every page asks for a different kind of attention. This chapter shows how to make Stand feel intentional on pricing, booking, docs, contact, and other high-intent pages without changing the install snippet.
Match Stand to each page with runtime rules, page-native prompts, supported API calls, and temporary JavaScript only when the built-in tools are not enough.
Runtime rules
01
Edit behavior without redeploying the snippet.
App link
Open Chat widget behavior from Sites.
In Stand, open Sites, choose a site, then use Chat widget behavior to edit the ordered runtime rules. Changes apply to the next visitor load without changing the snippet.
Chat widget behavior is runtime site configuration. The installed snippet stays the same; Stand calls find immediately, receives the current behavior config, and applies the first matching rule for the visitor page.
Each site has an ordered list of behavior rules. Put specific rules above broad rules. The empty path rule is the default fallback. The / rule is only the front page. Other paths match exactly, ignoring a trailing slash; add /* to match that page and every child path.
Field
How it works
Notes
FieldRule order
How it worksRules are evaluated top to bottom. The first enabled rule whose path matches is the only rule used.
NotesPut exact page rules above broader /* subtree rules. Use the empty path only for the fallback behavior.
FieldEnabled
How it worksDisabled rules are skipped without being deleted.
NotesUse this to pause an experiment while keeping its settings.
FieldPath pattern
How it worksMatched against window.location.pathname only. Query strings and hashes are ignored.
NotesEmpty path means default fallback. / means the front page only. /pricing and /pricing/ match only that page. /pricing/* also matches /pricing, /pricing/, and child pages such as /pricing/enterprise.
FieldWidget show trigger
How it worksControls when the floating widget is shown or opened after find reports availability.
NotesOn load runs immediately. Time waits for Delay. Scroll waits for Scroll %. None means no automatic floating widget reveal.
FieldDelay
How it worksUsed only by the Time trigger.
NotesSet the number of seconds to wait before the trigger fires.
FieldScroll %
How it worksUsed only by the Scroll trigger.
NotesSet how far down the page the visitor must scroll before the trigger fires.
FieldGreeting
How it worksControls the first visible chat invitation.
NotesDefault greeting keeps the normal site greeting. No greeting suppresses it. Custom greeting uses Custom greeting text. To avoid repeated interruptions, the invitation appears once per visitor browser on that website, not on every reload; clearing site data or using another browser or device starts fresh.
FieldCustom greeting text
How it worksReplacement first message from the rep or stand-in.
NotesWrite it from the rep or stand-in point of view and tie it to the page context.
FieldHalf-sized
How it worksStarts the floating widget in a smaller presentation.
NotesUseful when the page needs quieter coverage.
FieldStep aside
How it worksLets the floating widget move aside after it has appeared.
NotesUseful when the widget should stay available without sitting over page content.
FieldOpen chat widget on desktop
How it worksOpens the full chat window when the selected default or custom greeting would appear.
NotesUses the same once-per-browser memory as the greeting. Mobile layouts show only the greeting bubble because an open chat takes over the screen.
FieldCustom JavaScript
How it worksOptional code that runs after Stand finds someone available and before the widget is shown.
NotesVisible only when custom JavaScript is enabled for the site. Use for temporary experiments, then move the winning behavior into the site.
FieldAllow Stand admin access
How it worksLets Stand administrators adjust behavior rules for that site.
NotesEnable only while Stand is actively helping with an experiment or integration, then turn it off.
Declarative prompts
02
Add page prompts before writing JavaScript.
stand-button
Use a button for compact page prompts.
Preview
Opens with: Happy to walk you through installation and get you started. How do you host your website today?
HTML
<stand-button hidden avatar message="Happy to walk you through installation and get you started. How do you host your website today?">How it works?</stand-button>
<style>
stand-button::part(button) { cursor: pointer; }
stand-button:hover::part(button) { background: #F4F4F4; }
</style>
A stand-button is the smallest in-page chat prompt. Use it when the page already has enough context and all you need is a compact call to action that opens Stand with the right first message.
Put it anywhere on the page and include hidden to avoid flicker. Stand reveals it only after find returns an available rep or stand-in. The message attribute replaces the normal greeting for that open.
stand-button attributes
hidden
Recommended in the original HTML so the button is invisible until Stand finds an available rep or stand-in.
avatar
Optional. Shows the available rep or stand-in avatar as the button icon. Omit it for a text-only button.
message
Opening message shown from the rep or stand-in instead of the usual greeting when the button opens chat.
prompt
Optional internal context attached to the session. Visitors do not see it; reps can see it in history and AI stand-ins use it as guidance.
analytics-id
Optional attribution label included with the activation event so teams can compare buttons or placements.
class
Optional standard HTML class. Use it with ::part(button), ::part(icon), and ::part(label) to style the button.
stand-button slots and parts
default slot
The visible button label. Keep it short and action-oriented.
::part(button)
Styles the native button wrapper.
::part(icon)
Styles the optional avatar icon shown when the avatar attribute is present.
::part(label)
Styles the slotted button label.
stand-card
Use a card when the prompt needs context.
Preview
Plan the right call
Share your goal before choosing a time.
Useful when visitors are comparing meeting options.
Leave maximum width empty to fill the containing block. Use a CSS length such as 42rem, 680px, or 80%; alignment is written as an ordinary host margin.
Enter a stable page-known ID first. The ID remains private correlation metadata. The optional name can label the visitor for authenticated reps, but it is not authentication or visible visitor chat content.
The button is a direct child marked with data-stand-action. When footer content is present, it shares that row; otherwise it uses the dedicated actions row.
Explicitly adds data-stand-action to stand-card. Leave both action choices off for an inert card.
Theme variants
HTML
<stand-card hidden theme="outlined horizontal cover-media" identity="avatar name title" greeting="I can help you decide whether a call is worth booking. What are you trying to figure out?">
<img slot="media" src="/images/guide/stand-card-implementation.png" alt="">
Plan the right call
Share your goal before choosing a time.
<textarea data-stand-visitor-message rows="3" placeholder="What would you like help deciding?"></textarea>
<span slot="footer">Useful when visitors are comparing meeting options.</span>
<button slot="footer" type="button" data-stand-action style="margin-left: auto">Start chat</button>
</stand-card>
Use stand-card when the invitation should carry supporting copy, identity, media, or a layout that feels like part of the page.
Authored content goes into slots, visual variants go in the space-separated theme attribute, and styling hooks are exposed as shadow parts. Slots control layout only. Stand generates only the availability fields named by identity. Omitting it hides the generated identity header; when identity is shown for an AI stand-in, that header includes the AI badge.
The card fills the width of its containing block by default. To constrain or align it, put ordinary layout CSS directly in its style attribute—for example, style="max-width: 42rem; margin-inline: auto". These styles apply to the custom-element host, so they do not need to cross the shadow boundary.
Behavior is explicit. Mark one direct child with data-stand-action, or put that marker on stand-card to activate the whole surface. Mark the first-message source with data-stand-visitor-message. Use type="button" so a native button cannot submit an ancestor form before Stand upgrades the element or when its script is unavailable.
Add spotlight when a high-intent card should center on the visible viewport as the page continues scrolling behind a blurred glass layer. Stand leaves a visual imprint in the page so the layout remains complete. Spotlight includes a secondary Cancel action by default; use dismiss-label to change it, or author one direct data-stand-dismiss control.
To identify a signed-in visitor, set visitor-id and optionally visitor-name, or call StandChat.identify({ externalId, name }). Clear a global identity with StandChat.identify(null). The page-asserted ID stays private and is never authorization. The optional name is visible to authenticated reps in dashboard and history, but not in the visitor chat.
stand-card attributes
hidden
Recommended in the original HTML so the card is invisible until Stand finds an available rep or stand-in.
greeting
Opening greeting shown from the rep or stand-in instead of the usual greeting when an explicit action opens chat.
prompt
Optional internal context attached to the session. Visitors do not see it; reps can see it in history and AI stand-ins use it as guidance.
analytics-id
Optional attribution label included with the activation event so teams can compare cards or placements. Labels may be reused; spotlight dismissal is still remembered per card and page.
spotlight
Optional. When the fully visible card crosses the viewport midpoint in either scroll direction, it centers above a blurred glass layer while the page keeps its native momentum. After placement it stays fixed, moving only enough to remain visible when an on-screen keyboard or browser controls reduce the viewport. Its actions stay fixed through each pointer gesture. A visual imprint preserves the underlying layout. Dismissal or activation suppresses the spotlight for that card in the visitor browser on that website origin. It can appear again after site data is cleared or in another browser or device.
dismiss-label
Optional label for the generated spotlight dismissal action. Missing or empty values use Cancel. The attribute has no effect without spotlight.
identity
Optional space-separated generated identity fields: avatar, name, and title. Omit it to hide the generated identity header, including the AI badge. When identity is shown for an AI stand-in, the header also includes the AI badge.
data-stand-action
Makes the whole card the explicit chat action. Do not also mark a child action; conflicting markers fail closed.
visitor-id / visitor-name
Optional page-known visitor identity stored privately with the session for correlation. visitor-id is required when visitor-name is present. Neither value is rendered in the transcript or exposed as visitor contact data.
theme
Optional space-separated style variants. Supported values are outlined, elevated, horizontal, cover-media, stretch-media, and divided-footer.
class
Optional standard HTML class. Use it with ::part() selectors and your own slotted content selectors to customize styling.
style
Optional standard HTML style attribute on the card host. The card fills its containing block by default; use max-width and margins here to constrain and align it without crossing the shadow boundary.
stand-card slots
default slot
Main body content. Content never becomes behavior merely because of its element type.
slot="media"
Image, video, icon, or illustration content. It appears above the card body, or beside it when the horizontal theme is used.
slot="actions"
A dedicated row for primary and dismissal controls. Use the footer slot instead when an action should share a row with footer copy. Behavior still requires data-stand-action or data-stand-dismiss.
slot="footer"
Supplementary notes, badges, secondary copy, and actions that should share the same row. It has no divider unless theme includes divided-footer, and never implies behavior.
stand-card direct-child behavior markers
data-stand-action
Marks one direct child as the sole chat action. Do not combine it with data-stand-dismiss on the same child. A button should also use type="button" so it cannot submit an ancestor form before Stand upgrades the element or when the script is unavailable.
data-stand-visitor-message
Marks one direct child as the source of the first visitor message. Stand reads value when present, otherwise editable or text content.
data-stand-dismiss
Marks one direct child as the authored spotlight dismissal action. Do not combine it with data-stand-action on the same child. Use it instead of the generated fallback when you need custom markup.
stand-card theme variants
outlined
Removes the default shadow so the card reads as a bordered panel.
elevated
Adds a stronger shadow for shaded sections or high-emphasis prompts.
horizontal
Places card content beside the media slot on wider screens.
cover-media
Sizes image or video media to cover the card media area.
stretch-media
Stretches image or video media to fill the available media height.
divided-footer
Adds a divider above supplementary footer content. Actions remain in their own undivided region.
stand-card shadow parts
::part(card)
Styles the outer card surface.
::part(media)
Styles the media slot wrapper.
::part(header)
Styles the generated availability identity header.
::part(header-prefix)
Styles the generated avatar or mascot.
::part(title)
Styles the generated rep or stand-in name.
::part(subtitle)
Styles the generated title or role.
::part(header-suffix)
Styles the generated AI badge.
::part(content)
Styles the default slot wrapper.
::part(actions)
Styles the actions slot wrapper.
::part(footer)
Styles the footer slot wrapper.
::part(dismiss)
Styles the generated spotlight dismissal action.
::part(imprint)
Styles the noninteractive card-shaped imprint that preserves the underlying page layout while spotlight is active.
::part(spotlight)
Styles the top-layer dialog that holds the active spotlight card.
Styled examples
Four common prompts, each tuned to the page.
Example 1
Pricing Page
Plans and limits→ Pricing detailsCompare plans, limits, and what changes by team size.
Opens with: I can help with pricing. What would you like to compare?
HTML
<stand-card hidden class="stand-card--pricing" theme="elevated" data-stand-action greeting="I can help with pricing. What would you like to compare?">
<span class="stand-card-eyebrow">Plans and limits</span>
<strong>→ Pricing details</strong>
<span>Compare plans, limits, and what changes by team size.</span>
</stand-card>
Before you bookPlan the right callShare your goal before choosing a time.
Opens with: I can help you decide whether a call is worth booking. What are you trying to figure out?
HTML
<stand-card hidden class="stand-card--booking" theme="outlined elevated horizontal cover-media" identity="avatar name title" data-stand-action greeting="I can help you decide whether a call is worth booking. What are you trying to figure out?">
<img slot="media" src="/images/guide/stand-card-implementation.png" alt="">
<span class="stand-card-eyebrow">Before you book</span>
<strong>Plan the right call</strong>
<span>Share your goal before choosing a time.</span>
<span slot="footer">Useful when visitors are comparing meeting options.</span>
</stand-card>
Not sure yet?Which option fits?Describe your goal and compare the likely paths.
Opens with: I can help you narrow this down. What are you trying to accomplish?
HTML
<stand-card hidden class="stand-card--service-fit" theme="outlined" identity="avatar name" data-stand-action greeting="I can help you narrow this down. What are you trying to accomplish?">
<span class="stand-card-eyebrow">Not sure yet?</span>
<strong>Which option fits?</strong>
<span>Describe your goal and compare the likely paths.</span>
</stand-card>
Need a person?Ask before you submitGet an answer before sending the contact form.
Opens with: I can answer a quick question before you contact the team. What would you like to know?
HTML
<stand-card hidden class="stand-card--contact" theme="outlined" identity="avatar name title" data-stand-action greeting="I can answer a quick question before you contact the team. What would you like to know?">
<span class="stand-card-eyebrow">Need a person?</span>
<strong>Ask before you submit</strong>
<span>Get an answer before sending the contact form.</span>
<span slot="footer">Good for visitors who are close to reaching out.</span>
</stand-card>
Pricing, booking, service fit, and contact pages usually need different invitations. Use a class on stand-card, style the shadow-DOM parts with ::part(), and style your own slotted content with normal CSS. Click any preview card; if Stand is present, it opens chat with that card's greeting.
Developer API
03
Use the JavaScript API when you need custom page UI.
Live examples
Try both API patterns on this page.
Waiting for Stand
Page button
Opens chat with a replacement first message from the rep or stand-in.
Use stand-button or stand-card first when a declarative prompt is enough. Use the JavaScript API when the site already has its own button, comparison table, booking flow, or component that should open Stand.
The JavaScript API is the window.StandChat object created by the Stand script. Because the script can load asynchronously, read it defensively and wire custom UI only after the object exists.
The object can exist before the availability lookup has finished. isAvailable() tells you whether Stand found a responder. whenAvailable(callback) is the usual place to reveal custom UI, and the callback receives a copied availability object: { available, human, name, title, avatarUrl, brandName }.
openChat(...) reveals the widget and starts the chat. The first argument replaces the rep or stand-in greeting for that open. The optional visitor message becomes the visitor's first sent message. The optional prompt is internal context stored in dashboard history and used by the AI stand-in; visitors do not see it.
identify(...) lets a signed-in page attach its own stable visitor ID and optional display name. A name without an externalId is ignored. The ID stays private and the page-asserted data is never authentication; authenticated reps can see the name in dashboard and history.
The API exposes copied availability data only. It does not expose visitor tokens, websocket tokens, session tokens, or internal widget state.
Code
function setupPricingButton(tries = 0) {
const StandChat = window.StandChat
const button = document.querySelector("[data-ask-pricing]")
if (!StandChat || !button) {
if (tries < 200) {
window.setTimeout(() => setupPricingButton(tries + 1), 50)
}
return
}
StandChat.whenAvailable(() => {
button.hidden = false
})
button.addEventListener("click", () => {
StandChat.openChat("I can help with pricing. What would you like to compare?")
})
}
setupPricingButton()
This waits for the deferred Stand script and still works if Stand has already found someone available.
Code
<stand-button
hidden
avatar
message="Happy to walk you through installation. How do you host your website today?"
prompt="Find out the visitor's website platform and where they are in the install process before giving setup guidance.">
Ask how Stand works
</stand-button>
<stand-card
hidden
greeting="I can help with pricing. What would you like to compare?"
prompt="Ask about team size, expected chat volume, and whether they need AI stand-in coverage before recommending a plan.">
<strong>Compare pricing</strong>
<span>Ask which plan fits your site.</span>
<textarea data-stand-visitor-message rows="3" placeholder="What matters most to your team?"></textarea>
<button slot="actions" type="button" data-stand-action>Start chat</button>
</stand-card>
Behavior is explicit: the marked textarea supplies the first visitor message and the marked actions-slot button opens chat. Without data-stand-action the card is inert. Add spotlight for a generated Cancel action, or use dismiss-label to change it. The greeting is visible to the visitor, while prompt remains internal context.
Code
<label for="feature-request">Submit a feature request</label>
<textarea id="feature-request"></textarea>
<button id="feature-request-submit" type="button" disabled>
Submit a feature request
</button>
<script>
function setupFeatureRequestBox(tries = 0) {
const StandChat = window.StandChat
const textarea = document.getElementById("feature-request")
const button = document.getElementById("feature-request-submit")
const prompt = "Ask visitor for more details about the feature and interview them about their use-case. The goal is to record the feature clearly in this conversation so that the product team can understand it. In the end of the conversation, thank and name who is your rep and say that they will review the feature. Ask if visitor wants to them to also follow up."
if (!StandChat || !textarea || !button) {
if (tries < 200) {
window.setTimeout(() => setupFeatureRequestBox(tries + 1), 50)
}
return
}
let standAvailable = StandChat.isAvailable()
const updateButton = () => {
button.disabled = !standAvailable || !textarea.value.trim()
}
StandChat.whenAvailable(() => {
standAvailable = true
updateButton()
})
textarea.addEventListener("input", updateButton)
button.addEventListener("click", () => {
const visitorMessage = textarea.value.trim()
if (!standAvailable || !visitorMessage) return
StandChat.openChat("What feature would you like to have?", visitorMessage, prompt)
})
updateButton()
}
setupFeatureRequestBox()
</script>
The button remains disabled until Stand is available and the textarea has content.
API
Meaning
Parameters
Return and notes
APIwindow.StandChat
MeaningGlobal public API object added by stand.js. It is the entry point for all methods below, not the <stand-chat> custom element.
ParametersNo parameters. Read it from window after the script has executed, for example const StandChat = window.StandChat.
Return and notesObject or undefined. It may exist before a responder has been found. Guard async pages and use whenAvailable before showing custom UI.
APIStandChat.initiallyHideChatButton()
MeaningSuppresses the default floating chat button so page code or declarative prompts control when chat appears.
ParametersNo parameters.
Return and notesReturns undefined. Calling openChat later clears this hidden state and opens the widget immediately.
APIStandChat.openChat(repMessage = "")
MeaningReveals the widget and opens chat. A non-empty repMessage replaces the default first message from the rep or stand-in for this opening.
ParametersrepMessage: string. Use an empty string to keep the configured greeting.
Return and notesReturns undefined. If the widget is still loading, the open request is queued until availability and UI are ready. If no responder is available, nothing visible opens.
APIStandChat.openChat(repMessage, visitorMessage)
MeaningOpens chat and sends visitorMessage as the visitor's first message after the greeting.
ParametersrepMessage: string. visitorMessage: string. Empty or whitespace-only visitorMessage is ignored.
Return and notesUse when the page already collected text, such as a form field or textarea.
Return and notessourceType defaults to public_api. analyticsId and interaction are used for activation attribution; visitorIdentity is stored privately. A name without externalId is ignored.
APIStandChat.identify(identity)
MeaningSets the page-known identity used by future sessions without displaying it in visitor chat.
Parametersidentity: { externalId: string, name?: string } or null to clear it.
Return and notesReturns undefined. The external ID stays private; authenticated reps can see the optional name. Treat all page-asserted identity as unverified metadata, never authorization.
APIStandChat.isAvailable()
MeaningChecks whether the availability lookup found a live rep or AI stand-in for this page.
ParametersNo parameters.
Return and notesReturns boolean. false means unavailable or the lookup has not finished.
APIStandChat.whenAvailable(callback)
MeaningRegisters a callback to run when Stand has a responder. If Stand is already available, the callback runs immediately with the current availability copy.
Return and notesReturns an unsubscribe function. Call it during component cleanup in React, Vue, or other SPA code.
APIStandChat.isHuman()
MeaningTells custom UI whether the available responder is a live human rep.
ParametersNo parameters.
Return and notesReturns boolean. false can mean AI stand-in or not available yet.
APIStandChat.getName()
MeaningReads the available responder display name for custom UI.
ParametersNo parameters.
Return and notesReturns string or empty string.
APIStandChat.getTitle()
MeaningReads the available responder title or role for custom UI.
ParametersNo parameters.
Return and notesReturns string or empty string.
APIStandChat.getAvatar()
MeaningReads the available responder avatar URL for custom UI.
ParametersNo parameters.
Return and notesReturns string URL or empty string.
Advanced experimentation
04
Treat injected JavaScript as temporary.
Custom JavaScript runs on the customer website after Stand finds an available rep or stand-in and before the button is shown. That is useful for experiments, but it is powerful enough to change page behavior or break part of the site.
Enable it only while you are actively testing a custom behavior. When a behavior works, implement it in the website itself and turn custom JavaScript off.
Questions
Common reader notes
Should custom JavaScript become permanent?
No. Use it to test. When the behavior proves useful, move it into the website implementation and turn injection off.
Does changing behavior require a new snippet?
No. Runtime behavior is returned by Stand after the snippet calls find.
Continue the guide
Build Stand as a learning loop, one chapter at a time.
