Events & Callbacks

The Inpera embed script emits events that you can listen to for custom integrations.

Available Events

Event	Trigger
inpera:ready	Script initialized
inpera:connected	WebSocket connected
inpera:comment:add	New comment added
inpera:comment:resolve	Comment resolved
inpera:snapshot	Snapshot captured
inpera:mode:change	Mode changed

Listening to Events

window.addEventListener('inpera:ready', (event) => {
  console.log('Inpera is ready!', event.detail);
});

window.addEventListener('inpera:comment:add', (event) => {
  const { comment, user, position } = event.detail;
  console.log(`New comment from ${user.name}: ${comment.text}`);
});

Callback Configuration

Set callbacks during initialization:

initInpera({
  projectId: 'YOUR_PROJECT_ID',
  callbacks: {
    onReady: () => console.log('Ready!'),
    onConnect: () => console.log('Connected!'),
    onComment: (comment) => trackAnalytics('comment', comment),
    onError: (error) => reportError(error),
  },
});

Event Details

inpera:comment:add

interface CommentAddEvent {
  comment: {
    id: string;
    text: string;
    createdAt: string;
  };
  user: {
    id: string;
    name: string;
    avatar: string;
  };
  position: {
    x: number;
    y: number;
    selector: string;
  };
}

inpera:mode:change

interface ModeChangeEvent {
  mode: 'default' | 'comment' | 'inspect';
  previousMode: string;
}

Custom Integrations

Analytics

window.addEventListener('inpera:comment:add', (e) => {
  analytics.track('Comment Added', {
    projectId: e.detail.projectId,
    userId: e.detail.user.id,
  });
});

Slack Notifications

window.addEventListener('inpera:comment:add', async (e) => {
  await fetch('/api/slack/notify', {
    method: 'POST',
    body: JSON.stringify({
      text: `New comment: ${e.detail.comment.text}`,
      user: e.detail.user.name,
    }),
  });
});

Error Handling

window.addEventListener('inpera:error', (e) => {
  console.error('Inpera error:', e.detail.message);
  
  // Attempt recovery
  if (e.detail.code === 'CONNECTION_LOST') {
    window.inpera?.reconnect();
  }
});