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.

---

✨ Features

- 🚀 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)

---

📦 Installation

$3

``bash
npm install @eusate/messenger-sdk
`

$3

`bash
yarn add @eusate/messenger-sdk
`

$3

#### Auto-updating (Recommended)

`html


`

#### Pinned Version (Maximum Stability)

`html


`

---

🚀 Quick Start

$3

`html









Welcome to My Website








`

$3

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 (


{children}



)
}
`

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 (


)
}

export default App
`

$3

`vue




`

---

📖 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
Need Help? Chat with us!
`

---

$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

💬 Chat with Support


`

$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 top

import 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