Show/Hide Widget

Overview

You can programmatically control when the Molin AI widget is shown or hidden on your pages. This is useful for:

hiding the widget on specific pages (e.g. checkout, terms of service)
showing the widget only after certain conditions are met
managing widget visibility inside iframes

Default behavior

By default, the widget:

is visible on all pages where it’s installed
is hidden when loaded inside an iframe
remembers its open/closed state between page navigations (on desktop only)

Customizing visibility

Option 1. Using settings JSON (recommended)

Simply include your settings in a <script> tag, placed anywhere inside the <head></head> section of your website:

<script>
  window.molinSettings = {
    hidden: false,
  };
</script>

If you set hidden: true, the widget launcher will be hidden when it loads, in all cases, on both mobile and desktop. If you set hidden: false, the widget launcher will be visible when it loads, in all cases, on both mobile and desktop, even if the page was loaded inside an iframe. If you do not set hidden to any value, then the default behavior explained above will apply.

Option 2. Programmatically using JavaScript (advanced)

The widget exposes these methods:

// Show the widget launcher (floating bubble)
window.Molin.showLauncher();

// Hide the widget launcher (floating bubble)
window.Molin.hideLauncher();

// Open the chat window (as if the launcher was clicked)
window.Molin.openChat();

// Close the chat window (as if the launcher was clicked)
window.Molin.closeChat();

window.Molin is only available after the widget script has loaded. See Widget script.

The recommended way to know when the widget is ready is to listen for the molin:ready event:

window.addEventListener('molin:ready', () => {
  window.Molin.showLauncher();
});

Alternatively, you can check if window.Molin is defined:

if (window.Molin) {
  window.Molin.showLauncher();
}

Examples

Hide on specific pages

Either implement some logic on your backend that controls the value assigned to the hidden property inside window.molinSettings:

<script>
  window.molinSettings = {
    hidden: false,
  };
</script>

or use JavaScript to hide the widget on specific pages:

// hide widget launcher on checkout pages
if (window.location.pathname.includes('checkout')) {
  window.Molin.hideLauncher();
}

Show chat window on button click

You can add a “Chat with us” button to your page that opens the chat window when clicked:

<button onclick="window.Molin.openChat()">Chat with us</button>

Get Started

APIs

JavaScript API

Overview

Default behavior

Customizing visibility

Option 1. Using settings JSON (recommended)

Option 2. Programmatically using JavaScript (advanced)

Examples

Hide on specific pages

Show chat window on button click

​Overview

​Default behavior

​Customizing visibility

​Option 1. Using settings JSON (recommended)

​Option 2. Programmatically using JavaScript (advanced)

​Examples

​Hide on specific pages

​Show chat window on button click

Overview

Default behavior

Customizing visibility

Option 1. Using settings JSON (recommended)

Option 2. Programmatically using JavaScript (advanced)

Examples

Hide on specific pages

Show chat window on button click