Eusate Messenger SDK - Embeddable AI-powered customer support
npm install @eusate/messenger-sdk> Embeddable AI-powered customer support chat widget for your website



Eusate Messenger SDK lets you add intelligent customer support to your website in minutes. Built with TypeScript, it works seamlessly across all modern frameworks including Next.js, React, Vue, and vanilla JavaScript.
---
- 🚀 Easy Integration - Add to any website with one line of code
- 🎯 Framework Agnostic - Works with Next.js, React, Vue, Angular, and plain HTML
- 🔒 Secure - API key authentication with strict origin validation
- 📱 Responsive - Mobile-first design that works everywhere
- ⚡ SSR Safe - Full Next.js App Router support out of the box
- 🔧 TypeScript - Complete type definitions included
- 🌐 CDN Ready - Use via npm or direct script tag
- ♿ Accessible - WCAG compliant with keyboard navigation
- 🎨 Customizable - Match your brand with custom styling (coming soon)
---
``bash`
npm install @eusate/messenger-sdk
`bash`
yarn add @eusate/messenger-sdk
#### Auto-updating (Recommended)
`html`
#### Pinned Version (Maximum Stability)
`html`
---
`html
Welcome to My Website
`
Option 1: Client Component
`tsx
// app/components/ChatWidget.tsx
'use client'
import { useEffect } from 'react'
import Eusate from '@eusate/messenger-sdk'
export default function ChatWidget() {
useEffect(() => {
Eusate.init({
apiKey: process.env.NEXT_PUBLIC_EUSATE_API_KEY!,
onReady: () => console.log('Chat is ready!'),
onError: (error) => console.error('Chat error:', error),
})
return () => {
Eusate.destroy()
}
}, [])
return null
}
`
`tsx
// app/layout.tsx
import ChatWidget from './components/ChatWidget'
export default function RootLayout({ children }) {
return (
Option 2: Dynamic Import (Code Splitting)
`tsx
// app/layout.tsx
import dynamic from 'next/dynamic'const ChatWidget = dynamic(() => import('./components/ChatWidget'), {
ssr: false,
})
export default function RootLayout({ children }) {
return (
{children}
)
}
`$3
`tsx
import { useEffect } from 'react'
import Eusate from '@eusate/messenger-sdk'function App() {
useEffect(() => {
Eusate.init({
apiKey: process.env.REACT_APP_EUSATE_API_KEY!,
})
return () => {
Eusate.destroy()
}
}, [])
return (
My App
{/ Your content /}
)
}export default App
`$3
`vue
My App
`---
📖 API Reference
$3
Initialize the chat widget.
`typescript
Eusate.init({
apiKey: string, // Required: Your Eusate API key
onReady?: () => void, // Optional: Called when SDK is ready
onError?: (error: Error) => void // Optional: Called on errors
})
`Example:
`javascript
Eusate.init({
apiKey: 'esk_live_abc123...',
onReady: () => {
console.log('Eusate is ready!')
},
onError: (error) => {
console.error('Failed to load chat:', error)
},
})
`---
$3
Programmatically open the chat window.
`javascript
Eusate.open()
`Example Use Case:
`html
`---
$3
Programmatically close the chat window.
`javascript
Eusate.close()
`---
$3
Remove the chat widget completely from the page. Useful for cleanup in single-page applications.
`javascript
Eusate.destroy()
`Important: After calling
destroy(), you need to call init() again to re-initialize.---
$3
Check if the SDK is initialized.
`javascript
if (Eusate.isInitialized()) {
console.log('SDK is ready to use')
}
`Returns:
boolean---
$3
Check if the chat window is currently open.
`javascript
if (Eusate.isOpen()) {
console.log('Chat is open')
} else {
console.log('Chat is closed')
}
`Returns:
boolean---
$3
Get the current SDK version.
`javascript
console.log('SDK Version:', Eusate.version)
// Output: "0.1.0"
`Returns:
string---
🔧 Configuration
$3
#### Next.js
`env
.env.local
NEXT_PUBLIC_EUSATE_API_KEY=your-api-key-here
`Note: The
NEXT_PUBLIC_ prefix is required for client-side access.#### React (Create React App)
`env
.env
REACT_APP_EUSATE_API_KEY=your-api-key-here
`#### Vue (Vite)
`env
.env
VITE_EUSATE_API_KEY=your-api-key-here
`---
🎨 Advanced Usage
$3
`typescript
// Open chat after 5 seconds
setTimeout(() => {
Eusate.open()
}, 5000)// Close chat on route change
router.events.on('routeChangeStart', () => {
Eusate.close()
})
`$3
`html
`$3
`typescript
Eusate.init({
apiKey: process.env.NEXT_PUBLIC_EUSATE_API_KEY!,
onError: (error) => {
// Log to error tracking service
console.error('Eusate SDK Error:', error) // Show fallback to user
alert('Chat is temporarily unavailable. Please email support@example.com')
},
})
`$3
`typescript
// Only load for logged-in users
if (user.isAuthenticated) {
Eusate.init({
apiKey: process.env.NEXT_PUBLIC_EUSATE_API_KEY!,
})
}
`---
🌍 Framework-Specific Guides
$3
`tsx
// pages/_app.tsx
import { useEffect } from 'react'
import type { AppProps } from 'next/app'
import Eusate from '@eusate/messenger-sdk'export default function App({ Component, pageProps }: AppProps) {
useEffect(() => {
Eusate.init({
apiKey: process.env.NEXT_PUBLIC_EUSATE_API_KEY!,
})
return () => {
Eusate.destroy()
}
}, [])
return
}
`$3
`typescript
// app.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core'
import Eusate from '@eusate/messenger-sdk'@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent implements OnInit, OnDestroy {
ngOnInit() {
Eusate.init({
apiKey: environment.eusateApiKey,
})
}
ngOnDestroy() {
Eusate.destroy()
}
}
`$3
`svelte
My App
`---
🔒 Security
$3
✅ Do:
- Store API keys in environment variables
- Use different API keys for development and production
- Rotate API keys periodically
❌ Don't:
- Commit API keys to version control
- Expose API keys in client-side code comments
- Share API keys publicly
$3
If your site uses CSP, add these directives:
`
Content-Security-Policy:
frame-src https://chat.eusate.com;
script-src https://cdn.eusate.com;
connect-src https://api.eusate.com;
`---
🐛 Troubleshooting
$3
Check:
1. API key is correct and active
2. No console errors in browser DevTools
3. JavaScript is enabled in browser
4. No ad blockers interfering
`javascript
// Debug initialization
Eusate.init({
apiKey: 'your-key',
onReady: () => console.log('✅ SDK Ready'),
onError: (error) => console.error('❌ SDK Error:', error),
})// Check status
console.log('Initialized?', Eusate.isInitialized())
console.log('SDK Version:', Eusate.version)
`$3
Solution: Make sure you're using
'use client' directive:`tsx
'use client' // ← Add this at the topimport Eusate from '@eusate/messenger-sdk'
`Or use dynamic import with
ssr: false.$3
Solution: Install types (they're included automatically):
`bash
npm install @eusate/messenger-sdk
`If types aren't working, add to
tsconfig.json:`json
{
"compilerOptions": {
"moduleResolution": "node",
"esModuleInterop": true
}
}
`$3
Solution: Make sure you're not calling
init() multiple times. Use the singleton pattern:`typescript
// ✅ Good
useEffect(() => {
Eusate.init({ apiKey: 'key' })
return () => Eusate.destroy()
}, []) // Empty dependency array// ❌ Bad
useEffect(() => {
Eusate.init({ apiKey: 'key' })
}, [someValue]) // Reinitializes on every change
`---
---
📄 License
ISC License - see LICENSE file for details.
---
📚 Documentation
- API Reference
- Version Management
- Release Process
---
💬 Support
- Documentation: https://docs.eusate.com
- Email: dev@eusate.com
---
🔗 Links
- NPM Package
- GitHub Repository
- Changelog
---
⚡ Quick Reference
| Task | Command |
| ---------- | ------------------------------------- |
| Install |
npm install @eusate/messenger-sdk |
| Initialize | Eusate.init({ apiKey: 'your-key' }) |
| Open Chat | Eusate.open() |
| Close Chat | Eusate.close() |
| Cleanup | Eusate.destroy()` |---
Made with ❤️ by Eusate