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

# In-App Messaging

> Display in-app messages and use the inbox API with the browser SDK.

In-app messages appear while users are active on your site. The browser SDK loads the Zixflow In-App Plugin when you provide a `siteId`, then displays campaigns after the user is identified.

### Enable in-app messaging

Pass settings under the `Zixflow In-App Plugin` integration when you load the SDK:

```javascript theme={null}
import { AnalyticsBrowser } from '@zixflow/analytics-browser'

const analytics = AnalyticsBrowser.load(
  { writeKey: 'YOUR_WRITE_KEY' },
  {
    integrations: {
      'Zixflow In-App Plugin': {
        siteId: 'YOUR_SITE_ID',
        // anonymousInApp: false, // optional: allow messages for anonymous users
      }
    }
  }
)
```

You can also register the plugin manually:

```javascript theme={null}
import { AnalyticsBrowser, InAppPlugin } from '@zixflow/analytics-browser'

const analytics = AnalyticsBrowser.load({ writeKey: 'YOUR_WRITE_KEY' })

await analytics.register(
  InAppPlugin({
    siteId: 'YOUR_SITE_ID',
    events: null,
    _env: undefined,
    _logging: undefined,
    anonymousInApp: false,
  })
)
```

### Identify users

Identify a user before personalized in-app messages can be delivered:

```javascript theme={null}
analytics.identify('user-123', {
  email: 'user@example.com',
})
```

### How messages appear

1. Create and launch an in-app campaign in the Zixflow dashboard.
2. When campaign conditions match, the SDK fetches and displays the message.
3. Standard modal / overlay messages render without extra UI code.

Page calls help route-targeted campaigns. Call `analytics.page()` on SPA navigations.

### Listen for in-app events

Provide an `events` listener in plugin settings to receive message lifecycle events:

```javascript theme={null}
const analytics = AnalyticsBrowser.load(
  { writeKey: 'YOUR_WRITE_KEY' },
  {
    integrations: {
      'Zixflow In-App Plugin': {
        siteId: 'YOUR_SITE_ID',
        events: (event) => {
          console.log('In-app event:', event.type, event.detail)
        },
      }
    }
  }
)
```

### Notification inbox

When the plugin is loaded, call `analytics.inbox()` for persistent inbox messages:

```javascript theme={null}
const inbox = analytics.inbox()

const total = await inbox.total()
const unopened = await inbox.totalUnopened()
const messages = await inbox.messages()

const unsubscribe = inbox.onUpdates((messages) => {
  // Rebuild your inbox UI
})

for (const message of messages) {
  await message.markOpened()
  // await message.markUnopened()
  // await message.markDeleted()
  // message.trackClick('cta')
}

// Optional: filter by topic
const promotions = analytics.inbox('promotions')
```

| Method                      | Description                                    |
| --------------------------- | ---------------------------------------------- |
| `total()`                   | Total inbox messages                           |
| `totalUnopened()`           | Unopened count                                 |
| `messages()`                | Current messages                               |
| `onUpdates(callback)`       | Subscribe to list changes; returns unsubscribe |
| `message.markOpened()`      | Mark opened                                    |
| `message.markUnopened()`    | Mark unopened                                  |
| `message.markDeleted()`     | Delete                                         |
| `message.trackClick(name?)` | Track a click metric                           |

For the full method list, see the [API Reference](/documentation/sdk/javascript/api-reference).