Permettre à Xeno de fonctionner avec une SPA

Xeno supporte les Single-Page-Applications (SPA), grâce à quelques appels de fonctions !

Cet article vous permettra de comprendre le fonctionnement de Xeno, afin que votre bulle de chat puisse tirer le meilleur parti de votre SPA.

Premièrement, vérifiez que vous avez bien suivi les étapes de déploiement de Xeno. Vous pouvez trouver plus d'informations sur la page Déploiement de votre compte.

Comprendre l'initialisation

Quand le script Xeno est chargé, il lit vos configurations _xeno afin d'initialiser la bulle de chat. Par défaut, cette initialisation se passe uniquement après le chargement du script, afin que l'identité et les attributs de votre contact soient définis au même moment.

Mise à jour dynamique des attributs de mes contacts

Dès qu'une information concernant votre contact est modifiée, vous pouvez appeler la fonction suivante pour que Xeno soit automatiquement au courant.

_xeno.updateContact(info)

info étant un objet contenant de nouvelles informations sur votre contact. Si leur nom est changé en "John", l'object ressemblera à ça : {name: "John"}. Cela remplacera l'attribut fourni précédemment grâce à la fonction Identify de votre fragment de code Xeno.

Dans tous les cas, si vous appelez la fonction avec ou sans paramètre, celle-ci vérifiera la page URL actuelle, et se chargera de la mise à jour afin que vous puissiez garder un oeil sur votre contact. Vous pouvez, cependant, forcer cette information en ajoutant un attribut current_page à l'objet info.

L'identification dynamique de mes contacts

Contrairement au process de la mise à jour d'attributs de contacts, qui récolte de l'information sur votre contact, l'identification répond à la question "Qui sont-ils ?"

Dans une SPA, si vos contacts ont la possibilité de se connecter sans avoir à recharger la page, il vous faudra demander à Xeno de les réidentifier une nouvelle fois.

• Dans un premier temps, regardons la fonction Identify de notre fragment de code de plus près :

window._xenoSettings = {
  identify: function() {
    return {
      id: ____,
      name: ____,
      email: ____,
      avatar: ____
    }
  },
  key: "your-public-key",
};

Cette fonction retourne un objet contenant l'ID unique qui identifie votre contact. Assurez-vous qu'elle retourne l'ID et non pas d'autres attributs du contact. De ce fait, si un autre contact se connecte à l'application, il sera correctement identifié.

Si, d'autre part, vous voulez également traiter avec des contacts anonymes (qui ne sont pas connectés), la fonction peut aussi retourner null au lieu de l'ID.

• Maintenant, dès que l'identité de votre contact est modifiée, il suffit d'appeler _xeno.identifyContact(). Ceci utilisera la fonction configurée ci-dessus pour avoir la nouvelle identité du contact.

Comment cacher la bulle de chat pour les contacts non-connectés ?

Si vous ne voulez pas du tout afficher la bulle de chat Xeno aux contacts non-connectés, _xeno.destroy() empêchera le chargement de celle-ci. Appeler _xeno.identifyContact() la réinitialisera.