Customize the widget

Settings → Widget layout sets the project default: input bar or chat button, position, offsets, panel size, full-screen behavior, accent and mode. Try the options in the playground.

Attributes on the script tag win over the saved settings, so one project can look different on different pages:

<script src="…/mango.js" data-project="pk_…"
  data-layout="launcher" data-position="bottom-right"
  data-fullscreen="button" data-open="false" async></script>

Also available: data-offset-x, data-offset-y, data-z-index, data-container (render inline) and data-hide-launcher (host-controlled).

mango.open();     mango.close();    mango.toggle();
mango.expand();   mango.collapse(); // full screen on / off
mango.show();     mango.hide();     // the whole widget
mango.feedback(); // open "Give feedback"

const off = mango.on("message", (m) => console.log(m.sender, m.text));
// events: ready, open, close, expand, collapse, message, unread

Calls made before mango.js loads can be queued with window.mango = window.mango || []. The same events also fire as mango:<event> window CustomEvents.

When a reply links a page on your own site, the widget fires a cancelable mango:navigate event. Handle it with your router and the chat stays open. This site does exactly that.

window.addEventListener("mango:navigate", (e) => {
  const url = new URL(e.detail.url);
  e.preventDefault();
  router.push(url.pathname + url.hash);
});

In an app with accounts, sign userId:email on your server with the project's secret key (HMAC-SHA256) and call mango.identify({ userId, email, name, plan, signature }). See Signed-in users.