Manova JavaScript API
Open, close and reset the widget from your own buttons, and react when visitors open it.
Once the widget has loaded, it adds a small window.Manova object to your page.
<button onclick="Manova.open()">Chat with us</button>Wait until it is ready
The script loads asynchronously, so window.Manova does not exist right away. Listen for manova:ready, or check
for it first:
function whenManovaReady(callback) {
if (window.Manova) callback(window.Manova);
else window.addEventListener('manova:ready', () => callback(window.Manova), { once: true });
}
whenManovaReady((manova) => {
document.querySelector('#help').addEventListener('click', () => manova.open());
});Methods
Every method acts on the first widget on the page. If you load more than one assistant on the same page, pass a
widget key to choose one: Manova.open('pk_...'). A call that names a widget still loading runs once it is ready.
open()
Opens the chat window. If the assistant asks for contact details first (set in the panel), the form shows.
close()
Closes the chat window. The conversation is kept.
toggle()
Opens the window if it is closed, closes it if it is open.
isOpen()
Returns true while the chat window is open.
reset()
Forgets the current conversation in this browser and shows a fresh one. Use it when a visitor signs out of your site.
logoutButton.addEventListener('click', () => window.Manova?.reset());version
The API version, currently 1. Methods are only ever added within a version.
Events
The widget dispatches these on window. Each carries the widget key in event.detail.bot.
| Event | When |
|---|---|
manova:ready | The widget has loaded and window.Manova can be used. |
manova:open | The chat window opened, by the visitor or by your code. |
manova:close | The chat window closed. |
Send them to your analytics:
window.addEventListener('manova:open', (event) => {
window.gtag?.('event', 'manova_open', { bot: event.detail.bot });
});TypeScript
interface ManovaWidgetApi {
readonly version: 1;
open(bot?: string): void;
close(bot?: string): void;
toggle(bot?: string): void;
reset(bot?: string): void;
isOpen(bot?: string): boolean;
}
interface ManovaEventDetail {
bot: string;
}
declare global {
interface Window {
Manova?: ManovaWidgetApi;
}
interface WindowEventMap {
'manova:ready': CustomEvent<ManovaEventDetail>;
'manova:open': CustomEvent<ManovaEventDetail>;
'manova:close': CustomEvent<ManovaEventDetail>;
}
}
export {};