Customware Support Widget
Use this skill when the Customware React Router client-only SPA template needs a Customware support chat entry point.
The widget is a third-party browser custom element. In this template, load the widget script in
root.tsx
or the equivalent React Router root file/component where the HTML document structure is defined, and render
only in the route or layout where support should appear. The widget owns its Shadow DOM UI, chat runtime, service calls, tool badges, speech input, and page-operation behavior.
For all React code examples, script loading patterns, JSX typing, bubble/full mode examples, metadata, and style options, read
references/component-usage.md
.
What It Offers
A support chat UI as
.
chat-bubble
mode for a floating launcher/dialog.
full
mode for a sidebar, rail, drawer, or split-pane chat region.
Optional visitor metadata through the
meta
DOM property.
Optional sizing/customization through
styleOptions
or
style-options
.
Tool-backed support behavior: read domain/context, list tasks, create tasks, and operate the visible page.
Page operation for user requests like filling forms, selecting options, clicking buttons, replacing values, or submitting visible UI.
When To Use
Add support chat to the Customware React Router client-only SPA template.
Place a floating support launcher in an app shell.
Place support chat as a full embedded panel in a layout region.
Allow the support agent to help with visible app UI, such as filling a form on behalf of the user.
Update an existing support widget placement or styling.
For the exact React implementation patterns, use
references/component-usage.md
.
When Not To Use
Do not use this skill for server-side rendering work. The target template is client-only React Router SPA mode.
Do not use this skill to build a custom chat UI.
Do not use this skill to iframe the widget.
Do not use this skill to call support chat endpoints directly.
Do not use this skill for non-template React apps or non-React apps unless explicitly asked.
Do not use this skill if
orgId
or
projectId
cannot be determined. Fail the task with a clear reason that the required Customware org/project id is missing.
Non-Negotiables
Always render the real custom element:
.
Always pass both
org-id
and
project-id
.
If either id is unavailable, fail the task with a clear missing-id reason instead of rendering placeholders or asking follow-up questions.
Load
https://app.customware.ai/support-widget/customware-chat.js
once from
root.tsx
or the template's equivalent React Router root document shell unless an existing app-level loader already does this.
Do not pass task ids, domain ids, user ids, API tokens, session tokens, auth cookies, or secrets into the component.
Use
meta
only for optional visitor identity:
email
and/or
name
.
Use wrapper CSS,
styleOptions
, or
style-options
for sizing. Do not use the native DOM
style
property as widget configuration.
Tool calls are compact status badges, not buttons.
Page operation is handled inside the widget. Do not add custom click/fill/page-control handlers around it.
Do not hardcode page-operation prompts or values into the host app. The user must type the request into the widget.
Implementation Workflow
Read
references/component-usage.md
.
Confirm the React app has
orgId
and
projectId
.
Choose the mode:
chat-bubble
for a floating support launcher/dialog.
full
for an embedded rail, drawer, split pane, or fixed chat region.
Add the script tag in
root.tsx
or the React Router root file/component that defines the HTML document
<head>
, unless it already exists.
Add JSX custom element typings in a
.d.ts
file when the template does not already know
.
Render
with
org-id
and
project-id
in the specific route or layout that needs support.
Set optional
meta
and
styleOptions
through a typed React ref when needed.
For full mode, ensure the wrapper/component has a concrete height and internal scrolling belongs to the widget.
For bubble mode, ensure the wrapper is not clipped and has an appropriate
z-index
.
Validate the resulting React code syntactically and with
npm run check
when available.
Use
references/component-usage.md
for complete code examples for each mode.
MITB Agent Constraints
Do not assume access to Playwright, screenshots, browser DevTools, or visual testing.
Do not claim that the widget was visually tested.
Do not write user-facing status reports inside the generated app.
Validate by code inspection, TypeScript/compile checks, and ensuring the generated React Router/Vite code follows the examples in
references/component-usage.md
.
If runtime ids are unavailable during generation, fail the task with a clear missing-id reason. If ids are expected to load asynchronously at runtime, gate the component behind
orgId && projectId
so it never renders with placeholders.
Do Not Do
Do not create an iframe integration.
Do not rebuild or restyle the widget internals in React.
Do not reach into Shadow DOM or depend on internal class names.
Do not expose tool calls as clickable UI controls.
Do not call the support chat API or page-operation API directly from the host app.
Do not add fallback embed modes.
Do not store secrets, access tokens, private payloads, or auth/session data in widget attributes.
Do not pass arbitrary user/profile objects into
meta
; pass only optional
email
and
name
.
Do not set a fixed height only on an imagined internal message list. Size the whole full-mode host region.
Do not place bubble mode inside clipped or transformed containers unless that behavior is intentional.