Navigation Handling

Inpera seamlessly handles navigation in both traditional and single-page applications.

Automatic Detection

The embed script automatically detects navigation events:

• History API: pushState, replaceState, and popstate
• Hash changes: # navigation
• Link clicks: Standard <a> tag navigation
• Form submissions: GET form redirects

SPA Support

For single-page applications, Inpera tracks route changes automatically:

// React Router, Vue Router, Next.js App Router
// Navigation is detected automatically!

Manual Navigation Events

If you have custom navigation, notify Inpera manually:

window.inpera?.navigate({
  url: '/new-page',
  title: 'New Page Title',
});

Page Context

Each page maintains its own context:

// Get current page context
const context = window.inpera?.getContext();

// Returns:
// {
//   url: '/current-page',
//   title: 'Page Title',
//   viewport: { width: 1920, height: 1080 },
//   annotations: [...],
// }

Preserving Annotations

Annotations are URL-bound:

URL Change	Annotations
Path change	New set
Query params	Preserved
Hash change	Preserved

Route Patterns

Configure which routes are tracked:

initInpera({
  projectId: 'YOUR_PROJECT_ID',
  routes: {
    include: ['/app/*', '/dashboard/*'],
    exclude: ['/login', '/api/*'],
  },
});

Deep Linking

Share links to specific pages with annotations:

https://app.inpera.app/preview/proj_123?url=/products/shoes

SSR Considerations

For server-rendered pages:

• Script loads after hydration
• Initial state captured on first paint
• Navigation tracked from hydration point

Troubleshooting

Annotations not showing on route change?

1. Check if URL is in tracked routes
2. Verify navigation event is detected
3. Check browser console for errors

Lost context on refresh?

1. Ensure URL hasn't changed
2. Check page load timing
3. Verify project ID matches