Documentation
Mode hero : l'avatar dans la page
Vous désignez un conteneur dans votre mise en page, et le widget y installe le personnage et une barre de commande. La conversation démarre là où le visiteur regarde déjà.
Le balisage sur votre page
Vous pilotez la conversation avec vos propres attributs, sans toucher à l'interface de programmation du widget.
<!-- Le conteneur que l'avatar occupera. Son contenu sert de repli. -->
<div class="hero-avatar" data-caip-avatar>
<picture><img src="/images/ada.png?v=2" alt="Ada, assistante IA"></picture>
</div>
<!-- Mention visible à côté du personnage. Le widget ajoute sa propre
note, mais uniquement tant qu'il occupe le conteneur. -->
<p>Ada est une assistante IA. La conversation est menée par un système, pas par une personne.</p>
<!-- Votre bouton d'appel vocal, n'importe où sur la page -->
<button type="button" data-caip-call>Parler à Ada</button>
<!-- Votre bouton pour ouvrir le chat écrit -->
<button type="button" data-caip-open>Écrivez-nous</button>Trois attributs
| Attribut | Signification |
|---|---|
| data-caip-avatar | Le conteneur repris par le widget. Il reçoit son propre arbre de styles fermé, contenant le cadre de l'avatar et une barre de commande |
| data-caip-call | Démarre une conversation vocale dans l'avatar. N'ouvre pas la bulle |
| data-caip-open | Ouvre le panneau du chat écrit |
Les règles sur lesquelles on nous interroge le plus
- Le repli disparaît tard
- L'image du conteneur reste en place tant que le cadre ne s'est pas correctement chargé. Une mauvaise configuration laisse la page avec votre image, pas avec un rectangle vide.
- La session s'ouvre paresseusement
- Le premier clic ouvre la session, puis la conversation vocale. Le clic reste un geste du visiteur, et c'est ce qui rend le microphone et la lecture audio autorisés par le navigateur.
- Il n'y a qu'une conversation
- Il n'y a qu'un cadre à la fois et, lorsque la fenêtre de chat est ouverte, il appartient au panneau : votre conteneur revient alors à son contenu de repli et récupère le cadre à la fermeture. L'exception est une conversation déjà en cours dans l'avatar, qui garde son cadre pendant que le panneau n'affiche que les commandes d'appel.
- Ne placez pas de bouton juste sous le conteneur
- Une fois le conteneur repris, la barre du widget y dessine son propre bouton de démarrage. Votre bouton placé directement en dessous viendrait se poser dessus.
- Hauteur
- Le cadre prend sa largeur du conteneur et sa hauteur d'un rapport carré. Un conteneur à hauteur automatique n'a besoin d'aucun réglage. Un conteneur à hauteur explicite l'emporte, et la barre de conversation qui grandit prend sa hauteur sur lui plutôt que sur la page, si bien que la mise en page ne saute pas.
- Quand la voix est désactivée
- Les boutons d'appel dans l'avatar se cachent définitivement, et votre propre bouton ne devient pas muet : il ouvre alors le chat.
- La mention dans votre contenu de repli
- Tant que le panneau détient le cadre, le personnage de votre page est votre propre contenu de repli, sans la barre du widget et donc sans sa note. Donnez à ce contenu une phrase visible indiquant que le personnage est une assistante IA, et pas seulement un texte alternatif ou un aria-label.
Content-Security-Policy
L'avatar est intégré dans un cadre. Si votre page envoie un en-tête Content-Security-Policy, elle doit autoriser un cadre venant de app.aivatary.com dans la directive frame-src. De notre côté, l'intégration est limitée par la directive frame-ancestors aux domaines de votre liste, si bien que le cadre ne peut pas être posé sur la page d'un inconnu.
Voyez-le tourner
Le mode hero tourne sur notre propre page d'accueil. Le personnage dans l'en-tête, c'est exactement ce mécanisme.