Documentation
Widget integration guide and API reference for <strata-chat>
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 — no CSS conflicts, fully isolated.
<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>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 | — | 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. |
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
Basic
<script src="https://strata.fyi/widget.js" defer></script>
<strata-chat workspace="your-workspace"></strata-chat>Custom icon and title
<strata-chat
workspace="your-workspace"
icon-url="https://example.com/logo.png"
chat-title="Support"
></strata-chat>Custom welcome message and prompts
<strata-chat
workspace="your-workspace"
welcome-message="Hi! I'm your support assistant. How can I help?"
suggested-prompts="Pricing, Contact us, FAQ"
></strata-chat>Local development
<strata-chat
workspace="your-workspace"
api-url="http://localhost:3000"
></strata-chat>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.