Widget Button (Private Mode)

Authenticated floating chat button with access to private knowledge base

🔐 Authentication Required

Please sign in to access the private chat widget.

Loading authentication...

✅ Authenticated!

You're now signed in. Look for the chat button in the bottom-right corner.

How to Embed (CDN)

Add this code to your private portal to embed the authenticated chat button:

<link rel="stylesheet" href="https://your-api-url.com/chatter.css">
<script src="https://your-api-url.com/chatter.js"></script>

<script>
  // Get JWT token from your auth system
  const jwtToken = await getTokenFromYourAuthSystem();

  new Chatter.ChatButton({
    host: 'your-api-url.com',
    mode: 'private',
    apiKey: 'YOUR_API_KEY_HERE',
    token: jwtToken,
    position: 'bottom-right',
    label: '🔒',
    chatConfig: {
      title: 'Private Chat',
      subtitle: 'Internal support'
    }
  });
</script>

With Clerk Integration

<script>
  // Wait for Clerk to load
  if (window.Clerk?.session) {
    const token = await window.Clerk.session.getToken();

    new Chatter.ChatButton({
      host: 'your-api-url.com',
      mode: 'private',
      apiKey: 'YOUR_API_KEY_HERE',
      token: token,
      position: 'bottom-right'
    });
  }
</script>

NPM Installation

npm install @diegoaltoworks/chatter

import { ChatButton } from '@diegoaltoworks/chatter';
import '@diegoaltoworks/chatter/style.css';

const token = await getYourJWTToken();

new ChatButton({
  host: 'your-api-url.com',
  mode: 'private',
  apiKey: 'YOUR_API_KEY_HERE',
  token: token,
  position: 'bottom-right'
});

How This Demo Works

This page embeds the Chatter.ChatButton component in private mode with Clerk authentication:

<link rel="stylesheet" href="https://your-api-url.com/chatter.css">
<script src="https://your-api-url.com/chatter.js"></script>

<script>
  // Get JWT token from your auth system (e.g., Clerk)
  const jwtToken = await window.Clerk.session.getToken();

  new Chatter.ChatButton({
    host: 'your-api-url.com',
    mode: 'private',
    apiKey: 'YOUR_API_KEY_HERE',
    token: jwtToken,
    position: 'bottom-right',
    label: '🔒',
    chatConfig: {
      title: 'Private Chat',
      subtitle: 'Internal support'
    }
  });
</script>