Skip to main content
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: 
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: 
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: 
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: 
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: 
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')
MethodDescription
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.