Addon ChatWeb

Mis à jour le 2 min de lecture

Vous avez la possibilité à tout moment de mettre en place votre Chatbot directement connecté à vos sources de données sur votre site internet à l’aide d’un simple copier/coller dans le code. Suivez les brèves instructions depuis le module afin de configurer, personnalisé et installer votre module.

Piloter le chatbot embarqué via son élément HTML

Une fois le chatbot Narrathèque intégré sur votre site grâce au code d’embed, vous pouvez piloter directement l’instance du composant (Custom Element) affichée dans la page :

const widget = document.querySelector('narratheque-chat-widget');

widget.open();                  // panneau réduit
widget.open('fullscreen');      // plein écran
widget.close();
widget.toggle('normal');
widget.isOpen;                  // true / false (getter)

💡 Conseil : privilégiez l’API globale NarrathequeChat si votre code est susceptible de s’exécuter avant le chargement complet du chatbot embarqué : elle patiente automatiquement jusqu’à ce que l’élément soit prêt.

Écouter les événements du chatbot embarqué

Le chatbot émet des CustomEvent qui traversent le Shadow DOM. Vous pouvez les écouter pour déclencher de l’analytics ou synchroniser votre propre interface :

document.addEventListener('narratheque-chat:open', (e) => {
    console.log('Chat ouvert en mode :', e.detail.mode); // 'normal' | 'fullscreen'
});
document.addEventListener('narratheque-chat:close', () => {
    console.log('Chat fermé');
});

Important : ordre de chargement des scripts

Placez le script du chatbot avant votre script d’écoute, ou déclarez votre écouteur au moment du DOMContentLoaded :

<!-- 1. Script du chatbot -->
<script src="narratheque-widget-chat.js" defer></script>

<!-- 2. Votre code (defer aussi => s'exécute après le chatbot) -->
<script defer>
    document.getElementById('search-bar').addEventListener('click', () => {
        NarrathequeChat.open('fullscreen');
    });
</script>