SDK Integration

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

Node Packages

npm install @eusate/messenger-sdk
# or
yarn add @eusate/messenger-sdk
# or
pnpm add @eusate/messenger-sdk
# or
bun 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)`

string

required

Your API key. Get it from API Key Settings.

string

Target environment. "production" (default) or "development". Use "development" while testing.

() => void

Callback fired when the widget is loaded and ready to use.

(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

# .env
REACT_APP_EUSATE_API_KEY=your-api-key-here

# .env
VITE_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

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

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'
import { environment } from '../environments/environment'; 

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html' 
})
export class AppComponent implements OnInit, OnDestroy {
  ngOnInit() {
    Eusate.init({ apiKey: environment.eusateApiKey })
  }
  ngOnDestroy() {
    Eusate.destroy()
  }
}

Svelte

<!-- MainComponent.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

Socket.IO Events — build a fully custom chat UI from scratch
REST API Reference — fetch conversations and messages via HTTP

Dev Space

Helpdesk

Overview

Script Tag

NPM Package

Installation

Script Tag (Quickest)

Node Packages

Quick Start

Plain HTML

React

Next.js (App Router)

Vue 3

Configuration

`Eusate.init(config)`

Environment Variables

Methods

`Eusate.open()`

`Eusate.close()`

`Eusate.destroy()`

`Eusate.isInitialized()`

`Eusate.isOpen()`

`Eusate.version`

Advanced Usage

Custom Trigger Button

Conditional Loading

Route Change Handling (SPAs)

Security

Content Security Policy (CSP)

Troubleshooting

Widget not appearing

Next.js: “window is not defined”

Widget appears more than once

More Frameworks

Next.js Pages Router

Angular

Svelte

Next Steps

​Overview

Script Tag

NPM Package

​Installation

​Script Tag (Quickest)

​Node Packages

​Quick Start

​Plain HTML

​React

​Next.js (App Router)

​Vue 3

​Configuration

​Eusate.init(config)

​Environment Variables

​Methods

​Eusate.open()

​Eusate.close()

​Eusate.destroy()

​Eusate.isInitialized()

​Eusate.isOpen()

​Eusate.version

​Advanced Usage

​Custom Trigger Button

​Conditional Loading

​Route Change Handling (SPAs)

​Security

​Content Security Policy (CSP)

​Troubleshooting

​Widget not appearing

​Next.js: “window is not defined”

​Widget appears more than once

​More Frameworks

Next.js Pages Router

Angular

Svelte

​Next Steps

Overview

Installation

Script Tag (Quickest)

Node Packages

Quick Start

Plain HTML

React

Next.js (App Router)

Vue 3

Configuration

`Eusate.init(config)`

Environment Variables

Methods

`Eusate.open()`

`Eusate.close()`

`Eusate.destroy()`

`Eusate.isInitialized()`

`Eusate.isOpen()`

`Eusate.version`

Advanced Usage

Custom Trigger Button

Conditional Loading

Route Change Handling (SPAs)

Security

Content Security Policy (CSP)

Troubleshooting

Widget not appearing

Next.js: “window is not defined”

Widget appears more than once

More Frameworks

Next Steps