Display Modes

Learn about the different display modes available in Chatoshi SDK and when to use each one for your crypto assistant integration.

Display Modes

The Chatoshi SDK supports four different display modes, each optimized for different use cases and user experiences when integrating the crypto assistant.

Default Mode

The default mode embeds the crypto assistant directly into a container element on your page.

When to Use

  • Dedicated crypto analysis sections on your website
  • Dashboard integrations where the crypto assistant is part of the main interface
  • Full-width chat experiences in dedicated trading pages

Implementation

import Chatoshi from 'chatoshi-sdk';

const chat = new Chatoshi({
  partnerKey: 'your-partner-key',
  container: '#chat-container',
  mode: 'default'
});

HTML Structure

<div id="chat-container" style="width: 100%; height: 600px;"></div>

Styling Options

const chat = new Chatoshi({
  partnerKey: 'your-partner-key',
  container: '#chat-container',
  mode: 'default',
  containerStyle: {
    borderRadius: '12px',
    boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
    border: '1px solid #e1e5e9'
  },
  containerClass: ['crypto-chat-widget', 'rounded-lg']
});

The popup mode displays the crypto assistant in a floating window with a toggle button.

When to Use

  • Crypto assistance that doesn't interfere with main trading interface
  • Market analysis help that should be easily accessible but not always visible
  • On-demand crypto support where users need quick access to market insights

Implementation

const chat = new Chatoshi({
  partnerKey: 'your-partner-key',
  mode: 'popup',
  popupOptions: {
    width: '400px',
    height: '600px',
    position: 'bottom-right'
  }
});

Bottom Right (Default)

popupOptions: {
  position: 'bottom-right'
}

Bottom Left

popupOptions: {
  position: 'bottom-left'
}

Top Right

popupOptions: {
  position: 'top-right'
}

Top Left

popupOptions: {
  position: 'top-left'
}

Custom Toggle Button

Instead of the default toggle button, you can use your own:

// Using element selector
popupOptions: {
  customToggleButton: '#crypto-help-button'
}

// Using DOM element
const myButton = document.getElementById('crypto-help-button');
popupOptions: {
  customToggleButton: myButton
}

Programmatic Control

// Open crypto assistant popup
chat.open();

// Close crypto assistant popup
chat.close();

// Toggle crypto assistant popup
chat.toggle();

// Check if open
const popup = chat.getPopup();
if (popup && popup.isOpen()) {
  console.log('Crypto assistant popup is currently open');
}

Drawer Mode

The drawer mode slides the crypto assistant in from the side of the screen as an overlay.

When to Use

  • Mobile crypto trading apps where screen space is limited
  • Crypto portfolio review interfaces where detailed analysis is needed
  • Full-height trading assistant that doesn't take up the entire screen

Implementation

const chat = new Chatoshi({
  partnerKey: 'your-partner-key',
  mode: 'drawer',
  drawerOptions: {
    width: '400px',
    position: 'right'
  }
});

Drawer Positions

Right Side (Default)

drawerOptions: {
  position: 'right'
}

Left Side

drawerOptions: {
  position: 'left'
}

Mobile Optimization

For mobile devices, you might want a full-width drawer:

const isMobile = window.innerWidth <= 768;

const chat = new Chatoshi({
  partnerKey: 'your-partner-key',
  mode: 'drawer',
  drawerOptions: {
    width: isMobile ? '100%' : '400px',
    position: 'right'
  }
});

Programmatic Control

// Open crypto assistant drawer
chat.open();

// Close crypto assistant drawer
chat.close();

// Toggle crypto assistant drawer
chat.toggle();

// Check if open
const drawer = chat.getDrawer();
if (drawer && drawer.isOpen()) {
  console.log('Crypto assistant drawer is currently open');
}

Full Mode

The full mode takes over the entire browser window for an immersive crypto analysis experience.

When to Use

  • Dedicated crypto analysis pages where the assistant is the primary focus
  • Immersive trading experiences for complex market analysis
  • Deep-dive crypto research where you want full user attention

Implementation

const chat = new Chatoshi({
  partnerKey: 'your-partner-key',
  mode: 'full',
  theme: 'dark' // Optional: dark theme works well for full mode
});

Full Mode Features

  • Takes up the entire viewport
  • Includes a close button to exit full mode
  • Perfect for immersive crypto analysis experiences
  • No container element needed

Responsive Design Patterns

Adaptive Mode Switching

Switch between modes based on screen size:

class ResponsiveCryptoAssistant {
  constructor(partnerKey) {
    this.partnerKey = partnerKey;
    this.currentChat = null;
    
    this.initResponsiveChat();
    this.setupMediaQueryListener();
  }

  initResponsiveChat() {
    const mode = this.getOptimalMode();
    this.createChat(mode);
  }

  getOptimalMode() {
    const width = window.innerWidth;
    
    if (width <= 480) {
      return 'drawer'; // Mobile: drawer
    } else if (width <= 768) {
      return 'popup';  // Tablet: popup
    } else {
      return 'default'; // Desktop: default
    }
  }

  createChat(mode) {
    if (this.currentChat) {
      this.currentChat.destroy();
    }

    const options = {
      partnerKey: this.partnerKey,
      mode: mode
    };

    // Mode-specific options
    if (mode === 'default') {
      options.container = '#crypto-chat-container';
    } else if (mode === 'popup') {
      options.popupOptions = {
        width: '350px',
        height: '500px',
        position: 'bottom-right'
      };
    } else if (mode === 'drawer') {
      options.drawerOptions = {
        width: '100%',
        position: 'right'
      };
    }

    this.currentChat = new Chatoshi(options);
  }

  setupMediaQueryListener() {
    // Listen for screen size changes
    window.addEventListener('resize', () => {
      const newMode = this.getOptimalMode();
      this.createChat(newMode);
    });
  }
}

// Usage
const responsiveChat = new ResponsiveCryptoAssistant('your-partner-key');

Conditional Mode Loading

Load different modes based on page context:

function initCryptoAssistantForPage() {
  const page = window.location.pathname;
  let chatConfig = {
    partnerKey: 'your-partner-key'
  };

  if (page.includes('/analysis')) {
    // Analysis pages: full mode for detailed crypto insights
    chatConfig.mode = 'full';
  } else if (page.includes('/trading')) {
    // Trading pages: popup for quick market questions
    chatConfig.mode = 'popup';
    chatConfig.popupOptions = {
      position: 'bottom-right',
      width: '400px',
      height: '600px'
    };
  } else if (page === '/') {
    // Homepage: embedded in hero section
    chatConfig.mode = 'default';
    chatConfig.container = '#crypto-hero-chat';
  } else {
    // Other pages: drawer for space efficiency
    chatConfig.mode = 'drawer';
    chatConfig.drawerOptions = {
      width: '350px',
      position: 'right'
    };
  }

  return new Chatoshi(chatConfig);
}

// Initialize crypto assistant based on current page
const chat = initCryptoAssistantForPage();

Best Practices

Mode Selection Guidelines

  1. Default Mode: Use when crypto analysis is a primary feature of the page
  2. Popup Mode: Ideal for quick crypto queries and market assistance
  3. Drawer Mode: Best for mobile crypto apps or when preserving trading interface context is important
  4. Full Mode: Use for detailed crypto analysis sessions that require full attention

Performance Considerations

  • Only initialize one crypto assistant instance at a time
  • Destroy chat instances when switching modes
  • Use lazy loading for crypto widgets on pages where they might not be used

Accessibility

All modes support:

  • Keyboard navigation
  • Screen reader compatibility
  • Focus management
  • ARIA labels

Testing Different Modes

// Quick mode testing utility
function testCryptoAssistantMode(mode) {
  if (window.testChat) {
    window.testChat.destroy();
  }

  window.testChat = new Chatoshi({
    partnerKey: 'test-partner-key',
    mode: mode,
    container: mode === 'default' ? '#test-container' : undefined
  });

  console.log(`Testing crypto assistant in ${mode} mode`);
}

// Test in browser console:
// testCryptoAssistantMode('popup');
// testCryptoAssistantMode('drawer');
// testCryptoAssistantMode('full');

Choose the display mode that best fits your crypto platform's use case and user experience goals. Each mode can be customized extensively to match your brand and design requirements.