Chat Widget

Configure and customize the Ask0 chat widget interface. Control appearance, behavior, positioning, and user experience settings.

The Ask0 chat widget is the primary interface for users to interact with your AI assistant. It's fully customizable, responsive, and can be configured to match your exact needs.

Bottom Right (Default)

window.ask0.config = {
  position: 'bottom-right',
  offset: {
    bottom: '20px',
    right: '20px'
  }
};

Bottom Left

window.ask0.config = {
  position: 'bottom-left',
  offset: {
    bottom: '20px',
    left: '20px'
  }
};

Center (Commander Style)

window.ask0.config = {
  position: 'center',
  trigger: 'cmd+k', // or ctrl+k
  backdrop: true,
  animation: 'fade-scale'
};

Embedded

<div id="ask0-embed" style="height: 600px; width: 400px;"></div>
<script>
  window.ask0.config = {
    mode: 'embedded',
    container: '#ask0-embed'
  };
</script>

Bubble Mode

The classic floating chat bubble:

Bubble Configuration:
  Size: small | medium | large
  Shape: circle | rounded | square

  States:
    Closed: Show bubble icon
    Open: Expand to chat window
    Minimized: Show title bar only

  Animations:
    Open: slide-up | fade-in | scale
    Close: slide-down | fade-out | scale
    Message: slide-in | fade | none

Fullscreen Mode

Take over the entire viewport:

window.ask0.config = {
  mode: 'fullscreen',
  trigger: 'manual', // or auto
  closeButton: true,
  escapeClose: true
};

Slide in from the side:

window.ask0.config = {
  mode: 'sidebar',
  side: 'right', // or 'left'
  width: '400px',
  pushContent: false // or true to push page content
};

Visual Customization

Size Configuration

Control widget dimensions:

const sizeConfig = {
  // Closed bubble size
  bubble: {
    width: '60px',
    height: '60px'
  },

  // Open chat window
  window: {
    width: '380px',
    height: '600px',
    maxWidth: '90vw',
    maxHeight: '90vh'
  },

  // Mobile overrides
  mobile: {
    window: {
      width: '100%',
      height: '100%'
    }
  }
};

Color Scheme

Customize colors:

const colorScheme = {
  // Primary colors
  primary: '#0066CC',
  primaryForeground: '#FFFFFF',

  // Message colors
  userMessage: '#E3F2FD',
  userMessageText: '#000000',
  assistantMessage: '#FFFFFF',
  assistantMessageText: '#000000',

  // UI elements
  background: '#FFFFFF',
  foreground: '#000000',
  border: '#E0E0E0',
  shadow: 'rgba(0,0,0,0.1)',

  // States
  hover: '#F5F5F5',
  active: '#E0E0E0',
  success: '#4CAF50',
  error: '#F44336'
};

Typography

Font configuration:

const typography = {
  fontFamily: {
    base: 'Inter, system-ui, sans-serif',
    mono: 'SF Mono, Monaco, monospace'
  },
  fontSize: {
    xs: '12px',
    sm: '14px',
    base: '16px',
    lg: '18px',
    xl: '20px'
  },
  fontWeight: {
    normal: 400,
    medium: 500,
    semibold: 600,
    bold: 700
  },
  lineHeight: {
    tight: 1.25,
    normal: 1.5,
    relaxed: 1.75
  }
};

Header Customization

Configure the widget header:

const headerConfig = {
  show: true,
  height: '60px',

  elements: {
    logo: {
      show: true,
      src: '/logo.png',
      size: '32px'
    },
    title: {
      show: true,
      text: 'Support Assistant',
      subtitle: 'We\'re here to help'
    },
    status: {
      show: true,
      online: 'Active',
      offline: 'Away'
    },
    actions: {
      minimize: true,
      maximize: true,
      close: true,
      menu: false
    }
  }
};

Message Display

Customize message appearance:

const messageConfig = {
  // Avatar settings
  avatar: {
    show: true,
    position: 'left', // or 'right'
    size: '32px',
    userImage: null, // or URL
    assistantImage: '/bot-avatar.png'
  },

  // Message bubble
  bubble: {
    maxWidth: '70%',
    padding: '12px 16px',
    borderRadius: '18px',
    showTail: true
  },

  // Metadata
  metadata: {
    showName: true,
    showTime: true,
    timeFormat: 'relative', // or 'absolute'
    showSources: true,
    showFeedback: true
  },

  // Grouping
  grouping: {
    enabled: true,
    timeWindow: 60, // seconds
    maxGroup: 3
  }
};

Input Area

Configure the input interface:

const inputConfig = {
  // Text input
  input: {
    placeholder: 'Type your message...',
    maxLength: 1000,
    rows: 1,
    maxRows: 5,
    autoResize: true,
    showCharCount: true
  },

  // Actions
  actions: {
    send: {
      show: true,
      icon: '→',
      position: 'inside' // or 'outside'
    },
    attach: {
      show: false,
      types: ['image', 'file'],
      maxSize: '10MB'
    },
    voice: {
      show: true,
      continuous: false
    },
    emoji: {
      show: true,
      recent: true
    }
  },

  // Suggestions
  suggestions: {
    show: true,
    items: [
      'How do I get started?',
      'Show me pricing',
      'Contact support'
    ]
  }
};

Behavior Configuration

Auto-Opening

Control when the widget opens:

const autoOpenConfig = {
  enabled: true,

  triggers: {
    // Time-based
    delay: 5000, // ms after page load

    // Scroll-based
    scrollPercent: 50,

    // Exit intent
    exitIntent: true,

    // Idle time
    idleTime: 30000,

    // Page-specific
    pages: ['/pricing', '/features'],

    // User-based
    newUser: true,
    returningUser: false
  },

  // Conditions
  conditions: {
    minScreenWidth: 768,
    notOnMobile: false,
    cookieConsent: true
  },

  // Frequency
  frequency: {
    once: false,
    perSession: true,
    perDay: false
  }
};

Sound Effects

Configure audio feedback:

const soundConfig = {
  enabled: true,
  volume: 0.5,

  sounds: {
    open: '/sounds/open.mp3',
    close: '/sounds/close.mp3',
    messageSent: '/sounds/send.mp3',
    messageReceived: '/sounds/receive.mp3',
    error: '/sounds/error.mp3'
  },

  // Respect user preferences
  respectPreferences: true,
  mutedByDefault: false
};

Animations

Control animations:

const animationConfig = {
  enabled: true,
  duration: 200,
  easing: 'ease-in-out',

  animations: {
    widgetOpen: 'slideUp', // slideUp, fadeIn, scale
    widgetClose: 'slideDown',
    messageIn: 'fadeSlideIn',
    messageOut: 'fade',
    typing: 'pulse'
  },

  // Respect reduced motion
  respectReducedMotion: true
};

Mobile Optimization

Responsive Behavior

Adapt to mobile devices:

const mobileConfig = {
  breakpoint: 768,

  behavior: {
    position: 'fullscreen',
    swipeToClose: true,
    pullToRefresh: false,
    virtualKeyboard: 'resize' // or 'overlay'
  },

  ui: {
    largerTouchTargets: true,
    simplifiedInterface: true,
    hideNonEssential: true
  },

  performance: {
    reducedAnimations: true,
    lowerQualityImages: true,
    messagelimit: 50
  }
};

Advanced Features

Message Actions

Add actions to messages:

const messageActions = {
  copy: {
    enabled: true,
    icon: '📋',
    tooltip: 'Copy message'
  },
  share: {
    enabled: true,
    icon: '🔗',
    tooltip: 'Share'
  },
  report: {
    enabled: true,
    icon: '🚩',
    tooltip: 'Report issue'
  },
  translate: {
    enabled: true,
    icon: '🌐',
    tooltip: 'Translate',
    targetLanguage: 'auto'
  }
};

Rich Content

Support for rich content:

const richContent = {
  // Markdown support
  markdown: {
    enabled: true,
    sanitize: true,
    components: {
      code: true,
      tables: true,
      lists: true,
      links: true,
      images: false
    }
  },

  // Code highlighting
  code: {
    highlight: true,
    theme: 'github-dark',
    showLineNumbers: true,
    copyButton: true
  },

  // Media
  media: {
    images: {
      enabled: true,
      lazy: true,
      maxWidth: '100%'
    },
    videos: {
      enabled: false,
      autoplay: false
    }
  }
};

Feedback System

Configure feedback collection:

const feedbackConfig = {
  enabled: true,

  reactions: {
    positive: '👍',
    negative: '👎',
    custom: ['😊', '😐', '😕']
  },

  detailed: {
    enabled: true,
    trigger: 'negative', // when to ask for details
    questions: [
      'What went wrong?',
      'How can we improve?'
    ]
  },

  analytics: {
    track: true,
    identifyUser: true
  }
};

Accessibility Features

ARIA Configuration

Accessibility attributes:

const accessibilityConfig = {
  // ARIA labels
  labels: {
    widget: 'Chat assistant',
    openButton: 'Open chat',
    closeButton: 'Close chat',
    sendButton: 'Send message',
    input: 'Type your message'
  },

  // Keyboard navigation
  keyboard: {
    openShortcut: 'cmd+k',
    closeShortcut: 'escape',
    sendShortcut: 'cmd+enter',
    historyNav: true
  },

  // Screen reader
  screenReader: {
    announceMessages: true,
    announceStatus: true,
    verboseMode: false
  },

  // Visual
  visualIndicators: {
    focusOutline: true,
    highContrast: 'auto',
    largeText: 'auto'
  }
};

Events & Callbacks

Event Handling

Listen to widget events:

window.ask0.on('ready', () => {
  console.log('Widget loaded');
});

window.ask0.on('open', () => {
  analytics.track('Widget Opened');
});

window.ask0.on('close', () => {
  analytics.track('Widget Closed');
});

window.ask0.on('message', (event) => {
  console.log('Message:', event.message);
  console.log('From:', event.sender);
});

window.ask0.on('feedback', (event) => {
  console.log('Feedback:', event.rating);
  console.log('Message ID:', event.messageId);
});

window.ask0.on('error', (error) => {
  console.error('Widget error:', error);
});

Testing & Debugging

Debug Mode

Enable debugging:

window.ask0.debug = true;
window.ask0.logLevel = 'verbose'; // 'error', 'warn', 'info', 'verbose'

// Debug panel
window.ask0.showDebugPanel = true;

// Performance monitoring
window.ask0.performance = {
  track: true,
  report: true
};

Best Practices

Widget Best Practices:

Test on multiple devices and screen sizes
Keep the initial load lightweight
Provide clear visual feedback for all actions
Ensure keyboard accessibility
Test with slow network connections
Monitor widget performance metrics
A/B test different configurations

Next Steps

Customize Appearance

Advanced styling options

Apply Branding

Match your brand identity

View Integration Guide

Add to your website