Installer Echo Support sur votre site
La balise à coller, les attributs qu’elle accepte, et quoi vérifier ensuite.
Echo Support s’ajoute à un site existant par une seule balise <script>. Le fichier qu’elle charge dessine lui-même le bouton de clavardage et le panneau qui s’ouvre au clic : rien à installer, aucun paquet à ajouter, aucune modification de votre code.
1. Récupérer l’identifiant de votre organisation
Le tableau de bord affiche la balise déjà remplie avec l’identifiant de votre organisation, dans Configuration → Intégrations (app.echo-group.ca/support/integrations). Un bouton y copie la balise complète, l’identifiant compris.
2. Coller la balise dans vos pages
<script
src="https://widget.echo-group.ca/widget.js"
data-organization-id="VOTRE_ID_ORGANISATION"
></script>Posez-la juste avant la fermeture de <body>, sur chaque page où le clavardage doit apparaître. Le chargeur attend que la page soit prête avant de dessiner quoi que ce soit et ajoute ses éléments à la fin du corps du document : l’endroit exact de la balise ne change donc rien à l’affichage.
3. Vérifier
Rechargez la page : un bouton rond de 60 pixels apparaît dans le coin choisi. Au clic, il ouvre un panneau de 400 × 600 pixels — ramené à la largeur de la fenêtre sur un petit écran — et son icône devient une croix, qui referme le panneau.
Les attributs acceptés
| Attribut | Valeurs | Défaut | Effet |
|---|---|---|---|
| data-organization-id | l’identifiant affiché dans Intégrations | aucun — obligatoire | Rattache les conversations à votre organisation. Sans lui, le chargeur écrit une erreur dans la console du navigateur et n’affiche rien du tout. |
| data-color | une couleur hexadécimale à six chiffres, par exemple #1a5af0 | #1a5af0 | Couleur du bouton flottant, de son ombre et du panneau. |
| data-position | bottom-right, bottom-left | bottom-right | Coin de la fenêtre où se posent le bouton et le panneau. |
Le widget suit le thème sombre de votre site : si votre page pose la classe « dark » sur l’élément <html>, le panneau s’affiche en sombre — au chargement, et de nouveau chaque fois que la classe change.
Si rien n’apparaît
- Ouvrez la console du navigateur. « Echo Widget: data-organization-id attribute is required » signifie que l’attribut manque ou est vide : le chargeur s’arrête là, volontairement.
- Vérifiez que la balise est bien dans la page servie, et non commentée. Le chargeur lit d’abord la balise en cours d’exécution ; à défaut, il cherche dans la page une balise dont l’adresse contient « widget » et qui porte l’attribut data-organization-id.
- N’incluez la balise qu’une seule fois par page : chaque copie exécute le chargeur de nouveau, et ajoute son propre bouton.
Ce que votre forfait autorise
La balise est la même pour tous les forfaits. Ce qui change, c’est ce que le widget peut faire derrière.
| Gratuit | Essentiel | Pro | Entreprise | |
|---|---|---|---|---|
| Conversations par mois | 25 | 250 | 1 000 | 3 000 |
| Agent IA | non inclus | inclus | inclus | inclus |
| Utilisateurs | 1 | 3 | 5 | 10 |
| Documents dans la base de connaissances | 0 | 5 | 20 | 100 |
| Historique du forfait | 7 jours | 1 mois | 3 mois | 1 an |
| Mention « Propulsé par Echo » | affichée | affichée | affichée | affichée |