Installation

Learn how to install and set up the Chatoshi SDK in your project using simple HTML script tags.

Installation

This guide will help you install and set up the Chatoshi SDK in your project using HTML script tags.

Prerequisites

Before you begin, ensure you have:

  • A modern web browser
  • Your Partner Key from the Chatoshi platform

Installation

The Chatoshi SDK is designed to work with simple HTML script tags. No package managers or build tools required.

Basic HTML Setup

Add the Chatoshi SDK script to your HTML page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website with Chatoshi</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
  
  <!-- Your page content -->
  <div id="chat-container" style="width: 100%; height: 500px;"></div>

  <!-- Include Chatoshi SDK -->
  <script src="chatoshi-sdk.js"></script>
  <script>
    // Initialize Chatoshi
    const chat = new Chatoshi({
      partnerKey: 'your-partner-key',
      container: '#chat-container',
      mode: 'default',
      theme: 'light'
    });

    // Listen for events
    chat.on('app:ready', () => {
      console.log('✅ Chatoshi crypto assistant is ready!');
    });
  </script>
</body>
</html>

Display Modes

Default Mode (Inline)

Embed the chat directly into a container on your page:

<div id="my-chat" style="width: 100%; height: 400px; border: 1px solid #ddd;"></div>

<script src="chatoshi-sdk.js"></script>
<script>
  const inlineChat = new Chatoshi({
    partnerKey: 'your-partner-key',
    container: '#my-chat',
    mode: 'default'
  });
</script>

Display chat in a floating popup window:

<script src="chatoshi-sdk.js"></script>
<script>
  const popupChat = new Chatoshi({
    partnerKey: 'your-partner-key',
    mode: 'popup',
    popupOptions: {
      width: '400px',
      height: '600px',
      position: 'bottom-right'
    }
  });
</script>

Drawer Mode

Slide-in chat panel from the side:

<script src="chatoshi-sdk.js"></script>
<script>
  const drawerChat = new Chatoshi({
    partnerKey: 'your-partner-key',
    mode: 'drawer',
    drawerOptions: {
      width: '350px',
      position: 'right'
    }
  });

  // Control drawer manually
  function openChat() {
    drawerChat.open();
  }

  function closeChat() {
    drawerChat.close();
  }
</script>

Full Mode

Take over the entire screen:

<script src="chatoshi-sdk.js"></script>
<script>
  const fullChat = new Chatoshi({
    partnerKey: 'your-partner-key',
    mode: 'full',
    theme: 'dark'
  });
</script>

Configuration Options

Required Parameters

  • partnerKey - Your unique partner key

Optional Parameters

  • container - CSS selector for inline mode (required for default mode)
  • mode - Display mode: 'default', 'popup', 'drawer', or 'full'
  • theme - Theme: 'light', 'dark', or 'system'
  • popupOptions - Configuration for popup mode
  • drawerOptions - Configuration for drawer mode

Event Handling

<script src="chatoshi-sdk.js"></script>
<script>
  const chat = new Chatoshi({
    partnerKey: 'your-partner-key',
    mode: 'popup'
  });

  // Core events
  chat.on('app:ready', () => {
    console.log('Chatoshi crypto assistant is ready!');
  });

  chat.on('message:sent', (data) => {
    console.log('Message sent:', data);
  chat.on('app:error', (error) => {
    console.error('Application error:', error);
  });

  chat.on('message:sent', (data) => {
    console.log('Message sent:', data);
  });

  chat.on('message:received', (data) => {
    console.log('Message received:', data);
  });

  // Mode-specific events
  chat.on('popup:open', () => {
    console.log('Popup opened');
  });

  chat.on('popup:close', () => {
    console.log('Popup closed');
  });
</script>

Verification

To verify that the SDK is working correctly:

<!DOCTYPE html>
<html>
<head>
  <title>Chatoshi Test</title>
</head>
<body>
  <h1>Testing Chatoshi SDK</h1>
  
  <script src="chatoshi-sdk.js"></script>
  <script>
    const chat = new Chatoshi({
      partnerKey: 'your-partner-key',
      mode: 'popup'
    });

    chat.on('app:ready', () => {
      console.log('✅ Chatoshi SDK is working!');
      alert('Crypto assistant is ready!');
    });
  </script>
</body>
</html>

Next Steps

Now that you have the SDK installed, you can:

Troubleshooting

Common Issues

Chatoshi is not defined

Error: Chatoshi is not defined

Make sure the chatoshi-sdk.js script is loaded before your initialization code.

Container not found error

Error: Container element not found

Ensure the container element exists in the DOM before initializing the SDK for default mode.

Invalid credentials error

Error: Partner Key is required for Chatoshi initialization

Check that you've provided a valid partnerKey credential.

Invalid credentials error

Error: Partner ID is required for Chatoshi initialization

Check that you've provided valid partnerId, partnerSecret, and appId credentials.