Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.waniwani.ai/llms.txt

Use this file to discover all available pages before exploring further.

The chat embed is a self-contained IIFE bundle that drops the WaniWani chat into any website. It talks directly to app.waniwani.ai, so no backend proxy is required on your side.
Platform feature. The dashboard generates the embed snippet for your project. Open app.waniwani.ai to get yours, or read more about the Platform.
The embed mounts inline wherever you place a <div data-waniwani-embed></div> marker. You control the size by sizing that container with CSS. There is no floating bubble.

​
Quick start

  1. Open your project on app.waniwani.ai and copy the chat embed snippet from the project settings.
  2. Paste it into your site’s HTML, alongside a mount point where you want the chat to appear:
<!-- Where the chat appears, sized by your CSS -->
<div data-waniwani-embed style="height: 600px; max-width: 480px;"></div>

<!-- The <script> tag you copied from the dashboard goes here. -->
That’s it. The chat mounts inside your marker div via Shadow DOM (so its styles never leak into your page). The snippet ships pre-wired with your project token, channel ID, and any defaults you configured in the dashboard. Don’t hand-author it — the channel ID is issued by the Platform and required for the embed to route correctly.

​
Sizing

The embed fills its container. Give the <div data-waniwani-embed> a definite size via CSS: 
<!-- Fixed height -->
<div data-waniwani-embed style="height: 600px;"></div>

<!-- Bounded by max-height -->
<div data-waniwani-embed style="max-height: 80vh;"></div>

<!-- Flex column child -->
<div style="display: flex; flex-direction: column; max-height: 800px;">
  <div data-waniwani-embed style="flex: 1 1 auto; min-height: 0;"></div>
</div>
If the parent is fully unbounded the chat grows with content. A ResizeObserver mirrors the container’s max-height onto the embed so padding and borders are respected.

​
Overriding attributes

The snippet you paste is a starting point. After pasting, you can edit data-* attributes on the <script> tag to tweak behavior:
AttributeTypeNotes
data-titlestringHeader title. Defaults to "Assistant".
data-welcome-messagestringGreeting shown before the first message.
data-placeholderstringInput field placeholder.
data-suggestionsstring (comma-separated)Initial suggestion chips.
data-enable-thread-historybooleanPersist threads in IndexedDB. Defaults to false.
data-cssstringURL to a custom stylesheet loaded into the shadow root.
data-primary-colorstringBrand color (bubble, send button).
data-background-colorstringPanel background.
data-text-colorstringDefault text color.
data-font-familystringCustom font stack.
Leave the wiring attributes (data-token, data-channel-id, data-api, the script src) as the dashboard generated them. Full type definitions: EmbedConfig and ChatTheme.

​
Programmatic init

For runtime control (computing options dynamically, mounting on demand), drop the data-token attribute from the script tag and call init() manually. You still need the wiring attributes from a dashboard-issued snippet: 
<div data-waniwani-embed></div>

<!-- Keep the script src and data-channel-id from the dashboard snippet,
     just remove data-token so the embed doesn't auto-init. -->
<script
  src="https://cdn.jsdelivr.net/npm/@waniwani/sdk@latest/dist/chat/embed.js"
  data-channel-id="..."
  defer
></script>
<script>
  window.addEventListener("DOMContentLoaded", () => {
    window.WaniWani.chat.init({
      token: "wwp_...", // from the dashboard snippet
      welcomeMessage: computeGreetingForUser(),
    });
  });
</script>
init() returns an instance with destroy() and sendMessage(text). You can also call window.WaniWani.chat.destroy() and window.WaniWani.chat.sendMessage("...") directly on the global.

​
Self-hosting the JS bundle

If you’d rather not load from a CDN, pin a specific SDK version and serve the bundled file yourself. The data-* attributes still come from the dashboard snippet — you’re only swapping where embed.js is served from: 
bun add @waniwani/sdk
cp node_modules/@waniwani/sdk/dist/chat/embed.js public/waniwani-embed.js
Then point the dashboard-issued snippet at your local copy: 
<div data-waniwani-embed></div>
<script
  src="/waniwani-embed.js"
  data-token="wwp_..."
  data-channel-id="..."
  defer
></script>

​
How it works

  1. The script reads its own data-* attributes (token, channel ID, theming, content overrides).
  2. On DOMContentLoaded (or immediately, if the DOM is already ready), it locates [data-waniwani-embed] and mounts the chat inside it via Shadow DOM.
  3. The chat calls app.waniwani.ai/api/mcp/chat with the project token and streams responses back through Server-Sent Events.
  4. Conversation history lives only in memory by default; set data-enable-thread-history to persist threads in IndexedDB on the user’s device.
No server-side integration on your side. If you want React-component-level control instead of the script tag, see Chat in React.