Browse the help centre

The web chat widget

Install the Juno chat widget on a website with one script tag, and drive it from JavaScript.

Reference

On this page

The widget puts a chat launcher on your website. Conversations it starts land in the same inbox as WhatsApp, worked with the same tools. A website visitor is anonymous by default, so their chat is its own thread until you tell Juno who they are — see the session note at the end.

Install

One line, immediately before </body>:

<script src="https://juno.medpath.com/widget.js" data-key="WIDGET_KEY" data-api="https://juno.medpath.com" async></script>
  • data-key (required) — the workspace's widget key, from Channels → Web widget.
  • data-api (required off juno.medpath.com) — the API origin. Use the same host you loaded widget.js from.

That is the whole install. The widget mounts a launcher bottom-right, renders inside a Shadow DOM so it cannot collide with your page's CSS, and streams the assistant's replies as they are written.

The widget key is a capability we issue, not a secret you choose. It is safe in page source — it identifies the workspace and nothing else.

Driving it from JavaScript

The script defines a global Juno. To call it before the script has loaded, add this stub above your own calls — it buffers calls until the widget is ready:

<script>
  window.Juno = window.Juno || function () { (Juno.q = Juno.q || []).push(arguments) };
</script>
CallEffect
Juno('open') / Juno('close') / Juno('toggle')Open, close or toggle the panel
Juno('show') / Juno('hide')Show or hide the launcher button
Juno('showNewMessage', 'text')Open the panel with the composer prefilled

In a React app

Mount it once, in an effect:

useEffect(() => {
  const s = document.createElement('script')
  s.src = 'https://juno.medpath.com/widget.js'
  s.async = true
  s.dataset.key = 'WIDGET_KEY'
  s.dataset.api = 'https://juno.medpath.com'
  document.body.appendChild(s)
}, [])

Verify it

Load the page and click the launcher. Send a message — if the AI assistant is enabled the reply arrives in a few seconds, and the conversation appears in the inbox.

What the visitor's session is

A first-time visitor is anonymous. The widget mints a visitor id in the browser, and the server issues a short-lived session ticket when the visitor sends their first message — the ticket, not the id, is what lets the panel replay that conversation's history later.

The practical consequence: a visitor who clears their browser data starts a new conversation, and a visitor with no ticket yet still gets a working live chat, with no archive of one. If you need a returning visitor to be recognised as a specific person, that is identity rather than session, and it needs the identify flow rather than the widget key.