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

# Widget control

> Control the InboxMate widget programmatically with JavaScript.

After the widget script loads, you can control it programmatically through the `window.PSquaredChat` object.

## Initialization

The widget auto-initializes from the script tag, but you can also initialize manually:

```javascript theme={null}
window.PSquaredChat.init({
  agentId: 'your-agent-id',
  theme: 'auto',        // 'light', 'dark', or 'auto'
  primaryColor: '#10b981',
  position: 'bottom-right', // 'bottom-left' or 'bottom-right'
  uiLang: 'multi',      // 'en', 'de', or 'multi'
  buttonIcon: 'messageCircle', // 'messageCircle', 'chat', 'help', 'support', 'bubble', or 'custom'
  buttonAnimation: 'default'   // 'default', 'bounce', 'slide', 'fade', or 'none'
});
```

## Widget instance

Access the active widget instance:

```javascript theme={null}
const widget = window.PSquaredChat.widget;
```

## Destroying the widget

Remove the widget from the page:

```javascript theme={null}
window.PSquaredChat.destroy();
```

## Configuration options

| Option            | Type       | Description                                            |
| ----------------- | ---------- | ------------------------------------------------------ |
| `agentId`         | `string`   | Your agent's unique identifier                         |
| `theme`           | `string`   | `light`, `dark`, or `auto` (follows system preference) |
| `primaryColor`    | `string`   | Hex color for the widget theme                         |
| `position`        | `string`   | `bottom-left` or `bottom-right`                        |
| `uiLang`          | `string`   | `en`, `de`, or `multi` (auto-detect)                   |
| `buttonIcon`      | `string`   | Preset icon or `custom` with `buttonIconUrl`           |
| `buttonIconUrl`   | `string`   | URL for a custom button icon                           |
| `buttonAnimation` | `string`   | Trigger button animation style                         |
| `showOnPages`     | `string[]` | URL patterns where the widget should appear            |
| `hideOnPages`     | `string[]` | URL patterns where the widget should be hidden         |

## Email collection

Configure email collection within the widget:

```javascript theme={null}
window.PSquaredChat.init({
  agentId: 'your-agent-id',
  emailCollection: {
    enabled: true,
    requestAfterMessage: 3, // Ask for email after 3 messages
    collectName: true
  }
});
```

## Human handover

Configure human support availability (Pro and Business plans):

```javascript theme={null}
window.PSquaredChat.init({
  agentId: 'your-agent-id',
  humanSupport: {
    enabled: true,
    // Customize handover messages per language
  }
});
```

## Delayed messages

Show timed messages to engage visitors. Supports multi-language:

```javascript theme={null}
window.PSquaredChat.init({
  agentId: 'your-agent-id',
  delayedMessages: [
    {
      delay: 5000, // 5 seconds
      message: {
        en: 'Need help? Ask me anything!',
        de: 'Brauchen Sie Hilfe? Fragen Sie mich!'
      }
    }
  ]
});
```