Documentation
Le widget
Gaspard sur n’importe quel site en deux lignes de HTML : options, API JavaScript, apparence et accessibilité.
Le widget est une bulle de discussion autonome que l’on colle sur n’importe quel site : WordPress, Wix, Webflow, un CMS communal ou une page HTML. Il gère tout : l’avis de confidentialité, le consentement, la session visiteur, les réponses en flux, les sources, les annonces et les droits du visiteur.
Installation #
- Demandez un assistant IA en indiquant les adresses de votre site (avec et
sans
wwwsi les deux existent) : l’équipe HubMix crée votre client widget, le configure et vous remet sa clé publiablevcp_live_…. - Gardez cette clé sous la main.
- Collez ces deux lignes dans vos pages, avant
</body>:
<script src="https://hubmix.dealmood-solutions.com/widget/gaspard.js" defer></script>
<gaspard-assistant data-key="vcp_live_…" data-locale="fr"></gaspard-assistant>Gaspard apparaît en bas à droite. Le script seul fonctionne aussi : les attributs data-* posés
sur la balise <script> créent l’élément pour vous.
<script src="https://hubmix.dealmood-solutions.com/widget/gaspard.js" data-key="vcp_live_…" data-locale="fr" defer></script>Options #
| Attribut | Défaut | Effet |
|---|---|---|
data-key |
— | La clé publiable du client (obligatoire) |
data-locale |
langue de la page (<html lang>) |
fr, de ou en |
data-page |
— | Contexte libre transmis à Gaspard, par exemple admissions (80 caractères au plus) |
data-suggestions |
celles de Gaspard | Questions proposées, séparées par | (quatre au plus) |
data-api |
l’origine du script | Adresse du service, si elle diffère |
data-app-url |
https://valais-connect.ch |
Base des liens vers les pages de Valais Connect suggérées |
<gaspard-assistant
data-key="vcp_live_…"
data-locale="fr"
data-page="tourisme"
data-suggestions="Que faire à Lyon ce week-end ?|Où trouver un logement étudiant à Montréal ?">
</gaspard-assistant>API JavaScript #
Le script expose window.Gaspard :
| Appel | Effet |
|---|---|
Gaspard.open() |
Ouvre la fenêtre |
Gaspard.close() |
La ferme |
Gaspard.ask("…") |
Ouvre la fenêtre et pose la question |
Gaspard.version |
Version du widget |
<button type="button" id="aide">Une question ? Demandez à Gaspard</button>
<script>
document.getElementById('aide').addEventListener('click', () => window.Gaspard?.open());
</script>Apparence #
Le widget porte l’identité de Gaspard IA (rouge, Gaspard en portrait) et suit le mode clair ou sombre du système du visiteur. Il vit dans un Shadow DOM : les styles de votre site ne l’atteignent pas, et les siens ne débordent pas sur votre page. Il n’y a pas, à ce jour, d’option de thème officielle (couleurs, position) : si vous en avez besoin, écrivez à l’équipe HubMix.
Ce que voit le visiteur #
- Au premier clic : l’avis de confidentialité, une case « J’accepte » obligatoire et une case « Aider à améliorer Gaspard » facultative.
- Les réponses arrivent mot à mot, avec les sources, les fiches des annonces (lien vers la source d’origine) et les liens vers les pages de l’app Valais Connect.
- 👍 / 👎 sur chaque réponse.
- Dans le menu : Télécharger mes données et Effacer mes données.
Le jeton visiteur et la conversation en cours sont gardés dans le localStorage du navigateur,
par clé. Si Gaspard est très sollicité (503), le widget réessaie seul après Retry-After ; en
cas de quota dépassé (429), il affiche un message clair.
Accessibilité #
Clavier complet (piège de focus dans la fenêtre, Échap pour fermer), annonces aria-live des
réponses, plein écran sur mobile et animations réduites avec prefers-reduced-motion.
Dépannage #
| Symptôme | Cause probable |
|---|---|
| La bulle n’apparaît pas | Script bloqué par la CSP, ou data-key absent |
« Origine non autorisée » (403 origin_not_allowed) |
L’adresse exacte du site (protocole, www, port) n’est pas déclarée pour le client |
| Rien ne se passe après « J’accepte » | Trop de sessions depuis la même adresse (429) : réessayez plus tard |
Une clé vck_live_… dans la page |
Mauvaise clé : une clé serveur ne fonctionne pas dans un navigateur, et doit être révoquée si elle a été publiée |