Widget Button (Public Mode)

Floating chat button widget for public knowledge base access

How to Embed (CDN)

Add this code to any website to embed the public chat button:

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

<script>
  new Chatter.ChatButton({
    host: 'your-api-url.com',
    mode: 'public',
    apiKey: 'YOUR_API_KEY_HERE',
    position: 'bottom-right',
    label: '💬',
    chatConfig: {
      title: 'Chat with us',
      subtitle: 'We typically reply in a few minutes'
    }
  });
</script>

NPM Installation

Or install via npm for modern JavaScript projects:

npm install @diegoaltoworks/chatter

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

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

How This Demo Works

This page embeds the Chatter.ChatButton widget with the following code:

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

<script>
  new Chatter.ChatButton({
    host: 'your-api-url.com',
    mode: 'public',
    apiKey: 'YOUR_API_KEY_HERE',
    position: 'bottom-right',
    label: '💬',
    chatConfig: {
      title: 'Public Demo',
      subtitle: 'Ask me anything'
    }
  });
</script>

Configuration Options

• host - Your API host (e.g., 'bot.diegoalto.app')
• mode - Set to 'public' for public knowledge base access
• apiKey - Session key or API key
• position - Button position: 'bottom-right', 'bottom-left', 'top-right', or 'top-left'
• label - Button text/emoji (default: '💬')
• chatConfig - Chat window configuration (title, subtitle, placeholder, etc.)