Hoe krijg je de status van je Chatway-widget met behulp van JavaScript-functies?

Deze handleiding laat u zien hoe u een JavaScript-functie kunt gebruiken om de status van uw Chatway-widget op te vragen.

Voor meer informatie over het gebruik van JavaScript-functies om aangepaste Chatyway-gegevens toe te voegen of te verwijderen, kunt u onze eenvoudige visuele handleiding hier bekijken.

Controleer synchroon of de Chatway-widget momenteel geopend is.

isChatwayWidgetOpen();

Gebruik :

$chatway.isChatwayWidgetOpen();

Voorbeeld :

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
}

Gebruik Gevallen:

• Voorwaardelijke logica gebaseerd op de widgetstatus
• Analytics-tracking
• Dubbele acties voorkomen
• Aangepaste UI-aanpassingen

Controleer synchroon of Chatway klaar is met laden.

isChatwayLoaded();

Gebruik :

$chatway.isChatwayLoaded();

Voorbeeld :

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
}

Gebruik Gevallen:

• Controleren of de Chatway API klaar is voor gebruik.
• Voorwaardelijke initialisatie
• Problemen met laden oplossen

Wordt geactiveerd wanneer de Chatway-widget wordt geopend.

chatwayWidgetOpened;

Evenementdetails: { isOpen: true }

Voorbeeld :

// 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)
})

Gebruik Gevallen:

• Analytics-tracking
• Media pauzeren wanneer widget wordt geopend
• Aangepaste UI-aanpassingen
• Integratie met andere chattools

Wordt geactiveerd wanneer de Chatway-widget wordt gesloten.

chatwayWidgetClosed;

Evenementdetails: { isOpen: false }

Voorbeeld :

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()
})

Gebruik Gevallen:

• Analytics-tracking
• Het hervatten van de media wanneer de widget wordt gesloten.
• Middelen opruimen
• Aangepaste animaties

Callbackfunctie die wordt aangeroepen wanneer de widget wordt geopend of gesloten.

$chatwayWidgetStateChange; (Terugbelpatroon)

parameters: data: { isOpen: boolean }

Voorbeeld :

// 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')
  }
}

Gebruik Gevallen:

• Eén callback voor zowel de open als de gesloten toestand.
• Eenvoudiger dan het beheren van meerdere gebeurtenislisteners.
• Toestandsgebaseerde logica

Hier volgt een volledig gebruiksvoorbeeld:

// 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'
  }
}

Dat is alles! Als je nog vragen hebt, neem dan gerust contact met ons op – we helpen je graag! 🙂