Embed

Widget playground

Configure the widget live and copy the result. Everything here maps to a real setting or script attribute.

Playground#

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"
  }
}

All options#

Setting	Script tag	Default
`layout`	`data-layout`	`bar` (or `launcher`)
`position`	`data-position`	`bottom-center`
`offset_x`, `offset_y`	`data-offset-x`, `data-offset-y`	24 px
`fullscreen`	`data-fullscreen`	`button`
`auto_open`	`data-open`	off
`z_index`	`data-z-index`	2147483000
`panel_width` × `panel_height`		420 × 600
`launcher_label`, `launcher_icon_url`		icon only
`mobile_fullscreen`, `hide_on_mobile`		on, off
`keyboard_shortcut`		on (⌘K / Ctrl+K)
`show_on_paths`, `hide_on_paths`		every page
`mode`, `accent`, `radius`, `font_family`		dark, #e91e63, pill

The real one is running#

The chat button in the bottom-right corner of this site is the real widget, in the chat-button layout, talking to a real Mango Agent backend with a knowledge base generated from this website. Ask it anything about the project.