> ## Documentation Index
> Fetch the complete documentation index at: https://docs.molin.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Show/Hide Widget

> Learn how to control widget visibility

## 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:

```html theme={null}
<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:

```javascript theme={null}
// 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();
```

<Note>`window.Molin` is only available after the widget script has fully loaded. We use various algorithms to delay the loading of the script to minimize impact on your website's performance.</Note>

The widget's visibility methods are only available after the widget script has loaded.

The recommended way to know when the widget is ready is to listen for the [`molin:ready`](/home/marketing/javascript-events#molinready) event:

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

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

```javascript theme={null}
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`:

```html theme={null}
<script>
  window.molinSettings = {
    hidden: false,
  };
</script>
```

or use JavaScript to hide the widget on specific pages:

```javascript theme={null}
// 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:

```html theme={null}
<button onclick="window.Molin.openChat()">Chat with us</button>
```
