Skip to main content

​
Overview

The Eusate Messenger SDK is an embeddable chat widget. Drop it into any website and your customers get a fully functional, AI-powered support chat — no backend code required on your end. It works as a floating button that opens a chat window. Everything inside (messages, calls, agent handover) is handled automatically.

Script Tag

Paste one line into your HTML. Best for static sites, plain HTML, or any site where you just want to get started.

NPM Package

Install via npm or yarn. Best for React, Next.js, Vue, Angular, Svelte, or any modern framework.

​
Installation

​
Script Tag (Quickest)

Paste this into your HTML, just before </body>: 
<script src="https://cdn.eusate.com/messenger/v0/eusate-sdk.min.js"></script>
<script>
  Eusate.init({ apiKey: 'YOUR_API_KEY' })
</script>
That’s it — the chat widget will appear on your page.
The v0 path auto-updates with bug fixes and new features within the current major version. To pin to an exact release for maximum stability, use a full version path: https://cdn.eusate.com/messenger/v0.2.7/eusate-sdk.min.js

​
NPM / Yarn

npm install @eusate/messenger-sdk
# or
yarn add @eusate/messenger-sdk

​
Quick Start

​
Plain HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Website</title>
  </head>
  <body>
    <h1>Welcome</h1>

    <script src="https://cdn.eusate.com/messenger/v0/eusate-sdk.min.js"></script>
    <script>
      Eusate.init({
        apiKey: 'YOUR_API_KEY',
        onReady: () => console.log('Chat ready'),
        onError: (err) => console.error('Chat error:', err),
      })
    </script>
  </body>
</html>

​
React

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 <div className="App">{/* your content */}</div>
}

​
Next.js (App Router)

// 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 ready'),
      onError: (error) => console.error('Chat error:', error),
    })

    return () => {
      Eusate.destroy()
    }
  }, [])

  return null
}

// app/layout.tsx
import ChatWidget from './components/ChatWidget'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <ChatWidget />
      </body>
    </html>
  )
}
The 'use client' directive is required — the SDK uses browser APIs (window, document) that are not available during server-side rendering.

​
Vue 3

<!-- App.vue -->
<script setup>
import { onMounted, onUnmounted } from 'vue'
import Eusate from '@eusate/messenger-sdk'

onMounted(() => {
  Eusate.init({ apiKey: import.meta.env.VITE_EUSATE_API_KEY })
})

onUnmounted(() => {
  Eusate.destroy()
})
</script>

​
Configuration

​
Eusate.init(config)

​
apiKey
string
required
Your API key. Get it from API Key Settings.
​
environment
string
Target environment. "production" (default) or "development". Use "development" while testing.
​
onReady
() => void
Callback fired when the widget is loaded and ready to use.
​
onError
(error: Error) => void
Callback fired if initialization fails (invalid API key, network issues, etc.).
Eusate.init({
  apiKey: 'your-api-key',
  environment: 'production',
  onReady: () => {
    console.log('Eusate is ready')
  },
  onError: (error) => {
    console.error('Eusate failed to load:', error)
  },
})

​
Environment Variables

# .env.local
NEXT_PUBLIC_EUSATE_API_KEY=your-api-key-here

​
Methods

​
Eusate.open()

Programmatically open the chat window. 
Eusate.open()

// Example: open on button click
document.getElementById('help-btn').onclick = () => Eusate.open()

​
Eusate.close()

Programmatically close the chat window. 
Eusate.close()

​
Eusate.destroy()

Remove the widget from the page entirely. Useful for cleanup in single-page apps when navigating away. 
Eusate.destroy()
After calling destroy(), you must call init() again to re-add the widget.

​
Eusate.isInitialized()

Returns true if the widget has loaded and is ready. 
if (Eusate.isInitialized()) {
  Eusate.open()
}

​
Eusate.isOpen()

Returns true if the chat window is currently visible. 
if (!Eusate.isOpen()) {
  showPrompt('Need help? Chat with us!')
}

​
Eusate.version

The current SDK version string. 
console.log(Eusate.version) // "0.2.7"

​
Advanced Usage

​
Custom Trigger Button

Use your own button to open the chat instead of the default floating button: 
<button id="chat-trigger">💬 Talk to support</button>

<script src="https://cdn.eusate.com/messenger/v0/eusate-sdk.min.js"></script>
<script>
  Eusate.init({ apiKey: 'your-key' })
  document.getElementById('chat-trigger').onclick = () => Eusate.open()
</script>

​
Conditional Loading

Only load the widget for certain users: 
if (user.isAuthenticated) {
  Eusate.init({ apiKey: process.env.NEXT_PUBLIC_EUSATE_API_KEY })
}

​
Route Change Handling (SPAs)

Close the chat when navigating between pages: 
// Next.js App Router
useEffect(() => {
  return () => Eusate.close()
}, [pathname])

​
Security

Never hardcode your API key in client-side code or commit it to version control. Always use environment variables.

​
Content Security Policy (CSP)

If your site enforces CSP headers, add these directives to allow the widget: 
Content-Security-Policy:
  frame-src https://chat.eusate.com;
  script-src https://cdn.eusate.com;
  connect-src https://api.eusate.com;

​
Troubleshooting

​
Widget not appearing

// Add callbacks to see exactly what's happening
Eusate.init({
  apiKey: 'your-key',
  onReady: () => console.log('✅ SDK ready'),
  onError: (error) => console.error('❌ SDK error:', error),
})

console.log('Initialized?', Eusate.isInitialized())
Also check:
  • API key is correct and active in your dashboard
  • No browser extensions (ad blockers) are intercepting the script
  • JavaScript is enabled

​
Next.js: “window is not defined”

You’re importing the SDK in a server component. Add 'use client' at the top of the file, or use dynamic import: 
import dynamic from 'next/dynamic'

const ChatWidget = dynamic(() => import('./components/ChatWidget'), {
  ssr: false,
})

​
Widget appears more than once

You’re calling init() multiple times. Use an empty dependency array in React: 
// ✅ Correct — runs once on mount
useEffect(() => {
  Eusate.init({ apiKey: 'key' })
  return () => Eusate.destroy()
}, [])

// ❌ Wrong — re-runs when someValue changes
useEffect(() => {
  Eusate.init({ apiKey: 'key' })
}, [someValue])

​
More Frameworks

Next.js Pages Router

// pages/_app.tsx
import { useEffect } from 'react'
import Eusate from '@eusate/messenger-sdk'

export default function App({ Component, pageProps }) {
  useEffect(() => {
    Eusate.init({ apiKey: process.env.NEXT_PUBLIC_EUSATE_API_KEY! })
    return () => Eusate.destroy()
  }, [])

  return <Component {...pageProps} />
}

Angular

// 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()
  }
}

Svelte

<script>
  import { onMount, onDestroy } from 'svelte'
  import Eusate from '@eusate/messenger-sdk'

  onMount(() => {
    Eusate.init({ apiKey: import.meta.env.VITE_EUSATE_API_KEY })
  })
  onDestroy(() => Eusate.destroy())
</script>

​
Next Steps