How to get the state of your Chatway widget using JavaScript functions

This guide will show you how to use a JavaScript function to get the state of your Chatway widget.

To learn more about how to use JavaScript functions to add or remove Chatyway custom data, please check our easy visual guide here.

Synchronously check if the Chatway widget is currently open

isChatwayWidgetOpen();

Usage:

$chatway.isChatwayWidgetOpen();

Example:

if (window.$chatway.isChatwayWidgetOpen()) {
  console.log('Widget is currently open')
  // Do something when widget is open
} else {
  console.log('Widget is closed')
  // Do something when widget is closed
}

Use Cases:

• Conditional logic based on widget state
• Analytics tracking
• Preventing duplicate actions
• Custom UI adjustments

Synchronously check if Chatway has finished loading

isChatwayLoaded();

Usage:

$chatway.isChatwayLoaded();

Example:

if (window.$chatway.isChatwayLoaded()) {
  console.log('Chatway is ready!')
  // Safe to call other Chatway methods
  window.$chatway.openChatwayWidget()
} else {
  console.log('Chatway is still loading...')
  // Wait for chatwayLoaded event
}

Use Cases:

• Checking if Chatway API is ready to use
• Conditional initialization
• Debugging load issues

Fired when the Chatway widget is opened

chatwayWidgetOpened;

Event Detail: { isOpen: true }

Example:

// Listen on window
window.addEventListener('chatwayWidgetOpened', (event) => {
  console.log('Widget opened!', event.detail.isOpen)

  // Example: Track widget open in analytics
  gtag('event', 'chatway_widget_opened')

  // Example: Pause background video
  document.getElementById('bgVideo').pause()
})

// Or listen on document
document.addEventListener('chatwayWidgetOpened', (event) => {
  console.log('Widget opened!', event.detail)
})

Use Cases:

• Analytics tracking
• Pausing media when widget opens
• Custom UI adjustments
• Integration with other chat tools

Fired when the Chatway widget is closed

chatwayWidgetClosed;

Event Detail: { isOpen: false }

Example:

window.addEventListener('chatwayWidgetClosed', (event) => {
  console.log('Widget closed!', event.detail.isOpen)

  // Example: Track widget close in analytics
  gtag('event', 'chatway_widget_closed')

  // Example: Resume background video
  document.getElementById('bgVideo').play()
})

Use Cases:

• Analytics tracking
• Resuming media when widget closes
• Cleaning up resources
• Custom animations

Callback function that gets called whenever the widget opens or closes

$chatwayWidgetStateChange; (Callback Pattern)

Parameters: data: { isOpen: boolean }

Example:

// Register callback - single function for both open and close
window.$chatwayWidgetStateChange = (data) => {
  console.log('Widget state changed:', data.isOpen)

  if (data.isOpen) {
    console.log('Widget is now open!')
    // Handle open state
    document.body.classList.add('chatway-active')
  } else {
    console.log('Widget is now closed!')
    // Handle closed state
    document.body.classList.remove('chatway-active')
  }
}

Use Cases:

• Single callback for both open/close states
• Simpler than managing multiple event listeners
• State-based logic

Here’s the complete usage example:

// Check if Chatway is loaded
if (window.$chatway.isChatwayLoaded()) {
  console.log('Chatway is ready!')

  // Check widget state
  if (window.$chatway.isChatwayWidgetOpen()) {
    console.log('Widget is already open')
  }
} else {
  // Wait for Chatway to load
  window.$chatwayOnLoad = (data) => {
    console.log('Chatway loaded!', data.widgetId)
    // Now safe to use Chatway methods
  }
}

// Listen for widget state changes using DOM events
window.addEventListener('chatwayWidgetOpened', (event) => {
  console.log('Widget opened:', event.detail.isOpen)
  // Send to analytics
  if (window.gtag) {
    gtag('event', 'chatway_opened')
  }
})

window.addEventListener('chatwayWidgetClosed', (event) => {
  console.log('Widget closed:', event.detail.isOpen)
  // Send to analytics
  if (window.gtag) {
    gtag('event', 'chatway_closed')
  }
})

// OR use callback pattern (simpler for handling both states)
window.$chatwayWidgetStateChange = (data) => {
  console.log('Widget state:', data.isOpen ? 'open' : 'closed')

  // Update your UI
  const indicator = document.getElementById('chatway-status')
  if (indicator) {
    indicator.textContent = data.isOpen ? 'Chat is open' : 'Chat is closed'
    indicator.className = data.isOpen ? 'status-open' : 'status-closed'
  }
}

That’s it! If you have any further questions, please don’t hesitate to reach out – we are here to help! 🙂