AI Chatbot for Single-Page Applications
Persistent AI chat across route changes in any SPA
Vatdi provides an AI chatbot widget designed for single-page applications built with React, Vue, Angular, or any client-side framework. The widget persists across route changes, preserves conversation state, and integrates with your SPA router without page reloads or re-initialization.
How It Works
Install the Framework Package
Install @vatdi/react, @vatdi/vue, or @vatdi/angular from npm. Each package provides typed components with full IDE support.
Add the Component
Place the Vatdi component in your app layout or root component. Pass your chatbot ID and optional configuration props.
Handle Route Context
Optionally pass the current route or page title as a prop. The widget updates its context for page-aware AI responses.
SPA-Aware Lifecycle
The Vatdi widget detects client-side navigation and updates its page context without reinitializing. Conversations persist across route changes. The widget does not flash, reload, or lose scroll position when visitors navigate your SPA.
Framework Components
Use Vatdi React, Vue, or Angular components that integrate with your framework lifecycle. Components handle mounting, unmounting, and prop changes cleanly. Pass visitor data, page context, and custom metadata as props that update in real time.
Lazy Loading and Code Splitting
The Vatdi widget supports dynamic import for code-split bundles. Load the chat widget only when needed, for example after user interaction or on specific routes. This keeps your initial bundle size minimal while still offering AI chat on demand.
Frequently Asked Questions
Yes. The widget maintains conversation state and scroll position across all client-side route changes without reinitializing.
Yes. Install @vatdi/react from npm. It provides a fully typed React component with props for all configuration options.
Yes. The @vatdi/vue package supports both Vue 2 and Vue 3 with Composition API and Options API examples.
Yes. Use dynamic import to load the Vatdi component only when needed. This is useful for routes where chat is not immediately required.
Yes. For SSR frameworks, the widget hydrates client-side after initial render. Documentation includes specific Next.js and Nuxt setup guides.
Add AI Chat to Your SPA
Framework components for React, Vue, and Angular with full SPA support.