Documentation

Widget integration guide and API reference for <strata-chat>

Try the live widget (floating button). It uses workspace strata-docs so you can ask about this documentation.

Quick Start

Add the Strata widget in 2 lines of code. Takes less than 5 minutes to go live.

Create an account – Sign up at strata.fyi/onboard.
Add the widget – Paste the two lines below into your HTML.
Upload documents – Add FAQs, policies, and knowledge base content in the dashboard.
Go live – The widget is ready.

Install

Add these two lines to your HTML. The script loads a lightweight launcher that renders the chat inside an iframe (isolated; no CSS conflicts with your page).

<script src="https://strata.fyi/widget.js" defer></script>
<strata-chat workspace="your-workspace"></strata-chat>

Replace your-workspace with your workspace slug from the Strata dashboard.

Advanced: manual iframe embed

If you need full control over the iframe, you can embed it directly instead of using the script loader.

<link rel="stylesheet" href="https://strata.fyi/embed/widget.css">
<div class="strata-chat-widget">
  <iframe
    src="https://strata.fyi/embed?workspace=your-workspace"
    loading="lazy"
    allow="clipboard-write"
  ></iframe>
</div>

Host-controlled launcher (recommended for custom UI)

If your site already has its own Open AI / Close AI controls, set launcher="hidden". This removes the floating Strata launcher and avoids overlap/state-conflict issues.

<script src="https://strata.fyi/widget.js" defer></script>
<strata-chat workspace="your-workspace" launcher="hidden"></strata-chat>

<button id="open-ai">Open AI agent</button>
<button id="close-ai">Close AI agent</button>

<script>
  document.getElementById('open-ai')?.addEventListener('click', () => window.StrataChat?.open?.())
  document.getElementById('close-ai')?.addEventListener('click', () => window.StrataChat?.close?.())

  // Keep host UI labels in sync with chat state
  const unsubscribe = window.StrataChat?.onStateChange?.(({ isOpen }) => {
    // update host controls here
  })
  // Call unsubscribe() when cleaning up SPA routes if needed.
</script>

API methods: open(), close(), toggle(), setVisibility(boolean), and onStateChange(listener).

Widget Attributes

Customize the <strata-chat> element with these attributes. All attributes use kebab-case (e.g. api-url, chat-title).

Attribute	Type	Default	Description
`workspace` required	string	`N/A`	Your workspace slug. Determines which knowledge base and users the chat connects to. Get this from your Strata dashboard after creating a workspace. (Legacy: tenant is also supported.)
`api-url`	string	`https://strata.fyi`	Override the Strata API base URL. Use for local development (e.g. http://localhost:3000) or self-hosted deployments.
`icon-url`	string	`Strata default`	URL of a custom icon image for the chat bubble. Use a square image (e.g. 256×256) for best results.
`chat-title`	string	`Strata`	Title shown in the chat header when the panel is open.
`show-header`	boolean	`true`	Show the header bar when chat is open. Set to "false" to hide.
`show-notifications`	boolean	`false`	Show notification badge on the chat bubble. Set to "true" to enable.
`background`	string	`glass`	Panel background style. "glass" for translucent, "none" for transparent.
`hide-branding`	boolean	`false`	Hide the "Powered by Strata" footer. Set to "true" for white-label.
`launcher`	"auto" \| "hidden"	`auto`	Launcher mode. Use "hidden" when your site already has its own Open/Close AI buttons and you want to control chat via window.StrataChat.open()/close()/toggle().
`welcome-message`	string	`Hi! Ask me anything. I can summarize content, answer questions, or use documents you upload to improve my answers.`	Custom intro message shown when the chat opens. Override to match your brand or use case.
`suggested-prompts`	string	`How can you help?, Summarize a document, Search my docs`	Comma-separated prompt chips shown on the welcome screen. Use JSON array for prompts with commas.
`display-confidence`	boolean	`false`	Show confidence score pill in assistant messages. Use for dev/test or analytics dashboards.

Examples

Pick an attribute to see a minimal <strata-chat> snippet and a visual. Live values also match /demo.

Custom launcher icon

Set icon-url to a square image (PNG or SVG). Used for the floating button and the avatars in the panel.

<strata-chat
  workspace="your-workspace"
  icon-url="https://example.com/logo.png"
></strata-chat>

Default

With icon-url

Workspace slug

The workspace attribute is your workspace slug: the unique identifier you choose when creating a workspace in the Strata dashboard. It determines which knowledge base, documents, and user context the chat uses. For example, if your workspace slug is acme-support, use workspace="acme-support".

Legacy: The tenant attribute is still supported for backward compatibility.

Home Terms Privacy