Piloter le widget depuis votre page
Ouvrir, fermer ou recharger le widget par le code de votre site.
Le chargeur du widget pose un objet EchoWidget sur la fenêtre. Il permet d’ouvrir le panneau depuis un de vos propres boutons, de le fermer, de le retirer de la page, ou de le redessiner avec d’autres réglages.
// Ouvrir le panneau depuis votre propre bouton
document.querySelector('#aide').addEventListener('click', function () {
window.EchoWidget.show()
})
// Le refermer
window.EchoWidget.hide()
// Retirer le bouton et le panneau de la page
window.EchoWidget.destroy()
// Redessiner le widget avec d'autres réglages
window.EchoWidget.init({ position: 'bottom-left', color: '#0f766e' })Les quatre fonctions
| Fonction | Effet |
|---|---|
| EchoWidget.show() | Ouvre le panneau et remplace l’icône du bouton par une croix. Sans effet si le widget a été retiré par destroy(). |
| EchoWidget.hide() | Referme le panneau, avec la même animation que le clic sur la croix. |
| EchoWidget.destroy() | Retire le bouton et le panneau du document et cesse d’écouter les messages du widget. Rien n’est perdu côté conversation : le visiteur reste reconnu et retrouve ses échanges dans la liste du widget à la prochaine ouverture. |
| EchoWidget.init(reglages) | Retire le widget existant puis le redessine. Accepte organizationId, position et color ; chaque valeur absente garde celle en place. Passez toujours un objet, même vide. |
Quand l’objet existe
EchoWidget n’est posé sur la fenêtre que si le chargeur a trouvé un identifiant d’organisation. Sans l’attribut data-organization-id, il écrit une erreur dans la console et s’arrête avant : window.EchoWidget vaut alors undefined. Testez-le avant de l’appeler si votre code peut tourner sur une page sans la balise.
if (window.EchoWidget) window.EchoWidget.show()Donner l’identifiant autrement que par l’attribut
Si votre page ne peut pas porter d’attribut sur la balise — un gestionnaire de balises qui la réécrit, un modèle qui ne laisse pas la main —, posez window.__echoOrgId AVANT de charger le widget : le chargeur s’en sert quand il ne trouve l’attribut ni sur sa propre balise, ni sur une autre balise de la page dont l’adresse contient « widget ».
<script>window.__echoOrgId = 'VOTRE_ID_ORGANISATION'</script>
<script src="https://widget.echo-group.ca/widget.js"></script>Le bouton et le panneau se placent au-dessus du reste de la page (z-index 999999 et 999998). Si un élément de votre site doit passer par-dessus, il lui faut une valeur plus haute.