Customize the widget

Choose appearance and copy

Set colors, theme, company branding and launcher placement at https://app.message.com/settings/chats/customization. Edit welcome content, pre-chat fields and office hours in their dedicated Chat settings pages. Save each change before checking the live site.

Add a support button

Your website can add a button that opens the existing widget. The shipped bundle does not provide a data-no-launcher attribute or a custom unread-event API; adding your button does not automatically hide the standard launcher.

function configureWidget() {
  const widget = window.__msgWidget;
  if (!widget) return;
  // Call these in response to your own interface controls:
  document.querySelector('#contact-support')?.addEventListener('click', () => {
    widget.open();
  });
}

if (window.__msgWidget) configureWidget();
else window.addEventListener('message:ready', configureWidget, { once: true });

// Other supported panel controls, once ready:
// window.__msgWidget.close();
// window.__msgWidget.toggle();
// window.__msgWidget.open('help');

Avoid unsupported theme overrides

There is no public runtime setTheme method. The widget receives its appearance from the site configuration. Shadow DOM isolates its internal layout; do not rely on changing internal element selectors from your website.

Verify the published installation

Test the published page in a separate browser session. Confirm widget.js loads, the launcher opens, a visitor message reaches Inbox and an agent reply returns. Test with your site’s actual content security policy, consent controls and mobile layout.

The script connects to its own origin by default. With the standard snippet, allow the relevant script and HTTPS/WSS requests to app.message.com. Check image, media and injected-style requirements separately. Do not put an agent JWT or integration secret in the page.