Comment obtenir l'état de votre widget Chatway à l'aide de fonctions JavaScript

Ce guide vous montrera comment utiliser une fonction JavaScript pour obtenir l'état de votre widget Chatway.

Pour en savoir plus sur la façon d'utiliser les fonctions JavaScript pour ajouter ou supprimer des données personnalisées Chatyway, veuillez consulter notre guide visuel facile ici.

Vérifier de manière synchrone si le widget Chatway est actuellement ouvert

isChatwayWidgetOpen();

Utilisation :

$chatway.isChatwayWidgetOpen();

Exemple :

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
}

Cas d'utilisation:

• Logique conditionnelle basée sur l'état du widget
• Suivi analytique
• Prévention des actions en double
• Ajustements personnalisés de l'interface utilisateur

Vérifier de manière synchrone si Chatway a terminé son chargement

isChatwayLoaded();

Utilisation :

$chatway.isChatwayLoaded();

Exemple :

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
}

Cas d'utilisation:

• Vérification de la disponibilité de l'API Chatway
• Initialisation conditionnelle
• Débogage des problèmes de chargement

Déclenché lorsque le widget Chatway est ouvert

chatwayWidgetOpened;

Détails de l'événement : { isOpen: true }

Exemple :

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

Cas d'utilisation:

• Suivi analytique
• Mise en pause du contenu multimédia à l'ouverture du widget
• Ajustements personnalisés de l'interface utilisateur
• Intégration avec d'autres outils de chat

Déclenché lorsque le widget Chatway est fermé

chatwayWidgetClosed;

Détails de l'événement : { isOpen: false }

Exemple :

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

Cas d'utilisation:

• Suivi analytique
• Reprise de la lecture multimédia à la fermeture du widget
• Nettoyer les ressources
• Animations personnalisées

Fonction de rappel appelée à chaque ouverture ou fermeture du widget.

$chatwayWidgetStateChange, (Modèle de rappel)

Paramètres: data: { isOpen: boolean }

Exemple :

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

Cas d'utilisation:

• Une seule fonction de rappel pour les états ouvert et fermé.
• Plus simple que de gérer plusieurs écouteurs d'événements
• Logique basée sur les états

Voici un exemple d'utilisation complet :

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

Voilà ! Si vous avez d'autres questions, n'hésitez pas à nous contacter – nous sommes là pour vous aider ! 🙂