Programmatic control (JS API)

The loader exposes a small window.RosettaChat API so your page can drive the widget from JavaScript — open or close the panel from your own button, hide the default launcher, or react when a visitor opens the chat or receives an unread reply.

Methods

Method	Effect
`RosettaChat.open()`	Open the chat panel. Works even when the launcher icon is hidden.
`RosettaChat.close()`	Close the panel.
`RosettaChat.toggle()`	Toggle the panel open/closed.
`RosettaChat.show()`	Show the launcher icon.
`RosettaChat.hide()`	Hide the launcher icon.
`RosettaChat.isOpen()`	Returns `true` if the panel is currently open.
`RosettaChat.on(event, cb)`	Subscribe to an event. Returns an unsubscribe function.

document.querySelector('#chat-button').addEventListener('click', () => {
  window.RosettaChat.open();
});

Events

on(event, callback) subscribes to a lifecycle event and returns a function that unsubscribes it:

Event	Fires when	Payload
`ready`	The API is installed and the widget has mounted.	—
`open`	The panel opens.	—
`close`	The panel closes (including the panel’s own close button).	—
`unread`	The unread count changes while the panel is closed.	`count` (number)

const off = window.RosettaChat.on('open', () => console.log('chat opened'));
// later: off();  // stop listening

Custom launcher

The most common use is replacing the default floating icon with your own button. Add data-launcher="manual" so the default icon never flashes on load, then wire your button to the API and reflect state back onto it:

<script src="https://widget.rosettachat.app/widget.js"
  data-site="wgt_your_public_site_key"
  data-launcher="manual"
  async
></script>

const button = document.querySelector('#chat-button');
button.addEventListener('click', () => window.RosettaChat.toggle());

window.RosettaChat.on('open', () => button.classList.add('is-active'));
window.RosettaChat.on('close', () => button.classList.remove('is-active'));
window.RosettaChat.on('unread', (count) => {
  button.dataset.unread = count > 0 ? String(count) : '';
});

hide() and show() toggle the default icon at any time, and open() always works regardless of whether the icon is visible.

The loader script is async, so window.RosettaChat may not exist yet when your code runs. Either wait for the ready signal:

window.addEventListener('rosetta:ready', () => {
  window.RosettaChat.open();
});

…or install a tiny stub before the loader tag that buffers calls in a queue; the loader replays them in order once it initializes:

<script>
  window.RosettaChat = window.RosettaChat || { q: [] };
  // Each entry is [methodName, ...args]:
  window.RosettaChat.q.push(['hide']);
  window.RosettaChat.q.push(['on', 'open', () => console.log('opened')]);
</script>
<script src="https://widget.rosettachat.app/widget.js" data-site="wgt_..." async></script>

Programmatic control (JS API)

Methods

Events

Custom launcher

Calling before the widget loads