Feature · Built

Embeddable widget

mango.js is vanilla TypeScript in a shadow DOM, so it works on any site stack without style clashes. Every project starts from the same default widget and customizes it from settings or per-page script attributes.

One script tag, five layouts, 17.5 KB gzipped. Walkthrough: Customize the widget

Five layouts#

Layout	What the visitor sees
Input bar (default)	A full input at the bottom of the page with Point, the message box, ⌘K and send.
Chat button	A round button in a corner that opens the chat as a popover. This site uses it.
Full screen	An expand button in the chat header, or the chat always opens full screen.
Inline	The chat renders inside an element of your page, always open.
Host-controlled	No widget button at all. Your own UI calls `mango.open()`.

InteractiveWidget playground

Preview

Layout

Position

Full screen

Mode

Accent

Button label

acme.app/help

Acme

Assistant · team online

Hi! Ask me anything about Acme.

Does it work offline?

Yes, drafts sync when you reconnect.Read more: Offline mode →

Ask anything…

embed tag

<script src="https://your-host/mango.js"
  data-project="pk_…"
  data-layout="launcher"
  data-position="bottom-right" async></script>

project settings (JSON)

{
  "theme": {
    "mode": "dark",
    "accent": "#e91e63",
    "layout": "launcher",
    "position": "bottom-right",
    "launcher_label": "Ask Mango",
    "fullscreen": "button"
  }
}

Small by design#

The initial bundle has a 40 KB gzipped budget, enforced by a size check in CI. The current build measures 17.5 KB gzipped. The screenshot module (about 9.5 KB gzipped) loads only when a visitor starts a selection.

Live, and resumable#

Replies arrive live over WebSocket, with an SSE fallback for networks that block WebSockets. The visitor's anonymous ID is stored first-party, so the conversation resumes when they return, and replies sent while the tab was closed show as an unread badge.