Chat Widget

Gately.initChatWidget({
  position: 'bottom-right'
})

interface ChatWidgetOptions {
  position?: 'bottom-right' | 'bottom-left'
  primaryColor?: string
  greeting?: string
  placeholder?: string
  showOnMobile?: boolean
  autoOpen?: boolean
  zIndex?: number
}

Gately.initChatWidget({
  position: 'bottom-right',
  primaryColor: '#F97316',
  greeting: 'Hi! How can we help you today?',
  placeholder: 'Type your message...'
})

import { IntegratedChatWidget } from '@gately/sdk'

function App() {
  return (
    <div>
      <YourApp />
      <IntegratedChatWidget 
        position="bottom-right"
        primaryColor="#F97316"
      />
    </div>
  )
}

Gately.initChatWidget({
  primaryColor: '#6366f1',
  styles: {
    fontFamily: 'Inter, sans-serif',
    borderRadius: '16px',
    headerBackground: '#6366f1',
    headerText: '#ffffff',
    userBubble: '#6366f1',
    agentBubble: '#f3f4f6'
  }
})

// Hide default launcher
Gately.initChatWidget({
  showLauncher: false
})

// Use custom button
document.getElementById('chat-btn').addEventListener('click', () => {
  Gately.openChat()
})

Gately.openChat()

Gately.closeChat()

Gately.toggleChat()

Gately.sendChatMessage('Hello, I need help!')

// Automatically set from logged-in user
// Or manually set for anonymous users
Gately.setChatUser({
  name: 'John Doe',
  email: 'john@example.com'
})

Gately.initChatWidget({
  onOpen: () => {
    console.log('Chat opened')
    analytics.track('chat_opened')
  }
})

Gately.initChatWidget({
  onClose: () => {
    console.log('Chat closed')
  }
})

Gately.initChatWidget({
  onMessage: (message) => {
    console.log('New message:', message)
  }
})

Gately.initChatWidget({
  preChatForm: {
    enabled: true,
    fields: [
      { name: 'name', label: 'Name', required: true },
      { name: 'email', label: 'Email', type: 'email', required: true },
      { name: 'topic', label: 'Topic', type: 'select', options: [
        'Sales',
        'Support',
        'Billing',
        'Other'
      ]}
    ]
  }
})

// User is logged in
const user = Gately.getUser()

// Chat widget automatically shows:
// - User's name
// - User's email
// - User's plan
// - Previous conversation history

Gately.initChatWidget({
  showOnMobile: true,
  mobileFullScreen: true, // Open in full screen on mobile
  mobileBreakpoint: 768
})

Gately.initChatWidget({
  showUnreadBadge: true
})

// Get unread count
const count = Gately.getChatUnreadCount()

Gately.initChatWidget({
  offlineMode: {
    enabled: true,
    message: 'We\'re currently offline. Leave a message and we\'ll get back to you.',
    collectEmail: true
  }
})

import { createChatWidget } from '@gately/sdk'

function App() {
  useEffect(() => {
    const widget = createChatWidget({
      position: 'bottom-right',
      primaryColor: '#F97316'
    })

    return () => {
      widget.destroy()
    }
  }, [])

  return <YourApp />
}

// Only show on certain pages
if (window.location.pathname.startsWith('/app')) {
  Gately.initChatWidget()
}

// Only show for logged-in users
if (Gately.isAuthenticated()) {
  Gately.initChatWidget()
}

// Only show for specific plans
const user = Gately.getUser()
if (user?.plan_id === 'pro') {
  Gately.initChatWidget({
    greeting: 'Welcome, Pro member! How can we help?'
  })
}

Gately.destroyChatWidget()