Embedding the Chat Widget

Script Tag Embed (Simplest)

Add one <script> tag to your HTML page. The widget renders as a floating bubble in the bottom-right corner.

<!-- Paste before </body> in any HTML page -->
<script
  src="https://your-octopus-server.com/widget/octopus-widget.js"
  data-agent-id="customer-support"
  data-position="bottom-right"
  data-primary-color="#4f46e5"
  data-initial-message="Hi! How can I help you today?"
  defer
></script>

React Component Embed

// Install the npm package
npm install @bizfirstai/octopus-react

// In your React component
import { ChatWidget } from '@bizfirstai/octopus-react';

export function SupportPage() {
  return (
    <div>
      <h1>Help Center</h1>

      <ChatWidget
        serverUrl="https://your-octopus-server.com"
        agentId="customer-support"
        position="bottom-right"
        theme={{ primaryColor: '#4f46e5', fontFamily: 'Inter, sans-serif' }}
        initialMessage="Hi! How can I help you today?"
        allowedActions={['file-upload', 'quick-replies', 'feedback']}
        onMessageSent={(msg) => console.log('User sent:', msg)}
        onConversationEnd={(id) => console.log('Conversation ended:', id)}
      />
    </div>
  );
}

Inline Embed (No Bubble)

Embed the chat directly in a page section rather than as a floating bubble:

<!-- Inline container — chat fills the element, no floating bubble -->
<div id="octopus-chat-container" style="height: 600px;"></div>

<script src="https://your-octopus-server.com/widget/octopus-widget.js"></script>
<script>
  OctopusChat.init({
    container:      '#octopus-chat-container',
    agentId:        'help-agent',
    mode:           'inline',
    serverUrl:      'https://your-octopus-server.com',
    primaryColor:   '#4f46e5',
    initialMessage: 'Ask me anything about your account.'
  });
</script>

iframe Embed

<!-- iframe — full isolation, no shared JS context -->
<iframe
  src="https://your-octopus-server.com/chat?agent=help-agent&theme=light"
  width="400"
  height="600"
  style="border:none; border-radius:12px; box-shadow: 0 4px 24px rgba(0,0,0,0.15);"
  allow="microphone"  <!-- if voice input is enabled -->
></iframe>

Authentication

Pass the user's JWT to the widget so the agent knows who is conversing:

// Script tag — JWT from a meta tag or window variable
OctopusChat.init({
  agentId:   'my-agent',
  serverUrl: 'https://your-octopus-server.com',
  auth: {
    type:  'bearer',
    token: document.querySelector('meta[name="auth-token"]').content
  }
});

// React component — pass via prop
<ChatWidget
  agentId="my-agent"
  serverUrl="https://your-octopus-server.com"
  authToken={userSession.accessToken}
/>