Tune Stand Chat Behavior With Triggers and JS API

Stand Guidebook

Chapter 10 of 10

Field guide

What to learn in this chapter

Tune the visitor-facing widget per page: when it appears, whether it opens, what it says first, and which in-page prompts invite a conversation. The goal is a chat experience that feels helpful in the moment, not pasted over the site.

Use this chapter when Stand is installed but feels too quiet, too eager, or too generic on important pages.

Map visitor intent by path: home, pricing, docs, booking, contact, and comparison pages may need different invitations.

Choose how visible Stand should be on each page: hidden, button only, delayed, scroll-triggered, or opened with a specific message.

Write opening messages from the rep or stand-in point of view, tied to what the visitor is likely deciding right now.

Use stand-button or stand-card for page-native prompts when a small CTA fits better than the floating widget.

Use JavaScript only when built-in rules and declarative prompts cannot express the experiment.

Runtime rules

Edit behavior without redeploying 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. All other paths use simple path-prefix matching against the URL path itself.

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.

Open Sites

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 /docs/ above /docs when child docs pages need different behavior from the docs landing page. Put exception prefixes above broad prefixes.

FieldEnabled

How it worksDisabled rules are skipped without being deleted.

NotesUse this to pause an experiment while keeping its settings.

FieldPath

How it worksMatched against window.location.pathname only. Query strings and hashes are ignored.

NotesEmpty path means default fallback. / means the front page only. Other values are simple prefixes: /pricing matches any path that starts with /pricing.

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.

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.

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

Add page prompts before writing JavaScript.

A stand-button is the smallest in-page chat prompt. Use stand-card when the invitation needs more context, identity, media, or custom layout. Stand handles availability, identity, click behavior, and the opening message.

Put either element anywhere on the page, include hidden to avoid flicker, and Stand reveals it only after find returns an available rep or stand-in. The message attribute replaces the normal greeting for that open, so write it as the first thing the rep or stand-in says.

stand-button

Use a button for compact page prompts.

Use stand-button when the page already has enough context and all you need is a small call to action that opens Stand with the right first message.

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>

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.
class: Optional standard HTML class. Use it with ::part(button), ::part(icon), and ::part(label) to style the button.

stand-card

Use a card when the prompt needs context.

Use stand-card when the invitation should carry supporting copy, identity, media, or a layout that feels like part of the page.

HTML

<stand-card hidden class="stand-card--simple" hide-avatar hide-name hide-title message="I can help with pricing. What would you like to compare?">→ Pricing details</stand-card>

<style>
  .stand-card--simple::part(card) { cursor: pointer; }
  .stand-card--simple:hover::part(card) { background: #F4F4F4; }
</style>

stand-card attributes

hidden: Recommended in the original HTML so the card is invisible until Stand finds an available rep or stand-in.
message: Opening message shown from the rep or stand-in instead of the usual greeting when the card opens chat.
hide-avatar: Suppresses the avatar in the card header prefix.
hide-name: Suppresses the rep or stand-in name in the card title area.
hide-title: Suppresses the title or role in the card subtitle area.
slot="media": Places an image, video, or other media area above the card body, or beside it when the horizontal theme is used.
slot="footer": Places supporting text or small actions in the card footer.
theme: Optional variants: outlined, elevated, horizontal, cover-media, and stretch-media.
class: Optional standard HTML class. Use it with ::part(card), ::part(header), ::part(content), and other card parts to customize styling.

Configure the card

Body HTMLOpening message

AvatarNameTitle

Preview identity

Preview

→ Pricing details

Generated HTML

<stand-card hidden hide-avatar hide-name hide-title message="I can help with pricing. What would you like to compare?">
  → Pricing details
</stand-card>

Styled examples

Four common prompts, each tuned to the page.

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 message.

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" hide-avatar hide-name hide-title message="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>

CSS

.stand-card--pricing::part(card) {
  border-color: #F6C510;
  border-left: 4px solid #F6C510;
  background: #fffdf4;
  cursor: pointer;
}

.stand-card--pricing:hover::part(card) {
  background: #fff8d8;
}

.stand-card--pricing .stand-card-eyebrow {
  display: block;
  margin-bottom: 0.25rem;
  color: #C19802;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

Example 2

Booking

Alex Morgan

Product specialist

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" message="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>

CSS

.stand-card--booking {
  max-width: 42rem;
}

.stand-card--booking::part(card) {
  border-color: #38B9E0;
  background: #f7fcfd;
  cursor: pointer;
}

.stand-card--booking:hover::part(card) {
  background: #eef9fc;
}

.stand-card--booking::part(media) {
  min-height: 12rem;
}

.stand-card--booking .stand-card-eyebrow {
  color: #1B90B3;
  font-weight: 700;
}

Example 3

Service Fit

Riley

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" hide-title message="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>

CSS

.stand-card--service-fit::part(card) {
  border-color: #38B9E0;
  background: #f3fbfd;
  cursor: pointer;
}

.stand-card--service-fit:hover::part(card) {
  background: #e3f7fc;
}

.stand-card--service-fit::part(header-prefix) {
  background: #1B90B3;
}

.stand-card--service-fit .stand-card-eyebrow {
  color: #05485D;
  font-weight: 700;
}

Example 4

Contact

Alex Morgan

Product specialist

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" message="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>

CSS

.stand-card--contact::part(card) {
  border-style: dashed;
  border-color: #A3A3A3;
  background: white;
  cursor: pointer;
}

.stand-card--contact:hover::part(card) {
  background: #F4F4F4;
}

.stand-card--contact::part(footer) {
  color: #676767;
  font-style: italic;
}

.stand-card--contact .stand-card-eyebrow {
  color: #B3371B;
  font-weight: 700;
}

Developer API

Use the JavaScript API when you need custom page UI.

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 API exposes copied availability data only. It does not expose visitor tokens, websocket tokens, or internal widget state.

Open Stand from a page button

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.

API

Use it for

APIinitiallyHideChatButton()

Use it forSuppress the default button while the page controls when chat opens.

APIopenChat(message)

Use it forOpen chat with a replacement first message from the rep or stand-in.

APIisAvailable()

Use it forCheck whether find returned an available rep or stand-in.

APIisHuman()

Use it forDistinguish live rep coverage from AI stand-in coverage.

APIgetName(), getTitle(), getAvatar()

Use it forRender available identity in custom page UI.

APIwhenAvailable(callback)

Use it forReveal in-page prompts only when Stand can answer.

Advanced experimentation

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.

Previous chapter 09

Make It Feel Like You

Use real identity, avatars, pins, and brand presence.

Try the guide on one real page.

Get your Stand - free forever

Tune when Stand appears and what it asks.

What to learn in this chapter

Edit behavior without redeploying the snippet.

Open Chat widget behavior from Sites.

Add page prompts before writing JavaScript.

Use a button for compact page prompts.

Use a card when the prompt needs context.

Configure the card

Four common prompts, each tuned to the page.

Pricing Page

Booking

Service Fit

Contact

Use the JavaScript API when you need custom page UI.

Treat injected JavaScript as temporary.

Common reader notes

Should custom JavaScript become permanent?

Does changing behavior require a new snippet?

Build Stand as a learning loop, one chapter at a time.

Try the guide on one real page.